CSS Tricks and filters

　　In an ideal environment, writing the correct CSS will work properly in a browser that supports CSS. Unfortunately, we do not live in an ideal environment, where browsers have many bugs and inconsistencies. To create pages that display the same style on a variety of browsers, CSS developers need to be creative. By exploiting bugs and the non-implemented CSS, developers can selectively apply different rules to different browsers. Tricks and filters are powerful tools for developers. However, it is because of the strong, the use of the time should be more cautious. It is really important to understand the common tricks and how they are implemented, but it is equally important to know when to use them and when not to use them.

　　Filter a separate style sheet

　　Putting tricks in browser-specific CSS files and then using filters to send them to specific browsers can greatly simplify the management of your tricks. There are currently two main implementations of this method. One approach is to use a parsing bug to send a particular CSS file to the appropriate browser using the @import rule. One is conditional annotations using IE.

IE Conditional annotations is a proprietary (and therefore non-standard) Microsoft extension to regular (X) HTML annotations. Conditional annotations allow you to display blocks of code based on conditions (usually browser versions). Although non-standard, conditional annotations appear as regular annotations for all other browsers and are therefore harmless. Conditional annotations appear for the first time in Windows IE 5, and are supported by all subsequent versions of Windows IE.

To give a particular style to IE 5 and later, you can place the following code at the beginning of the (X) HTML document:

<!-- [If Ie]<style type= "Text/css" > @import ("ie.css");</style>  -

IE5 and later on Windows will receive style sheet ie.css, and all other browsers will only see the text of a comment. You can use conditional annotations to specify a specific browser, such as IE 5.0:

<!-- [If IE 5]<style type= "Text/css" > @import ("ie50.css");</style>  -

　　You can also specify a group of browsers, such as IE5.5 and later:

<!-- [If GTE IE 5.5000]<style type= "Text/css" > @import ("ie55up.css");</style>  -

　　or IE 5 and IE 5.5:

<!-- [If Lt IE 6]<style type= "Text/css" > @import ("ie.css");</style>  -

　　This technique is effective and very easy to remember. The main drawback is that these annotations need to be placed in HTML instead of in CSS. If you need to stop supporting a browser at a certain stage, you need to remove the comment from the page. If this is a problem, consider the following filter.

　　The band pass Filter is a series of filters created by Tantek Celik based on browser parsing errors, which allow the stylesheet to be provided to the selected browser using @import rules. Because they are CSS rules, these filters can be placed in a CSS file so that the filtered files can be centrally controlled in one place. Isolating tricks into browser-specific CSS files can greatly simplify the management of tricks. If you want to stop support for a particular browser, simply delete the relevant style sheet without having to search and modify in a large number of page codes.

To pass CSS files to IE 5 and 5.5 on Windows, you can use the Tantek filter:

