How to use css if endif

Any web designer or developer who tries to use CSS will find that different browsers require different style declarations. These troubles are caused by the completeness of CSS execution in different browsers and their versions. Conditional CSS is a solution to this problem. It adopts the conditional annotation syntax of Internet Explorer and inline it into CSS declaration.

Basic usage

Conditional CSS is mainly used to indicate whether a special CSS declaration should be used in a special browser. Of course, you do not want to do this often, but it is 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 add a conditional declaration prefix, which has three basic types:
[If {!} Browser]
[If {!} Browser version]
[If {!} Condition browser version]

! -Declared negation (for example, NOT)-optional

Browser-declare the target browser
'Ie'-Internet Explorer
'Gecko '-Gecko core browsers (Firefox, Camino, etc)
'Webkit'-Webkit core browsers (Safari, Shiira, etc)
'Safmob'-mobile Safari (iPhone/iPod Touch)
'Opera '-Opera browser
'Iemac'-Internet Explorer for Mac
'Konq'-Konqueror
'Iemob'-Internet Explorer for Mobile
'PSP '-Playstation Portable
'Netf'-Net Front)

Version-version of the browser to be targeted

Condition-arithmetic operator
Lt-less
Lte-less than or equal
Eq-equals
Gte-greater than or equal
Gt-greater

Examples of conditional declarations:

// Condition-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 earlier (IE 5, IE 4, etc) [If! Gt IE 6]-equivalent to the above statement, if the browser version is no later than IE 6

Because many instances think that div is a box class with width and padding. Therefore, it should also be normal in IE 5 (I found many people have abandoned support for IE 5, but this is a classic example ). The box model of IE 5 is not standard, so this is the solution 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 need to use IE's conditional annotations. This facilitates streamlined maintenance and makes the code clearer.

Further, an important feature of conditional CSS is that when it finds a @ import CSS declaration, it will automatically open and insert the file to be imported. This reduces the page loading time, because the browser only needs to make an HTTP request to the CSS file.