CSS3 support in older browsers
I am new to CSS3 concepts and am trying to understand the same.
I guess the main benefits of using CSS3 are that it eliminates the use of images to create things like gradients, rounded borders, etc.
My question is if I want to support older browsers, say IE8, what are my options,
- Will it automatically fall back to some rendering on old users (like regular borders instead of rounded ones).
- Can I get the same effect from older IE browsers (like 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 they used for? Is there any specific ordering required to support older IE support?
source to share
- In most cases, yes. Sometimes browsers have partial implementations that may differ from most others. You can check the CSS3 support on this awesome resource - Can I use? - border radius It shows you information in browser / per version, has partial support annotation and shows total support percentage.
-
To implement backups in older browsers, you would like to use a feature detection library like Modernizr . It adds a bunch of css classes to the html element based on the client client and its CSS3 support. eg.
<html class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms ....
When it comes to implementing backups, there are different methods for each specific case. Below are examples of fallbacks for a 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 ); }
The next technique you can use is to detect the IE version using conditional comments. You will need to add the following code cut 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 its own set of classes
lt-*
. Subsequently, I create a fileiefixes.css
where I put all the nasty ones, etc. Corrections. This is very handy, as all the hacks are in one place, and once you drop support for any validation, you can easily remove some of them or even delete the entire file. eg./* Applied for all IE version < 9 (IE6-8) */ .lt-ie9 .header { margin-left: 20px; }
-
These are the CSS vendor prefixes. The CSS browser prefix is a way in which browser developers can add support for new CSS features. The browser prefix is used to add new features that cannot be part of the official specification and to implement features in a specification that has not been finalized. No difference in the order applied. Source
There are many tools that add vendor prefixes automatically, you can preprocess your css source at build time then you don't need to maintain them yourself.
source to share
1) Yes, although your mileage may vary. Sometimes it falls away, as you might guess, sometimes it gets crazy (if you're doing something particularly difficult). Some things (like animation) don't have an equivalent headroom.
2) Your best bet http://css3pie.com/ is a fast plugin that adds (most) css3 options to older IE browsers. In most countries, IE8 usage is fairly low (roughly 15% globally), although Raptor indicates that in places like China, the question is whether the international market is worth worrying about. Ironically, you're probably more obsessed with IE6, as there are still some companies using it due to legacy code.
3) Prefixes are required / required for CSS3 to work in some browsers. A list of what is currently required can be found in W3 Scools and Can I use ?, But many have been dropped now and you can go with the vanilla versions.
source to share
- Yes, but not all CSS3 properties are recognized, eg. keyframe animation
- Depends on what effects. Some libraries do this.
- these are vendor specific properties. In older browsers / those browsers that do not support CSS standards, they use these vendor specific properties to show the CSS properties. MDN has a very detailed CSS section to specify which CSS requires vendor-specific properties and which doesn't.
source to share