It's a general expectation that the web application you are working on must be supported in all major browsers. Since the implementation of CSS properties in different browsers varies, they force front-end developers to write specific properties separately for them. There are some CSS properties that don't give similar result in all browsers. The most popular one is vertical-align; it behaves differently in chrome/firefox and in IE. The situation becomes even tougher when the client asks support for different versions of the same browser.
Here are some tricks that help developers serve separate CSS files/classes for different browsers and browser versions depending on the requirements.
Separate CSS for Mozilla Firefox - CSS only solution:
@-moz-document url-prefix(){
div{ color: red; }
}
Separate CSS for IE version - with conditional comments:
The traditional code:
The HTML5 BoilerPlate code:
These conditional classes get appeneded in the <html> tag depending on the version you are using. For example, if you are using IE9, the '.ie9' class will get appeneded in the <html> tag which gives you an option to write CSS only for IE9 with '.ie9' class as a parent class -
.ie8 .className{ color: green; } /* This css will be applied to IE8 only*/
.ie9 .className{ color: red; } /* This css will be applied to IE9 only*/
Separate CSS for IE version - with jQuery:
Read more on jQuery.browser
Separate CSS for Windows OS Versions using javascript:
If you are supporting all versions of windows OS, these tricks can help you write separate CSS files for Windows OS versions.
For Windows 8:
For Windows 7:
For Windows XP:
Read more on understanding user-agent string
Related Articles:
- Vertically center align image, DIV, and other html elements in IE 7 and IE 8
- Styling input type file
- Essential CSS Pseudo Classes
Here are some tricks that help developers serve separate CSS files/classes for different browsers and browser versions depending on the requirements.
Separate CSS for Mozilla Firefox - CSS only solution:
@-moz-document url-prefix(){
div{ color: red; }
}
Separate CSS for IE version - with conditional comments:
The traditional code:
The HTML5 BoilerPlate code:
These conditional classes get appeneded in the <html> tag depending on the version you are using. For example, if you are using IE9, the '.ie9' class will get appeneded in the <html> tag which gives you an option to write CSS only for IE9 with '.ie9' class as a parent class -
.ie8 .className{ color: green; } /* This css will be applied to IE8 only*/
.ie9 .className{ color: red; } /* This css will be applied to IE9 only*/
Separate CSS for IE version - with jQuery:
Read more on jQuery.browser
Separate CSS for Windows OS Versions using javascript:
If you are supporting all versions of windows OS, these tricks can help you write separate CSS files for Windows OS versions.
For Windows 8:
For Windows 7:
For Windows XP:
Read more on understanding user-agent string
Related Articles:
- Vertically center align image, DIV, and other html elements in IE 7 and IE 8
- Styling input type file
- Essential CSS Pseudo Classes
No comments:
Post a Comment