introduce
There is no doubt that any web designer or developer who attempts to use CSS will find that different browsers require different style declarations. These annoyances are due to varying degrees of CSS implementation integrity across browsers and their versions. Conditional CSS is a solution to this problem, taking the idea of Internet Explorer's conditional comment syntax and inlining it into the CSS declaration.
Basic usage
Conditional CSS is mainly used to indicate whether a particular CSS statement should be used in a particular browser. Of course you don't want to do this very often, but it can be very useful when you need to target a browser. You can see in the U4EA support list that most browsers support this method.
Any CSS declaration or block can be prefixed with conditional declarations. There are three basic types of prefixes:
[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]
! - the negation of the statement (e.g. NOT) - optional
browser - the browser for which the declaration is made
'IE' - Internet Explorer
'Gecko' - Gecko-based browser (Firefox, Camino, etc.)
'Webkit' - Webkit-based browsers (Safari, Shiira, etc.)
'SafMob' - Mobile Safari (iPhone / iPod Touch)
'Opera' - Opera's browser
'IEMac' - Mac version of Internet Explorer
'Konq' - Konqueror
'IEmob' - IE for mobile
'PSP' - Playstation Portable
'NetF' - Net Front (Sorry for the ignorance of Sugar and Tomatoes, I don't know what this is)
version - the browser version to target
condition - arithmetic operator
lt - less than
lte - less than or equal to
eq - equal to
gte - greater than or equal to
gt - greater than
Some examples of conditional statements:
// Conditional-CSS syntax example
[if IE] - if the browser is IE
[if ! Opera] - if the browser is not Opera
[if IE 5] - if the browser is IE 5
[if lte IE 6] - If the browser is IE 6 or lower (IE 5, IE 4, etc.)
[if ! gt IE 6] - equivalent to the above statement, if the browser version is not higher than IE 6
Because many instances think that div is a box class with width and padding. So it should also behave fine in IE 5 (I see a lot of people have dropped support for IE 5, but this is a classic example). IE 5's box model is not standard, so this is how to solve it using conditional CSS:
// Conditional CSS box model example
div.box {
width: 400px;
[if IE 5] width: 600px;
padding: 0 100px;
}
As you can see, conditional CSS allows you to maintain only one CSS file instead of several files that require the use of IE's conditional comments. This helps streamline maintenance and makes code clearer.
Going a step further, an important feature of conditional CSS is that when it finds an @import CSS declaration, it automatically opens and inserts the file that needs to be imported. This reduces page load time because the browser only needs to make a single HTTP request for the CSS file.
Although conditional CSS is mostly used for different versions of IE browsers, conditional CSS is also quite useful when you encounter bugs in other browsers that are difficult to fix (mainly using Javascript to fix). Examples include background image bugs in Firefox 2 and Safari 2 that lacked 'display: inline-block' support. These bugs have been corrected in the latest versions of these browsers, but when these browsers occupy a certain market share, backward compatibility is very important.