Hide CSS for browsers lone nine swords

css| Browser

We all know that there are differences between browsers, many people in the use of Xhtml+css way to create a Web page has been a headache. It takes a lot of skill to work under the influence of these differences, and "hiding CSS" is one of the most important techniques (even the most important). The main idea of this technique is to hide some of the overloaded CSS rules in some ways for some browsers.

This article is not meant to teach you how to use this technique, it's for design developers with a certain CSS base, and I assume you've used some sort of hidden CSS rule. Here is to put the available methods and the hidden rules of the browser are listed to facilitate everyone in peacetime work at any time to check.

In this big table list nine kinds of methods, I called it "solitary nine swords", I hope to help you:-D

Note: This form is originally contained w3development.de.

Child

Browser	@import url ("...")	@import url (...)	@import "..."	media= ""	@media	Comment	attribute		Tantek
Amaya 5.1 Win	X						X	X	X
IE 3 Win	X	X	X			X	X	X	X
IE 4 Win	X	X	X		X	X	X	X	X
IE 5 Win						X	X	X	X
IE 5.5 Win							X	X	X
IE 6 Win							X	X
IE 4.01 Mac	X				X	X	X	X	X
IE 4.5 Mac	X					X	X		X
IE 5 Mac					X	X	X
Konqueror 2.1.1					X
Mozilla 1.0
Netscape 4.x	X	X	X	X	X		X	X	X
Netscape 6.01
Netscape 6.1
Netscape 6.2
Opera 3.60 Win							X
Opera 4.02 Win
Opera 5.02 Win
Opera 5.12 Win
Opera Tech Preview 3 Mac

After reading this form my first reaction is: Mozilla and opera are really God-man also. There's only one rule that works for opera's oldest version, so we're basically not thinking about Mozilla and opera when we talk about hidden rules. The following list of these nine "sword" tricks, at the same time also put on the side of my personal recommendation of the use of occasions. Note that what I recommend is not necessarily consistent with your requirements, please check the above form before using.

@import URL ("")

@import url ("Global.css")

Hidden rules for browsers with older versions (version number less than 5).

@import URL ()

@import URL (global.css)

Browsers hide rules for older versions of the Windows platform (version number less than 5).

@import ""

@import "Global.css"

Browsers hide rules for older versions of the Windows platform (version number less than 5).

Media= ""

<link href= "Global.css" type= "Text/css" rel= "stylesheet" media= "All"/>

Hide rules against Netscape 4.x.

@media

@media All {... * * need to hide the rules */}

If only nn and IE are considered, then only the 4.x version of the rule is hidden.

Comment

#anySelector/*/{color: #f00;}

It's a precision guided missile. Hide rules only for IE5 and the following versions. So if you want to define the rules separately from IE5 and IE5.5, it's up to you.

Attribute

P[id] {color: #0f0;}

Another precision guided missile. If you do not care about the old version of the browser, it is only the IE hidden rules. For more information about the property selector, see the documentation for the document.

Child

P>span {color: #00f;}

Basically ibid, only some version of the Mac platform IE support this rule.

Tantek

P#tantek {  voice-family: "\"}\ ""; * Some browsers have resolution Bugs/  Voice-family:inherit;/* The following rules will be ignored/  color: #f00;}

The famous hidden css trick is to hide the rules for all "non-modern" browsers.