Hidden CSS for the browser of the lone Nine swords _ Experience Exchange

Hide CSS for browser The lone nine swords

Hide CSS for Browsers

We all know that there are differences between browsers, and many people have a headache when making Web pages using the Xhtml+css method. It takes a lot of skill to work with these differences, and "Hide css" is one of the most important tricks (and even the most important). The main idea of this technique is to hide some overloaded CSS rules from some browsers in some way.

This article is not intended to teach you how to use this technique, it is intended for design developers with a certain CSS base, and I assume that you have used some kind of method of hiding CSS rules. Here is to make available methods and hidden rules of the browser are listed, so that everyone in the normal work at any time to consult.

In this big table list of nine ways, I call it "solitary nine swords", hoping to help you:-D

Note: This form is originally loaded with 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 was: Mozilla and opera are really God-man. There is only one rule that will work for one of opera's oldest versions, so we're not thinking about Mozilla or opera when we talk about hidden rules. Here are the nine kinds of "sword" tricks, but also on the side of the note I personally recommend the use of the occasion. Note that my recommendation is not necessarily consistent with your needs, please check the above table before use.

@import URL ("")

@import url("global.css")

A browser hiding rule for older versions (with a number less than 5).

@import URL ()

@import url(global.css)

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

@import ""

@import "global.css"

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

Media= ""

Hides rules for Netscape 4.x.

@media

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

If you only consider NN and IE, only the 4.x version of the hidden rules.

Comment

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

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

Attribute

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

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

Child

p>span { color: #00f; }

Basically, just the Mac platform part version of IE support this rule.

Tantek

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

Famous hidden CSS tricks, hidden rules for all "non-modern" browsers.

