The title of this post is meant to be taken tongue-in-cheek, meaning I do not believe there are many best anythings in this world. I do not believe in many black and white options; instead I believe most options are shades of gray. Some options are good for some situations, but do not make sense for others. Such is life. We must think, we must decide.
As such, below I will look into several options we developers have to use CSS3 today.
Let’s start by looking at what I think are the three main “philosophies” regarding the use of CSS3 today:
- When I can do it in all browsers, I’ll do it
This philosophy will likely not fly well with your design department… They go through a lot of work to make those rounded corners and background gradients, and they are going to want to see those effects applied to their pages. Besides, you don’t want to be that kind of developer, do you? Not when you can do better…
- If some browser doesn’t understand it, too bad
This one isn’t that different, unless you’re developing for a specific device, like an iThing, where all you have to worry about is a really recent version of Safari. Business has gotten used to all their pages looking (pretty much) the same in all browsers, and are likely to continue to expect that.
- I want to use CSS3, but what are my options?
Now we’re talking! And luckily for you, there are a LOT of options! But even within this philosophy, there are still multiple scenarios that might make some options better for one situation than another. So, if you’re still with me, let’s get busy.
The options that I will be looking at are:
Before we get too deeply into a ton of advanced options, let’s quickly look at a pure CSS approach that works perfectly well for a small set of CSS needs.
I recently wrote a rather lengthy post, Cross-Browser CSS3 (yes, even in IE6 and IE7), with a Little Help from MS Filters, that shows how to implement several CSS3 features using nothing but CSS. Imagine. :-)
The set of features is rather short, but it is nothing but CSS, all perfectly legal, no JS required.
Here are a few other pure CSS resources:
Now on to some beefier approaches…
One of the original attempts at making older browsers conform to modern CSS standards came way back when we wanted older versions of IE to behave as well as IE7! Yes, kids, there was such a time, very dark days indeed…
And Dean Edwards wrote his library to check if the browser needed help, then did what he needed to do to help it understand modern CSS (things like parent/child and sibling indicators, pseudo-class, etc.). He later updated IE7.js to match IE8, and now IE9. You can see a full list of features for each version on his test page.
Pros:
- Allows developers to build for modern browsers, using modern techniques.
- Stop wasting time back-coding/fixing/hacking for older browsers.
Cons:
- Additional download weight, varies by version (each version adds new corrections, so they get bigger as they get better): IE7 is 32.1kb, IE8 is 36.6kb, and IE9 is 40.5kb.
- This is a JavaScript fix, so if JavaScript is disabled, the user will not get the enhancements.
- If you place the script at the bottom of your page, users will see an “uncorrected” page first, then the fixes will pop into place as the script runs; if you place it in the
<head> of your page, you will have to wait for the script to download and run before your page can continue to load.
When is it best?
This is really good for fixing things like float issues and old IE bugs, but I find I can usually fix those fairly easily with careful HTML and CSS planning (and maybe a couple small hacks). The one-time, fix-it-all approach could be nice, but to me it is sort of like killing a fly with a nuclear bomb, in that it fixes things that might not need to be fixed (if the current page doesn’t use rounded corners, there’s no sense having the JS do that work, yet it does). I personally don’t think I would ever use this on a client site. Between the additional weight, the reliance on JS, and the additional work the browser has to do, I think this is overkill. I personally prefer some of the other methods below, but wanted to cover it here, in case your situation differs.
Back to Options
Next up is Modernizr, by Faruk Ates and Paul Irish.
Modernizr takes a slightly different approach. Rather than trying to fix everything that is wrong with an older browser, it runs a series of feature-detection checks against the user’s browser and adds boolean-style classes to the <html> tag to indicate whether the browser supports certain features or not, like this:
<html class=" js borderradius no-geolocation...">
Meaning, js is enabled, border-radius is supported, but geo-location is not.
With this information, you can write feature-specific CSS, such as:
.borderradius div {
/* CSS if browser supports border-radius */
}
.no-geolocation div {
/* CSS if browser doesn't support geolocation */
}
Of course, you can also write feature-specific JS, determining whether or not to add a widget, for example.
You can see the full list of features that are checked, as well as see the <html> classes it attaches, on the Modernizr site.
Pros:
- Additional weight is marginal: 5kb GZipped (27kb unzipped).
- Runs fast, minimal intrusion on page-load.
- Allows you to check for features, not browsers, which is far more specific.
- Apply alternatives for modern features with pinpoint precision.
Cons:
- This is a JavaScript fix, so if JavaScript is disabled, the user will not get the enhancements.
- Must be at the top of the page, so does require browsers to download and run before the page can continue loading.
When is it best?
With the way new CSS3 effects are being added to browsers seemingly daily, this is a really good approach, especially if you are only using select effects. It allows you to write specific lines of CSS to affect the “haves” (.rgba article{background:rgba(255,0,0,.5);}) and other lines for the “have-nots” (.no-rgba article{background:url('background-image.png');}).
Back to Options
* Note: I have yet to be able to get this one working on any version of IE, but felt it is such a strong concept, it is worth adding here.
A fairly new kid on the block, from none other than Aaron Gustafson, is eCSStender (pronounced “extender”). Taking sort of a hybrid approach, somewhere between DEIE9 and Modernizr, eCSStender offers a series of eCSStensions (:-) that developers can include in their pages and fix older browsers for modern features.
For example, the CSS3-color extension adds RGB/RGBa, HSL/HSLa, and opacity support back to IE6 (obviously only for browsers that need it).
But beyond just correcting older browsers to handle newer features, developers can also write extensions that take the browsers beyond CSS3, into new features that don’t exist anywhere yet!
Pros:
- Core JS is under 16kb, minified.
- Modular, so users only need to download the extensions they need for each page.
- Additional weight depends on the extensions your page/site needs.
- Checks for feature-support and fixes what needs to be fixed (and only what needs to be fixed).
Cons:
- Still kind of new, so the list of extensions is not very large (but the ones that are there, are powerful!).
- Though this only fixes things that need to be fixed, users still have to download the code, and it still has to run on all browsers to determine what needs to be fixed and what doesn’t.
- This is a JavaScript fix, so if JavaScript is disabled, the user will not get the enhancements.
- If you place the script at the bottom of your page, users will see an “uncorrected” page first, then the fixes will pop into place as the script runs; if you place it in the
<head> of your page, you will have to wait for the script to download and run before your page can continue to load.
When is it best?
When you have only specific CSS3 effects that you want to use, an extension for that effect exists, and you don’t want to figure out how else to do it with straight CSS.
Back to Options
Who doesn’t like pie? Personally, I love apple, pumpkin, and my grandmother’s pecan. But in this article, we’re talking about PIE (as in, “Progressive Internet Explorer”).
Also taking the “fix-it” path, PIE relies not on JS to do the work, but on HTC (HTML Components), which is applied via a behavior, which makes it IE-only!
You apply PIE to an element via your CSS declaration (yes, it does have to be applied to each and every CSS element that needs it), thusly:
h1{behavior: url(PIE.htc); border-radius: 10px;}
IE will interpret the HTC behavior, then it will understand the border-radius. Seriously!
The demo on their home page is pretty cool, but remember that it only works in IE.
Pros:
- Only affects IE users.
- Users download one HTC file, used for all elements that need to be fixed.
- Can be used for a wide variety of CSS3 fixes.
Cons:
behavior does have to be in each and every CSS declaration to which it should be applied. That said, you could include all the behavior statements in an IE-only CSS file/block if you so chose.- Limited feature support, currently only
border-radius, box-shadow, and linear-gradient (but those are big ones!).
- A bit of a resource pig. If you have this run against too many elements on the page, it WILL kill your browser.
When is it best?
When you need only one of the above three CSS3 effects, in IE (regular CSS3 allows you to do all three of the above in all modern browsers). This is another really good precision method, applying just want you need, just where you need it, and when you need it.
Back to Options
From Keith Clarke comes this purely JS solution to CSS pseudo-selectors in IE6-8, IE-CSS3.
Include this in your page, ideally serving via IE conditional comments, and your CSS can now take advantage of such declarations as :not(), :enabled and :disabled.
Pros:
- At only 4.41kb, no one will notice this addition.
- Can easily target IE users only.
Cons:
- Minimal enhancements, but it does what it says, and that’s all it says it does.
- This is a JavaScript fix, so if JavaScript is disabled, the user will not get the enhancements.
- If you place the script at the bottom of your page, users will see an “uncorrected” page first, then the fixes will pop into place as the script runs; if you place it in the
<head> of your page, you will have to wait for the script to download and run before your page can continue to load.
When is it best?
When you only need to add the pseudo-selectors it covers. Again, no advanced decoration enhancements, just selectors.
Back to Options
Not to be overlooked, there are a host of jQuery plug-ins that assist with bits and pieces here and there. Hunt for what you need, and use just what you need.
Pros:
- Look for just the enhancements you need.
- Can easily target IE users only.
Cons:
- All are still a JavaScript fix, so if JavaScript is disabled, the user will not get the enhancements.
- If you place the script at the bottom of your page, users will see an “uncorrected” page first, then the fixes will pop into place as the script runs; if you place it in the
<head> of your page, you will have to wait for the script to download and run before your page can continue to load.
When is it best?
When you just need a piece of help, the right plug-in might be just what you need.
Back to Options
So, what really IS the best?
What would really be best, I think, would be something that ran in all browsers, detected which CSS effects were not supported, fixing those that need to be fixed, and translating all vendor-specific declarations into standard ones, so that I could just write:
border-radius:5px;
instead of having to write:
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
_background-image:url(...);
What would be great about this, is that, ideally, it would eventually become moot, as all browsers eventually adopt standard CSS. Now that would be best…
Happy CSS3ing,
Atg
