{"id":2263,"date":"2011-04-03T19:14:35","date_gmt":"2011-04-03T19:14:35","guid":{"rendered":"http:\/\/sunpig.com\/mt-entry-2263.html"},"modified":"2012-03-27T14:34:16","modified_gmt":"2012-03-27T14:34:16","slug":"css-21-is-the-new-hotness","status":"publish","type":"post","link":"https:\/\/sunpig.com\/martin\/2011\/04\/03\/css-21-is-the-new-hotness\/","title":{"rendered":"CSS 2.1 is the new hotness"},"content":{"rendered":"

Forget for a moment about border-radius<\/code>, box-shadow<\/code>, and all the other funky CSS3 properties you can use in modern browsers. The (slow) death of IE6<\/a> is causing a quiet revolution at the other<\/em> end of the browser spectrum.<\/p>\n

IE6 does not natively understand many significant features of CSS2.1, such as the child (><\/code>), adjacent sibling (+<\/code>), and attribute ([attr]<\/code>) selectors. Because of this, many web developers (myself included) often ignore them, and work with a more highly-compatible subset of CSS. But if you have the luxury of ignoring IE6–and unfortunately it is<\/em> still a luxury–then all of these cool features (and more!) suddenly come into play, and they can make your code a lot<\/em> cleaner.<\/p>\n

My favourite illustration of CSS2.1 hotness is nested modules<\/strong>. Here’s some typical HTML:<\/p>\n

<div class=\"mod mod-blog\">\n  <div class=\"hd\">My awesome blog<\/div>\n    <div class=\"bd\">\n    ...\n      <div class=\"mod mod-blogentry\">\n      <div class=\"hd\">My awesome breakfast<\/div>\n      <div class=\"bd\">\n        ...\n      <\/div>\n      <div class=\"ft\"><\/div>\n    <\/div>\n  ...\n  <\/div>\n  <div class=\"ft\"><\/div>\n<\/div><\/code><\/pre>\n
If you use a descendant selector to style the .hd<\/code> of the outer module, you have to be careful to override any styles for the .hd<\/code> of the inner module, otherwise the outer styles will apply to it, too:<\/p>\n
.mod-blog .hd {\n  font-size:167%;\n  font-weight:bold;\n}\n\n.mod-blogentry .hd {\n  font-size:100%;\n  font-weight:normal;\n}<\/code><\/pre>\n
Alternatively, you end up decorating the .hd<\/code> element with additional classnames so that you can target the elements more specifically in your CSS (e.g. <div class=\".hd .hd-blog\"><\/code>).<\/p>\n
By using child a child selector, you can be much more specific in which elements you target. In this example, you can ensure that the “big and bold” style only gets applied to the header of the outer<\/em> module by using the child selector:<\/p>\n
.mod-blog > .hd {\n  font-size:167%;\n  font-weight:bold;\n}<\/code><\/pre>\n
And boom, your code is a lot cleaner, and your modules can be coded in a much more modular style–without having to worry quite so much about nesting issues and inherited rules.<\/p>\n
Of course, even if you do<\/em> have to support IE6, there is nothing to stop you from using these selectors anyway.  You can use a polyfill like Selectivizr<\/a> to implement the missing support in IE, or you can provide IE6-specific overrides in a separate stylesheet, like so:<\/p>\n
.ie6 .mod-blogentry .hd {\n  font-size:100%;\n  font-weight:normal;\n}<\/code><\/pre>\n
I don’t recommend doing this, though, because IE6 is already the slowest mainstream browser on the block. Adding additional cruft is just going to make it even slower, and give your site’s visitors an even worse experience than they already have.<\/p>\n
But seriously: if you’ve been drooling over rounded corners and gradients without background images, you owe it to yourself to remind yourself of these older features as well. You’ll be very pleasantly surprised by what you can do with them.<\/p>\n
Further reading<\/h2>\n