{i{content:"\"; /* " " */} /**/

　　This filter looks like a bunch of meaningless rules, which is true for many browsers. Only understand that the CSS1 browser does not recognize the @media rule, so it is completely ignored, and a more capable browser will see a declaration in the @media rule. The goal is to find the <i> element, because the second quotation mark is preceded by an escape character, and the content property is considered to be a meaningless string. Basically, modern browsers will see the following rules:

{I {content:"blah, blah, blah";} }

　　An escape character is a reserved character (usually a backslash) that causes the parser to ignore subsequent reserved characters. So, if you want to use the CSS content property to automatically generate a quotation mark, you must escape it, otherwise it will end before the quotation mark: blockquote:before{content: "\" "}

　　The TTY media type refers to terminal and fax printers. Fortunately, no device currently supports this type of media, so a standard-compliant browser will actually ignore the entire rule.

But, IE5. X/win does not understand the escape character, so the content declaration is terminated prematurely, the following character ends the <i> and @media rules, which results in the application of the @import rule, all the extra characters are commented out, so the whole rule looks like this in Ie5.x/win:

{I {content: "blah"; /*  */}} @import ' Ie5x.css '; /* */

　　Filter individual rules and declarations

　　If your CSS file is small and you only need to apply a few tricks, you can add the relevant filters to the main stylesheet, but all of these rules and claims-specific filters add additional burden and complexity to your code.

　　The safest filters depend on the non-implemented CSS, not the browser bugs, because these filters use valid CSS selectors to apply valid declarations, so strictly speaking, they are not filters at all. They are only valid CSS rules that some browsers do not understand. The first of these filters is called a sub-selector trick . IE6 and earlier versions on Windows do not support child selectors, so you can use it to hide rules from these browsers. In order for this filter to work, you must ensure that there are no spaces before or after the child selector .

as follows, use the sub-selector to hide the transparent background PNG image for Ie5/6win:

{background-image: url (bg.png);}

IE7 is expected to support child selectors and may also support PNG transparency. By using a sub-selector in this way, it allows the new version of IE to see a transparent background without modifying the code, thus providing forward compatibility.

Another efficient way to filter is to use the property selector, which is supported by many modern browsers, but is not supported by IE6 and earlier versions. Therefore, you can use the property selector to apply styles to classes and IDs in a more advanced browser. In this example, the background PNG is applied to the content div in a standard-compliant browser using the property selector:

{background-image: url (bg.png);}

　　One of the most famous and useful CSS filters is the asterisk HTML trick . This filter is very easy to remember, it can specify IE6 and lower versions. An HTML element is considered to be the first element on a Web page (the root element). However, IE6 and earlier have an anonymous root element that surrounds the HTML element, and you can use the universal selector to specify HTML elements that are enclosed in another element, because this can occur only in the IE6 and earlier versions, so specific rules may be applied to these browsers:

{font-size: small;}

　　Adding a universal selector and an HTML type selector at the beginning of any CSS selector will hide the rule from all browsers except IE, and the most common way to use this rule is to set a rule that you want to apply to all browsers except IE. Then use the asterisk HTML tricks to override this rule in IE. For example, IE will display a 1-pixel dotted line incorrectly as an unsightly dashed line, and to avoid these unsightly dashed lines, you can set the border style of the anchor on the mouse to be dotted, but override the rule in IE6 to show the solid line:

{Border: 1px dotted black;}  {border-style: solid;}

　　This bug cannot be seen in other browsers and may be fixed in IE 7, so the asterisk HTML trick provides a way to effectively specify IE6 and lower versions.

Another useful filter is the comment backslash trick . The IE5 error on Mac is allowed to escape inside the comment, the filter works by adding a backslash before the end of the comment, and all other browsers ignore the escape and apply the following rule, but Ie5/mac will think the comment is still not finished. Therefore, all characters before the next closing comment are ignored:

/* hiding from Ie5/mac \ */  {width: 5em;} /* */

　　If combined with the asterisk HTML trick and the comment backslash filter, it becomes the Holly trick (the name derives from its inventor, Holly Bergevin). By using these two rules together, you can apply rules to IE6 and lower versions on Windows:

/* hiding from IE 5/mac \ */  {height: 1px;} /* */

　　This is useful for fixing all of the IE bugs that are unique to Windows, and it may be one of the most commonly used filters today.

Sometimes, you might want to apply a claim to IE6 and lower versions of Windows in the same rule, apply another declaration to all other browsers, and use the annotation properties tricks, or you can use the !important or underline tricks .

!important tricks can work because IE6 and earlier versions on Windows have problems dealing with multiple properties in a single rule:

{position:fixed!important; position: static;}

　　IE6 and earlier will ignore the first declaration and apply the second one, and all other browsers will apply the first one because it is used! The important keyword, which increases the precedence of this rule in the cascade.

The underline tricks are very similar to the!important tricks, with an underscore in front of the attribute, and the standard browser no longer recognizes this property and ignores the claim, but the IE6 and lower versions on Windows ignore the underscore, so apply this rule.

{position: fixed; _position: static;}

　　So far, all the filters for the various versions of IE, which is partly because IE bug more than most of the current browser, and then, because IE is currently the most popular browser, so more bugs are found and recorded, but other browsers also have bugs, Includes opera 6 and lower.

　　The Owen tricks enable CSS authors to hide styles for Opera6 and lower versions, as well as IE6 and lower versions on Windows. This filter works because these browsers do not implement the first child selector. Because there can only be one header element, it is always the first child element. The subject tag always appears behind the header tag, so it can be found using the neighboring sibling element selector, which is understandable to the standard-compliant browsers, but Opera6 and IE6 and earlier on Windows ignore it.

The following example uses the Owen tricks to add a background PNG image to the body label for a more compliant browser, and hides it for Ie6/win and Opera6 and lower versions:

{background-image: url ("Bg.png");}

　　The sub-selector tricks and Owen tricks can be used together, thus only for OPERA6 and lower versions. Suppose you want to display an upgrade prompt to Opera6 and earlier users, first, use the child selector to display the upgrade message on all browsers except IE6 and earlier on Windows. Then, use Owen Tricks to hide this message from browsers other than Opera6 and lower versions:

{display: static;}  {display: none;}