This article is about how to use the wonderful code by Jason Johnston called CSS3 Pie, and the Modernizr JS library (Faruk Ates, Paul Irish and Alex Sexton) to implement CSS3 features such as border-radius, box-shadow, border-image and multiple background images, without adding any additional overhead to those who are using modern CSS3-capable browsers.
Okay, I would start this article with your typical bash-internet-explorer mantra, but since we are all painfully aware of IE's shortfalls in the past, let's just be thankful that IE9 is shaping up to be a pretty good release and move on.
One thing that we can't move on from (yet), however, is the fact that (as of this article writing) 40-50% of internet users still use IE8 or less. This is simply too large of a market for us to ignore. Additionally, ie9 is only available to Vista and Windows 7 users, while XP users still make up about 50% of Operating System market share. This means 50% of IE users (around 25% of the overall browser market share) will not be able to upgrade to IE9. I have a hunch that this will cause IE9's growth to come about much slower than previous internet explorer releases, and so we will have to deal with this 25-40% of the market share appropriately (and no, flooding them with pop-ups 'encouraging' them to upgrade is usually not an appropriate solution).
We could, as many do, simply build our sites and use CSS3 features to enhance and upgrade the experience for those using modern browsers, leaving a much plainer site for IE users to enjoy.
We could also use images or javascript libraries to implement those nifty new CSS3 features.
These solutions were not good enough for me.
I wanted to be able to use CSS3 features today, out of the box, in much the same way I would be using them in a perfect world where all browsers rendered each page perfectly. I wanted to be able to just write code, as it was taught to me, in the way that the w3c recommends, with as little messy, non-standard, hacky markup as possible.
Enter CSS3 PIE. CSS3 PIE utilizes the behaviour() property implemented in Internet Explorer's version of css to allow you to implement CSS3 properties in your classes without using messy images, additional stylesheets or external js files. Here is an example:
#divname{
border-radius: 10px;
behavior: url(../css/PIE.htc);
}
Note* - make sure your path to the PIE.htc file is relative to the HTML file that calls the css file, not the css file itself!
Simply add the pie.htc file (link below) to your css folder and you are set. Only one extra line of markup in your css files, and as a bonus, only IE renders the "behaviour:" tag; so other browsers will skip over it and your users using modern browsers will not experience any additional download overhead.
This by itself is a pretty good solution to our problem. But there is one drawback. IE9 users will also have to download the PIE.htc file (about 30kb).
We could fix this utilizing a conditional stylesheet:
But to me, this is a messy solution. It requires extra code that is far far away from your standard styles. In case you ever want to change this style in the future, you may have a hard time navigating all of these disparate classes if you have a large site.
Enter Modernizr.
Modernizr is a great solution to this problem (it is especially nifty if you have already loaded the library for other purposes, but the file is less than 3 kb gzipped either way).
Simply load the modernizr.js script into your web page and its ready, no JS coding needed:
Modernizr, if you are not familiar with it, detects support for most CSS3 features, and automatically adds classes to your tag based on whether those features are present or not. Example:
Code:
The result is simple: the ability to do if statements in your css based on naming conventions, for example:
Code:.multiplebgs div {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div {
/*properties
for browsers that don't */
}
So, with CSS3 pie, it would look something like this:
Code:#divname
{
border-radius: 10px;
}
.no-borderradius #divname
{
border-radius: 10px;
behavior: url(../css/PIE.htc);
}
The second class only affects (and therefore only loads the htc file) for users who do not have the border-radius feature available in their browser.
The advantages of this are numerous. For me, the biggest relief is having my internet explorer styles right next to their modern browser counterparts. To me this is a beautiful solution that is much more elegant than using separate stylesheets called from your html file. It also follows the principles of structure, presentation and behaviour a little bit better than other solutions. Your js files will still be used for behaviour (not to make up for lacking presentation capabilies in older browsers). Your html will contain more markup and less IE conditionals, and your css is now all together in one place and easier to navigate.
Another nice thing about Modernizr is that if the browser does not support a feature, it will apply the alternate class no matter what browser it is (as opposed to conditional comments for IE, which only help IE users with lacking browsers). On the off chance that your user is using Firefox 1, he or she will also benefit from your alternate styles.
My question when I started this quest was whether or not a browser will load a file into cache for css classes that are NOT used in your html file. For example, a class (like our.no-borderradius #divname class) that is declared but not called into use for that page.
It turns out (thankfully) that the answer is no. (see http://stackoverflow.com/questions/1299478/does-every-image-in-a-css-file-load-when-the-file-is-loaded). The htc file will not be loaded into cache unless (in this case) the border-radius feature does not exist for that browser. I did some additional testing with IE developer tools to confirm this, and, indeed, the HTC file is not loaded unless that class is specifically called into use.
So, this should be a useful solution to many out there, and it only adds an additional overhead of about 3 kb. Modernizr can then also be used as a very convenient (and cross browser) alternative to other methods of accounting for browsers with lacking capabilities.
CSS3 PIE found at http://www.CSS3pie.com
No comments:
Post a Comment