Hiding CSS in a browser

Hiding CSS in a browser

We all know that there are differences between browsers. Many people once had a headache when using XHTML + CSS to create webpages. A lot of skills are required to work under the influence of these differences. "Hiding CSS" is one of the most important skills (or even the most important ). The main idea of this technique is to hide some overloaded CSS rules for Some browsers in some ways.

This article is not intended to teach you how to use this technique. It is intended for design developers with a certain CSS foundation. I suppose you have used some method to hide CSS rules. Here we want to list available methods and browsers with hidden rules so that you can check them at any time during normal work.

Nine methods are listed in this big table, and I will call it "the exclusive nine swords". I hope this will help you:-D

Note: This table contains w3development.de.

Browser	@ Import url ("...")	@ Import url (...)	@ Import "..."	Media = ""	@ Media	Comment	Attribute	Child	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
Internet Explorer 5.5 Win							X	X	X
IE 6 Win							X	X
Internet Explorer 4.01 Mac	X				X	X	X	X	X
Internet Explorer 4.5 Mac	X					X	X		X
IE 5 Mac					X	X	X
Konqueror 2.1.1					X
Mozilla 1, 1.0
Netscape 4.x	X	X	X	X	X		X	X	X
Netscape 6.01
Netscape 6.1
Netscape 6.2
Operators' 3.60 Win							X
Operators' 4.02 Win
Operators' 5.02 Win
Operators' 5.12 Win
Opera Tech Preview 3 Mac

After reading this table, my first response was: Mozilla and Opera are really gods. Only one rule will work for the oldest version of Opera, so we will not consider Mozilla and Opera when talking about hiding the rule later. The following describes the features of these nine "jianfa" methods, and I personally recommend them. Note that the recommended items do not necessarily match your requirements. before using them, check the table above.

@ Import url ("")

@import url("global.css")

Hide rules from browsers of earlier versions (version number less than 5.

@ Import url ()

@import url(global.css)

Hide rules from browsers of earlier Windows versions (version number less than 5.

@ Import ""

@import "global.css"

Hide rules from browsers of earlier Windows versions (version number less than 5.

Media = ""

<link href="global.css" type="text/css" rel="stylesheet" media="all"/>

Hide the rules for Netscape 4.x.

@ Media

@ Media all {.../* rules to be hidden */}

If only NN and IE are considered, the rule is hidden only for version 4.x.

Comment

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

This is a precise missile. Hide rules only for IE5 and earlier versions. Therefore, if you want to define rules separately for IE5 and IE5.5, you should rely on it.

Attribute

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

Another precise missile. If you do not care about the old browser version, you just hide the rules for IE. For more information about the attribute selector, see W3C documentation.

Child

p>span { color: #00f; }

This rule is basically the same as that of IE in some Mac platforms.

Tantek

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

Famous for hiding CSS skills, hiding rules for all "non-modern" browsers.