Menu
I am new to CSS3 concepts and am trying to understand the same.
I assume that the main benefits of using CSS3 is that it eliminates using images for doing stuff like gradients, rounded borders, etc
My question is if I want to support older browsers, say IE8, what are my options;
- Will it automatically fallback to some rendering on older borwsers (e.g. normal borders instead of rounded)
- Can I get the same effect on older IE browsers (e.g. rounded borders) using some other libraries ? (i.e. rounded borders or gradients on IE)
- In CSS3 examples, I see a lot of things or properties like -webkit, -moz, -o , etc What are these used for ? Is there any specific order that is required for these to have older IE fallback support ?
300
For implementing fallbacks on older browsers you would want to use feature detection library like Modernizr. It adds bunch of css classes to html element based on users client and its CSS3 support. e.g.
<html class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms ....
When it comes to implementation of fallbacks there are different techniques for each different case. Below are examples of fallbacks for background gradient using Modernizr:
/* 1px wide bg.png image with gradient stretched to div width */
.no-cssgradients div.header {
background: url(images/bg.png) repeat-x;
}
/*
IE-specific implementation
Uses filters supported only by IE browsers
*/
.no-cssgradients div.header {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
Next technique you can employ is detection of IE version by using conditional comments. You will have to add following code snipped on top of your index.html
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Now each specific version has it's own set of lt-* classes. Afterwards I create iefixes.css file where I put all nasty ie fixes. It is very convenient as all hacks are in one place and as soon as you drop support for some verison you can easily delete part of them or even remove whole file. e.g.
/* Applied for all IE version < 9 (IE6-8) */
.lt-ie9 .header {
margin-left: 20px;
}
How to create IE-only stylesheet
These are CSS vendor prefixes. CSS browser prefixes are a way for browser vendors to add support for new CSS features. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized. No difference in the order applied. Source
There are number of tools which automatically add vendor prefixes, you may want to preprocess your css source during a build, then you don't have to maintain them yourself.
Prefixfree / Autoprefixer
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
