Browser Wars & the W3C Standards, Part III

The :before and :after Pseudo-elements

Mozilla

IE 6

Opera 6

CSS provides several pseudo-elements for setting very specific but common rulesets. :before & :after are used to insert content at the beginning and / or end of an element. As an example, sometimes I want to place double-quotes before and after text within the cite tag so I've defined the following rulesets:

.quoted:lang(en) { 
   quotes: '"' '"' "'" "'";
}
.quoted:before {
   content: open-quote;
}
.quoted:after {
   content: close-quote;
}

I'm using this class in various places including the next-to-last paragraph of the intro page that quotes an episode of The Simpsons as follows:

<cite class="quoted">Ok, boys, buy 'im out</cite>

The images on this page show how three of the browsers render the text. Notice that IE 6 fails to place the double-quotes around the phrase while Mozilla and Opera both do. Now, also notice that the phrase is rendered in italics by both IE and Opera but not by Mozilla. What's up with that? Well, taking a look at the stylesheet you'll also find:

.quoted { 
   font-style: inherit;
}

The inherit value specifies that the font style should be the same as that of the element that contains it. Now, I'm not sure which browser is rendering things correctly, but I have a feeling that because I've applied the class to cite, I'm in fact overriding its default behavior (which is to render text in italics). inherit then says that text should only be rendered in italics if the cite block itself is within an element (the paragraph, in this case) that sets the font style to italic. If that's the case, then only Mozilla appears to be rendering it correctly (but hey, I've been wrong before).

I didn't place a snapshot for Netscape 4.x because, well, it just completely ignores the rules just as IE does and, if you haven't caught on, the moral of the story (up to this point) is: stop using Netscape 4.x.

And, sure, these are minor things so let's move on to other stuff then.