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!


Resource: Interactiveblend

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA