CSS3 is cool and all web developers would love to use it’s tasty features. The announced support for CSS3 by such browsers as Opera, Firefox, Safari, Chrome and even IE 9 heats up the interest for this protocol quite a bit, but there’s still an issue of IE 6, 7 and 8. The fact that IE 9 is not intended to run on XP will probably keep the number of IE 6-8 users high for quite a while. This is where our discussion of CSS3 could end. And yet there are efforts to make IE6-8 CSS3 compliant. Let’s take a look at some of them, many are rather odd.
This IE plugin renders pages with the Chrome engine. Among the drawbacks is the need to install the plugin. People who use IE do not want to / are afraid to / cannot install anything.
The fact that the plugin is being used makes one think – perhaps the answer is in using something to render the page instead of IE. It makes little sense to try and build such a solution from scratch, but hey, there are some solutions out there already.
Like an html renderer written in Flash: HTMLWrapper. It renders HTML and CSS through Actionscript with Flash goodies like gradients, animation, audio, video, etc. There’s also the AS3 HTML Parser Library and DENG. There are even SVG HTML renderers and enven a Javascript renderer for Javascript (talk about odd).
All of the above seems rather hard core, below are some examples of slightly more elegant solutions.
One could use different hacks like the advice from the Smashing Magazine though this solution is hardly convenient or pretty.
A systematic solution is needed and it exists: jQuery to the rescue!
This wonderful jQuery plugin lets you replace the following javascript:
$(‘.gallery a’).lightbox({overlayBgColor: ‘#ddd’});
with the following CSS:
.gallery a {
-jquery-lightbox: {overlayBgColor: ‘#ddd’};
}
There are plenty of plugins that emulate CSS3 in jQuery:
border-radius
jQuery Canvas Rounded Corners
jQuery Corners
border-image
borderImage
Multiple Backgrounds
Background Layers
and so on…
There are caveats, however. Most of these emulators are rather raw and only work well on the demos on their home pages. Those that work well will turn the web page into a mess if used together. Try applying the border-radius and Multiple Background to the same block.
Perhaps your project could benefit from writing your own library that emulates CSS3.
Oh yeah, all of the proposed solutions will slow IE6-8 down. This makes sense, let them suffer for not switching.