CSS compatible processing

CSS code compatibility mainly consists of hack and filter two methods to solve related problems.

Hack: A method that is compatible with CSS to display correctly in different browsers.

Filter: A special browser or browser group that shows or hides a rule or declaration method.

Attention:

Hack is an unofficial technique that relies heavily on a combination of characters and a repeating definition of rules and declarations to achieve the same effect across browsers.

But hack also has side effects, such as reducing the readability of the code and increasing the burden on the code.

There are usually two ways to design CSS Hack and filter:

• Use the browser's own bug to hide or show styles or declarations.
• Use the browser's imperfections in CSS support, such as the lack of support for some rules or syntax to hide or display styles.

It is generally recommended to use the second method for browser compatibility.

Latest and most authoritative CSS filter technology summary: http://www.communis.co.uk/dithered/css_filters/css_only/index.html

Display mode: The major browser manufacturers in order to achieve the standard Web pages and traditional Web page compatibility, respectively, the browser has developed several sets of Web page display scheme.

Microsoft has embedded two display schemes from IE6.0 and above: Standards Mode (standard) and Quirks mode (weird mode).

Standard mode: The browser displays the page according to the standard Web page specification developed by the organization.

Quirks mode: The page will render the page in IE5 display to ensure compatibility with past non-standard pages.

Their biggest difference is the difference in the parsing of the box model.

Firefox supports 3 display modes from 1.0 + versions: Quirks mode, almost standards mode (almost standard), and standards mode.

Where almost standards mode corresponds to the standards mode of IE and opera, this mode is basically the same as the standard mode, except that there are some subtle differences in how tables are handled.

Firefox display model details of the differences can be consulted: http://www.mozilla.org/docs/web-developer/quirks/doctypes.html

Opera supports the same display mode as IE from version 6.0: Quirks mode and Standards mode, the details of the display mode can be found in the following: http://www.opera.com/doc/specs/doctype/.

Related document types, which are displayed according to the document type:

HTML4.0 Filter Type:

<! DOCTYPE HTML Public "-//w3c//dtd HTML4.0 transitional//en" "Http://www.w3.org/TR/REC-html40/loose.dtd" >

The Web page will be interpreted in accordance with the standards established by the Consortium.

HTML4.0 Strict type:

<! DOCTYPE HTML Public "-//w3c//dtd html4.0//en" "Http://www.w3.org/TR/REC-html40/strict.dtd" >

HTML4.0 Frame Type:

<! DOCTYPE HTML Public "-//w3c//dtd HTML4.0 frameset//en" "Http://www.w3.org/TR/REC-html40/frameset.dtd" >

And XHML1.0, XHTML1.0, XHTML framework 3 document types, but if you don't define a document type for a page, IE will display the Web page in weird mode.

No version of document type is available:

<! DOCTYPE HTML Public "-//w3c//dtd html//en" "Http://www.w3.org/TR/html/loose.dtd" >

HTML2.0 version:

<! DOCTYPE HTML Public "-//ietf//dtd html2.0//en" >

HTML3.0 version:

<! DOCTYPE HTML Public "-//ietf//dtd html3.0//en" >

HTML3.2 version:

<! DOCTYPE HTML Public "-//ietf//dtd html3.2final//en" >

Note: This example is only valid for browsers older than IE6.0, and other browsers do not support the display differences for this example.

Conditional filter Style:

Syntax:<!--[if Ie]> <! [endif]-->

Detailed Explanation:

Conditional modifier Keywords:

LTE: Less than or equal to a certain version of IE browser.

LT: Less than one version of IE browser.

GTE: A browser that is greater than or equal to a version.

GT: Greater than one version of IE browser.

!: Not equal to a version of IE browser.

Related examples:

<!--[If ie5.0]>

<! [endif]-->

<!--[If ie5]>

<! [endif]-->

<!--[If ie6]>

<! [endif]-->

