Using Modernizer and CSS3 Cake to Make ALL your own Websites CSS3 Ready

This article is about how precisely to use the wonderful code by Jason Johnston called CSS3 Pie, and the Modernizer 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 rule, but since we are all painfully aware of IE’s shortfalls previously, why don’t just be thankful that IE9 is shaping up to be a quite 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 disregard. Additionally, ie9 is just available to Vista and Windows 7 users, while XP users still make up about 50% of Operating Program market share. What this means is 50% of IE users (around 25% of the general internet browser market share) are not able to upgrade to IE9. I have a expectation that this will cause IE9’s growth to come about much slower than previous internet explorer releases, and so you will have to deal with this 25-40% of the market share appropriately (and no, surging 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 internet browsers, leaving a much less spectacular 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, from the box, in much the same way I would be using them in a perfect world where all internet browsers rendered each page flawlessly. I wanted to be able to just write code, as it was taught in my experience, in the way that the w3c recommends, with as little messy, non-standard, hacky markup as you can.

Enter CSS3 CAKE. CSS3 PIE utilizes the behaviour() property implemented in Internet Explorer’s version of css to let you implement CSS3 properties in your lessons without using messy images, additional stylesheets or external js files. The following is an example:

#divname
border-radius: 10px;
behavior: url(../css/PIE.htc);

Note* – make sure your path to the PIE. htc file is family member to the HTML record that calls the css file, not the web page 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 documents, and as a reward, only IE renders the “behaviour: ” tag; so other browsers will miss 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 downside. IE9 users will also need to download the PIE. the new htc file (about 30kb).
We’re able to 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. Just in case you ever want to change this style in the future, you might have a hard time navigating all of these disparate courses if you have a sizable 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, however the file is less than 3 kilobytes gzipped either way).

Basically load the modernizr. js script into your web page as well as its ready, no JS coding needed:

Modernizr, if you are not knowledgeable about it, detects support for the majority of CSS3 features, and automatically adds classes to your tag based on whether those features are present or not. Instance:

Code:

The result is simple: a chance to do if statements in your web page 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:

Computer code:

#divname
border-radius: 10px;
. no-borderradius #divname
border-radius: 10px;
behavior: url(../css/PIE.htc);

The 2nd class only influences (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 personally, the biggest relief is having my internet manager styles right next to their modern browser alternatives. To me this is a beautiful solution that is much more stylish than using separate stylesheets called from your code file. Additionally, it follows the principles of structure, demonstration and behaviour better than other solutions. Your js files will still be used for behaviour (ofcourse not to replace lacking demonstration capabilies in older browsers). Your html will contain more markup and less IE conditionals, along with your css is now all collectively in one place and easier to navigate.

Another nice thing about Modernizr is that if the browser will not support an attribute, it will apply the alternate class whatever browser it is (as opposed to conditional comments for FOR EXAMPLE, which only help FOR EXAMPLE users with lacking browsers). Within the off chance that your user is using Firefox 1, she or he will also benefit from your alternate styles.

Share it with your friends

Facebook

Twitter

Linkedin