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 only 8 kb either way).
Modernizr, if you are not familiar with it, detects support for most css3 features, and automatically adds classes to your <html> tag based on whether those features are present or not. (example:
Code:
<html class="csscolumns borderradius">
)
The result is simple: the ability to do if statements in your css based on naming conventions, example:
Code:
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
So, for 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.
My question when I started this post was whether or not a browser will load a file into cache for css classes that are NOT used in your html file. 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 in the html file.
So, this should be a useful solution to many out there, and it only adds an additional overhead of about 8 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. The 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). And it does not require a separate css file, simply a separate class for each modern feature that you want to use.
------
joe edgar
http://www.myhatwebstudio.com
Forums
