Cross-Browser Compatibility with CSS3
CSS3 is the latest version of the CSS specification developed by the W3C and includes many exciting features such as rounding corners, adding drop shadows and skewing/rotating elements. Don’t let old browsers hold you back from using the newest CSS3 properties on your websites. Many designers and developers are still creating websites for the primary browser – IE, but there are a lot of good resources out there to make your websites cross-browser compatible. Below are some great tools and tips to guide you along the way!
Border Radius
The CSS3 border-radius property allows web developers to easily utilize rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.
ie7-js
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
CSS3 Generator
CSS3 Generator helps you understand the new CSS3 features in Webkit with an interactive tool that will build up and show how each new property affects an element.
CSS 3.0 Maker
CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site.
CSS3 Pie
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
CSS3, Please!
The Cross-Browser CSS3 Rule Generator: You can edit the underlined values in this css file, but don’t worry about making sure the corresponding values match, that’s all done automagically for you.
The CSS Detective Guide
Tricks for Solving Tough CSS Mysteries! You may be a novice or well on your way to developing your skills in HTML and CSS, but if you’ve had the experience of thinking your CSS was perfect-up until the moment you test your pages in different browsers-then this book is for you.
cssSandpaper
The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. This script is not only useful for developers who want to support CSS3 in IE (which doesn’t support it in IE natively) but in other browsers which implement their own vendor-specific variants of these properties.
HTML5 & CSS3 Support
Rather than remember which browsers support which properties, visit this site.
HTML5 ? Boilerplate
HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.
After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.
Modernizr
Modernizr adds classes to the html element, which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any JavaScript to use it.
selectivizr
Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
Conclusion
Hopefully these tools give you the inspiration to get on the bandwagon to start using CSS3. These properties are being heavily supported in modern browsers, even in ie9, so start using them today!
25 Comments
Excellent resource kit! Big fan of the Boilerplate-Modernizr combo.
I’ve also tried Sketeton, any thoughts on that?
Thanks.
Boilerplate is a little bomb!
Excellent css3 resource. I’m sure I’ll use it somewhere.
Too bad IE doesn’t support most of this. >_<
I'm about to just add this block of html so I can use some of this.
This website doesn’t support Internet Explorer. Please use a different browser.
Hey tats fantastic tool i am searching for this info now i will use this for my work thanks for sharing
Awesome set of tools. I’ve tried out ie7.js and it’s very cool. Had CSS3 pie on my list of things to play with for a while now. Really will have to make a point of giving it a go!
And bookmarked the HTML5 & CSS3 Support reference site, that was really handy!
I’m torn on using HTML5 because sites totally fall apart in IE without JS enabled. I’m trying some of these so I can go ahead and use CSS3 though. Because if they’re using IE without JS, it might not be as pretty, but at least it’s still usable. I can live with that. I’m so ready for IE8 on down to DIE! In my day job 20% of our users still use IE6. Seriously??? I’m looking forward to seeing your new site!
hey Holli, I’m using some CSS3, but no HTML5 yet. I’m looking to use it once I redo this website though.
Great roundup! Really helpful! I’m trying to decide the best approach for a new project I’m working on and am considering using some HTML5/CSS3. It doesn’t look like you’re using any of these methods on your site. Is there a reason?