Putting it all together…
I hope this helped you find a way to start using CSS3 today everywhere you need it.
I’ve written a couple pretty extensive posts on this subject that will dig a little deeper into some aspects:
- Cross-Browser CSS3 (yes, even in IE6 and IE7),
with a Little Help from MS Filters - What’s the Best Way to… Use CSS3 Today
There are a TON of JS solutions out there and I chose not to investigate them all. Again, my first goal is to stay as close to the spec as possible, and second goal is to stay as light as possible. If it can be done without JS, I think it probably should be done without JS.
The obvious deviations from that statement are the use of:
- Modernizr, which does not actually “modernize” anything, but provides feature-detection hooks onto which you can hang CSS and JS,
- CSS3 PIE, which uses an HTC file that, once downloaded and cached by the browser, can be used to fix multiple issues, and
- eCSStender, which I hope to see grow and become more feature-rich and more stable, and, once the core JS is downloaded and cached by the browser, breaks feature corrections into modules.
And some of you may note that I did not reference Dean Edwards’ IE7/8/9 JS anywhere. Dean’s scripts do in fact enhance older versions of IE, but he mostly focuses on selectors and such, which is awesome, and if you need things like parent > child, .multiple.classes, :first-child, etc., (full list of features), you should definitely check that out too!
Here are several other (hopefully) useful resources…
Inspiration:
- http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
- Covers a lot of what I cover here, but has a few other twists, well worth the read.
- http://blancer.com/tutorials/wp/15301/10-ways-to-make-internet-explorer-act-like-a-modern-browser/
- Another tutorial on methods for dragging IE into the modern era, this features more third-party solutions, like JS and jQuery plug-ins.
- https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
- Fixes, fixes, and more fixes, tons of applications, for everything from HTML5 to CSS3… Dig in with two spoons!
- http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/
- A good primer on transitions and transforms, covering all the vendor prefixes.
So, who has what?
- http://html5readiness.com/
- Great visual aid displaying which browsers support which HTML5 and CSS3 features.
- http://caniuse.com/
- An interactive table or index of features and who supports them.
- http://www.quirksmode.org/
- The ultimate source of knowledge when it comes to browser compatibility.
- http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/
- Great Smashing Magazine article about which version of IE can do what (IE7 added a LOT more than I thought it did…)
- http://articles.sitepoint.com/article/whats-new-in-ie9
- A good, if not a bit dated, article from SitePoint regarding new features in IE9.
- http://www.beautyoftheweb.com/
- IE9’s page (quite the pompous URL, but okay). Want to see the real “beauty of the web”? View the source, scroll to the end of the doc, and count the
<script>elements… I’ll save you the trouble: 33… :-) At least they’re at the end of the doc, right? - http://ie.microsoft.com/testdrive/
- Demos and test to explore IE9 (need to have IE9 installed, which also requires Win7…).
And how do I create all these crazy CSS3 declarations?
- http://www.colorzilla.com/gradient-editor/
- AWESOME gradient generator! Includes all vendor prefixes and filters (though not -ms-filter, it is easy enough to copy filter and alter).
And, ah, try clicking just below the Stops slider… one click and new Stop created… just like that… nice. - http://css3generator.com/
- Very easy to grasp CSS generator, gives you all the vendor-specific and the web-standards CSS all at once, along with an occasional IE Filter (though not all you could use).
- http://www.css3maker.com/
- Note that you can use either the drop-down or top-menu. Gives you all the vendor-specific and the web-standards CSS all at once, but does lack IE Filters.
- http://css3please.com/
- Best looking generator of the bunch, allows you to edit and see the results, but ignores a few IE Filters.
- http://gradients.glrzad.com/
- A little more difficult (for me) to grasp at first (scroll down to see the tool).
- http://westciv.com/tools/
- A lot of great tools, really only focuses on -webkit and -moz, though.
Leave a Reply