Web Standards & Best Practices

Web Standards & Best Practices

Fixing Styles on `code` Tags Nested Inside Links

on | 2 Comments

Fixing Styles on `code` Tags Nested Inside LinksOne thing that’s common in development blog posts and documentation is the use of HTML’s <code> tags to mark up code snippets inline and in large blocks (the latter of which is usually done along with <pre> tags).

One of the problems that occurs with styling of <code> tags, however, is when they’re used inline inside of links (or <a> elements).

w3schools: The Ugly, the Bad, and the Good

w3schools logoFor the record, I don’t hate w3schools. Apparently, a lot of people find their website useful. And from a human perspective, I’m happy for their success. After all, it’s run by one or more people, just like you and me, who have to feed their families.

But with everything we know about SEO and web development best practices, their ability to remain at the top of search results and also be in the top 200 most-visited websites in the world even after Google has made so many updates to their ranking algorithms, baffles us all.

In this post I’ll attempt to analyze a number of things about the w3schools.com website, both good and bad (mostly bad) and see if we can’t learn a few things and draw some conclusions.

A Data-based Analysis of the CSS Standards Approval Process

on | 5 Comments

CSS LetterI recently did a complete overhaul of my CSS Values info-app. The design is basically the same, with some minor adjustments. But the website is now using a MySQL database to store all the info (as opposed to throwing everything into plain HTML) and it now includes browser support charts for every CSS property.

Much of the info is probably in need of improvement, but there’s something significant I noticed when transferring the data from the HTML to the database. It turns out, a certain bias exists with the types of properties that the W3C has approved, and I think we can use this information to speed up the standards process in the future.

There’s No Such Thing as a “Standards-Compliant” Browser

There's No Such Thing as a Standards-Compliant BrowserI think this is a pretty basic point, but I often see people throwing terms around in inappropriate ways (which I’ve also been guilty of), so I thought I would clear this up.

As fallible humans we tend to lean towards making excuses, blaming others, or trying to justify our mistakes or shortcomings. This is why you’ll often read comments from people discussing CSS and web standards, and they’ll say “I don’t use Internet Explorer; I use a standards-compliant browser”. Well, no you don’t. Nobody does.

Don’t Use PHP for Browser Detection (for CSS)

Don't Use PHP for Browser DetectionIn the comments of a recent article discussing conditional comments someone mentioned that they prefer to use PHP to detect which browser (user agent) and/or operating system is in use, then they display a custom class for the <body> tag and target the browser accordingly in their CSS.

I’ve known for some time now that this is wrong. I was told that a user agent can be faked, so the people I’ve worked with discouraged this method, and I’ve never used it.

In no way am I an expert in this particular area, so I’m not claiming here to be able to fully explain exactly why we shouldn’t do this, but a little bit of quick research on this topic shows that server-side browser detection is not a good idea.

I’m not going to drag each of these points on (mostly because I don’t have the technical expertise in this area), but instead I’m just going to provide brief quotes and links that discourage the use of this method and provide further insight into the matter.

Things You Might Not Know About Conditional Comments

Things You Might Not Know About Conditional CommentsUse of conditional comments to target certain versions of Internet Explorer is pretty commonplace nowadays, and is generally seen as the best-practice method for including separate styles for IE.

Of course, I’ve argued in a previous article that if your IE-only styles are minimal, then you should just include them in your main stylesheet, a notion that others have echoed.

But conditional comments have some unique possibilities and quirks that maybe you haven’t considered before, or have simply forgotten. Here is an overview of some things you may not know about conditional comments.

IE-only Styles: Where Should They Be Placed?

IE-only Styles — Where Should They Be Placed?Dealing with Internet Explorer is a fact of web design, and it isn’t going to go away anytime soon.

If not for some of the differences in the way IE6 and IE7 handle certain areas of CSS (whether it be margins bugs, float bugs, or other problems), CSS development would be so much easier.

Of course, as I’ve said in past articles on this website and others, I believe IE-only styles can be kept to a bare minimum, and in some cases you may not need any, but it’s unlikely that developers will end up so fortunate. So how do you divide your IE-only CSS styles? The options we have are as follows:

Coding for IE6 = Progressive Enhancement

Coding for IE6 = Progressive EnhancementIt was disappointing to see the unwarranted uproar that occurred in the comments of my article on Smashing Magazine on cross-browser CSS. But in retrospect, it was probably a good thing, because a more important (but related) issue was brought to light in the discussion.

At this stage in modern web design, all front-end coders should at least be familiar with (if not very capable of implementing into their projects) the concept of progressive enhancement. In most cases, we tend to associate progressive enhancement with JavaScript and CSS, and rightfully so, because those technologies help us layer our functionality in a way that makes a website accessible to as many people as possible.

But progressive enhancement isn’t just limited to what we accomplish with fancy Ajax, jQuery, and CSS3 — that’s just part of it (albeit a very significant part). I would like to take the Wikipedia definition of progressive enhancement just a little bit further. Here is the definition:

Will EOT Become the Standard for Font Embedding?

on | 5 Comments

Will EOT Become the Standard for Font Embedding?If you’re at all familiar with the various methods in use today to embed custom fonts in web pages (sIFR, Cufon, @font-face, etc), then you also may have heard of a font format called EOT. Well, if Microsoft has it their way, EOT will become the standard, allowing web developers — with permission from font vendors — to be free to use virtually any font in a text-friendly manner in their web pages.

So what is EOT, and how has Microsoft pushed to standardize this method? Embedded OpenType fonts are compact OpenType fonts designed by Microsoft for use as embedded web fonts. They are recognizable by their “.eot” file extension. By means of data compression and removal of superfluous data, EOT files are made small in size and include features that protect the fonts themselves from being copied and used in unauthorized ways.