<!--[if it ie6]>

<! [endif]-->

<!--[If ie5.5000]>

<! [endif]-->

<!--[if GTE ie6]>

<! [endif]-->

<!--[If ie7]>

<! [endif]-->

<!--[if it ie7]>

<! [endif]-->

<!--[if GTE ie7]>

<! [endif]-->

If you define a style for a version of IE, you can place the style in the IE conditional statement.

For example:

<!--[If ie6]>

<style type= "Text/css" >

Body {

Background: #00FFFF;

}

</style>

<! [endif]-->

You can also define different external style sheets for different versions of the browser, and then use the IE conditional statements to import different files for different versions of IE to achieve browser compatibility.

Such as:

<!--[If ie6]>

<link href= "Image/ie6.css" rel= "stylesheet" type= "Text/css" >

<! [endif]-->

<!--[If ie7>

<link href= "Image/ie6.css" rel= "stylesheet" type= "Text/css" >

<! [endif]-->

Tip: Use the IE conditional statement to design conditional statements that are specifically intended for use by non-IE browsers (please note their special wording).

<!--[if! Ie]>

<! [endif]-->

Selector filter Style:

• Use!important to elevate priority: IE6 and the following versions of browsers are not recognized, IE7 cannot use this method.
• Use underscore attribute name: is considered a custom attribute in IE7, it is not recognized in CSS and is applied to browsers above IE7. IE6 and the following versions are recognized.
• Use *html selector: ignored in IE7 browser, dedicated to IE6 and the following versions of browsers.

In standard Web pages, HTML elements are considered to be root elements, and other elements are included therein. However, in IE6 and the following versions of the browser default an anonymous root element, the HTML element is considered to be its child elements.

Filter declaration:

• Hide individual Claims:

IE6 environment, such as:

div {

width:200px;

width/**/:400px;

}

Note that the position of the comment is preceded by the colon, and is separated by a space from the property name.

IE5.5 environment, such as:

div {

width:200px;

Width:/**/400px;

}

Note that the position of the note is after the colon, and a space is separated from the colon.

IE5 environment, such as:

div {

width:200px;

width/* */:400px;

}

Note that the location of the note is preceded by the name of the property, before the colon, and a space is spaced in the note. This filter also adapts to IE5 and IE4 in Mac systems.

Such as:

div {

width:200px;

width/**/:400px;

}

It applies not only to the IE version of the above system, but also to the browser version of the Ie5.2/os operating system.

• Hide multiple claims:

Use the Voice-family property to design claims that are compatible with IE5.5 and lower versions of the browser.

Such as:

div,content {

height:400px;

width:400px;

Border:solid 1px Blue;

voice-family: "\"} "\";

Voice-family:inherit;

height:200px;

width:200px;

Border:solid 1px red;

}

Attention:

The Voice-family property allows you to specify which sound is used for reading the content of the Web page, and for devices such as blind readers.

IE5.5 and earlier browsers because they are not recognized, while the escape character is parsed, and is considered to voice-family: "\"} "\"; this sentence ends.

A red box that appears in other browsers as 200 pixels.

• Use recommended filters:

IE6 and lower versions are dedicated:

*html #Element {

color:red;

...

}

IE7 Version Exclusive:

*+html #Element {

color:red;

...

}

ie7+ and complies with modern standard browser-specific:

Div> #Element {

color:red;

...

}

Non-IE modern standard browser-specific:

Html>/**/body #Element {

color:red;

...

}

\9: Select ie6+

+: Select browsers below ie8+ and OPERA15

Such as:

.test {color: #090\9; /* For IE8+ */*color: #f00;  /* For IE7 and earlier */_color: #ff0;  /* For IE6 and earlier */}

Using the instrumentation tool:

CSS Validation Services: http://jigsaw.w3.org/css-validator/

Web developer tools: Http://chrispederick.com/work/webdeveloper.

　　

CSS compatible processing