With all of this talk lately about CSS3 and how amazing the Web will be once it gains wide browser support, it got me thinking about how well CSS2 is supported. Sadly, there are still a lot of really cool features that were introduced in the CSS2 spec that we can’t use yet, thanks to the overwhelming market share held by Internet Explorer 6 and 7.
In this article, I’ll take a quick look at some under-used CSS2 features and examine whether or not they are supported in IE7.
Before and After Pseudo-Elements
CSS2 introduced the idea of the :before and :after pseudo-elements. Essentially, these pseudo-elements were created to allow you to insert non-semantic content into your pages with pure CSS. In some instances, people use these classes to insert images or bullets before or after HTML elements. In other cases, they’re used for things like adding quotes before and after your <blockquote> or <quote> elements. Some coders are even using these pseudo-classes to add indicators to their links, letting visitors know when a link leads to an external resource, a PDF file, etc.
Sadly, these two pseudo-elements are not supported by IE7, so there’s not much point in trying to use these widely.
First-___ Pseudo-Classes and Pseudo-Elements
Another cool feature (expanded quite a bit with CSS3) are the :first-child pseudo-class and the :first-line and :first-letter pseudo-elements.
The :first-child pseudo-class allows you to locate the first child element of a DOM element and style it differently than the rest of the same type of elements. Be aware that this pseudo-class only searches for the first child, not the first matching child. Therefore, if you were to use the following HTML, you could use body h1:first-child to find the <h1> element, but using p:first-child would have no effect, since the <p> element is not the first child of anything in the page.
<body>
<h1>Test Header One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus neque, porta aliquam congue scelerisque, tristique et risus. Etiam placerat scelerisque leo in hendrerit. In at risus sed purus malesuada vulputate. Nullam gravida magna malesuada nisi convallis eget egestas nulla iaculis. <q>Vivamus id nulla turpis.</q> Cras vitae ante a eros semper imperdiet. Aenean posuere eros eu felis convallis ultricies non at nibh. Fusce pharetra augue eu lorem feugiat accumsan. Proin odio nisl, interdum eget auctor sed, tristique et libero. Duis risus elit, viverra et facilisis id, euismod quis lectus. Praesent lobortis adipiscing mi, nec mollis diam cursus eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec varius, ante sed dapibus vehicula, mi ipsum ultrices ante, vel sodales dolor turpis et risus. Donec felis lectus, rhoncus quis suscipit sit amet, elementum vel ante. Maecenas nec rutrum risus. Maecenas interdum tristique massa, vel elementum nisl posuere ut. Donec quis lectus diam. Sed id tortor massa, nec eleifend sem.</p>
</body>
The :first-letter and :first-line pseudo-elements will search for the first character and the first full line of the DOM elements, respectively. For instance, if you were to use the HTML code above and use the CSS shown below, the first letter of the paragraph would be 50px and red, while the rest of the first full line would be blue.
p:first-letter { font-size: 50px; color: #f00; }
p:first-line { color: #00f; }
All three of these CSS properties are fully supported in Internet Explorer 7, so it’s probably safe to use them on your current websites. However, just as an FYI, if you use the :first-letter pseudo-element in conjunction with the :before pseudo-element mentioned above, any browser that supports the :before pseudo-element will include the content added by the :before pseudo-element (so, if you use text in the :before pseudo-element, the first letter of that text will be styled by :first-letter and :first-line elements; if you use an image for the content of your :before element, no styles will be applied at all).
Attribute Selectors
CSS2 also introduced the idea of finding DOM elements based on specific HTML/XML attributes. For instance, if you use the HTML tag <p rel="excerpt">, you can use the following CSS to style that paragraph.
p[rel] { color: #666; } /* will style all paragraph elements in which the "rel" attribute is specified */
p[rel="excerpt"] { color: #666; } /* will only style paragraph elements in which the "rel" attribute is specified and the value of that attribute is set to "excerpt" */
In addition to the two methods shown above, you can also precede the equal sign (=) with a tilde (~) to find a specific word within a space-separated list of words in the value of the specified attribute (contains) or you can precede the equal sign with a bar (|) to find any elements where the attribute value exactly equals the characters you specified or starts with those characters, followed immediately by a hyphen (-).
These can be helpful for things like styling excerpts differently than the rest of an article (though, the semantics of using the rel attribute versus using a CSS class is a debate for a different day), styling external links differently than internal links and more.
These CSS2 properties also appear to be fully supported in IE7, so it’s probably safe to use them, as well.
Child and Sibling Selectors
These are two of my favorite things introduced by CSS2. Using the child selector (a simple right angle bracket/greater than symbol), you can specify that you only want DOM elements that are direct descendants of the specified parent to use the style you define. For instance, if you create a nested set of HTML lists, interchanging unordered lists and ordered lists throughout, it can be difficult to style them properly without these child selectors. Take a look at the two CSS examples shown below and note the differences.
ul li { list-style: disc; }
ul ul li { list-style: circle; }
ol li { list-style: decimal; }
ul>li { list-style: disc; }
ul ul>li { list-style: circle; }
ol>li { list-style: decimal; }
The first two lines of CSS will probably not have the effect you’d expect. Let’s take a look at the example HTML:
<ul>
<li>Disc?
<ol>
<li>Decimal?
<ul>
<li>Circle?</li>
<li>Circle?</li>
<li>Circle?<ol>
<li>Decimal?</li>
<li>
Decimal?
<ol>
<li>Circle? Disc? Decimal?</li>
</ol>
</li>
</ol></li>
</ul>
</li>
<li>Decimal?
<ul>
<li>Circle?</li>
<li>Circle?</li>
<li>Circle?</li>
</ul>
</li>
</ol>
</li>
<li>Disc?
<ol>
<li>Decimal?</li>
<li>Decimal?</li>
</ol>
</li>
</ul>
Using the first block of CSS shown above, you would probably expect your first level of unordered list items to have a disc bullet and your second level of unordered list items to have a circle bullet; while you’d probably expect your first, second and third levels of ordered list items to use incrementing decimal numbers as bullets.
However, your second and third levels of ordered list items will actually have a circle bullet, because they are li elements inside of second-level ul elements (as specified by the ul ul li selector).
If you use the second block of CSS, though, you will get exactly what you expect. The child selector makes the CSS selectors more specific, causing them to only interact with the li items that are direct descendants of the ol or ul element specified.
The sibling selector is represented by a simple plus sign (+). This selector works similarly to the way the child selector works, but instead of selecting direct descendants, it selects direct siblings. For instance, if you were to create an HTML table, and you wanted to style the first column differently from the other columns, you could use the following CSS to do so.
td { background: #ff0; text-align: right; font-weight: bold; }
td+td { background: #f00; text-align: left; font-weight: normal; }
The CSS above will cause the first column of the table to have a yellow background with right-aligned, bold text. The rest of the columns in the table will have a red background with left-aligned normal-weight text.
These two selectors are fully supported in IE7, as well.
Conclusion
While there are still a handful of CSS2 items that aren’t implemented in IE7, most of them have been, and can be extremely useful for creating more specific and targeted CSS definitions. Therefore, I would say absolutely (with the exception of the :before and :after pseudo-elements, unfortunately) we can and should be using CSS2 within our websites.
One Response
Great article! The point of how it takes so long for advancements in CSS to be implemented in all browsers is a real fact as well. The problem could be that CSS does not have the ability to hold the internet hostage like PHP or JavaScript does. CSS has the ability to improve our user experience. It is a shame that browsers can’t seem to keep up.