Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the knowledge of CSS hack". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "what is the knowledge of CSS hack" can help you solve the problem.

What is CSShack?

CSShack due to different browsers, such as IE6,IE7,Firefox, etc., have different understanding of CSS parsing, which will lead to different page effects and can not get the page effect we need. At this time, we need to write different CSS for different browsers, so that it can be compatible with different browsers at the same time, and can get the page effect we want in different browsers.

CSShack classification

Hack is mainly divided into CSS selector hack, CSS attribute hack, IE condition annotation hack.

CSS selector hack: for example, IE6 can recognize * html.class {}, IE7 can recognize * + html.class {} or *: first-child+html.class {} and so on.

CSS attribute hack: for example, IE6 can recognize underscore "_" and asterisk "*", IE7 can recognize asterisk "*", but can't recognize underscore "_", and firefox can't recognize either.

IE condition Notes hack:

For all IE:

For IE6 and the following versions:

This type of Hack works not only for CSS, but also for all code written in the judgment statement.

The writing order is generally written in front of the CSS of a browser with strong recognition ability.

Usage

For example, to distinguish between IE6 and firefox browsers, you can write:

Div {

Background:green;/*forfirefox*/

* background:red;/*forIE6*/ (bothIE6&&IE7)

}

You can see that it is red in IE6 and green in firefox.

In firefox, it doesn't recognize what the asterisk is, so filter it out and parse it to the result: div {background:green}, so of course the background of this div is green.

In IE6, both background can be recognized, and the result of its parsing is: div {background:green;background:red;}, so according to the priority, the next red has a high priority, so of course the background color of this div is red.

Browser recognition

CssHack

# test

{

Width:300px

Height:300px

Background-color:blue;/*firefox*/

Background-color:red\ 9 Placement alliance /

Background-color:yellow\ 0tinct /

+ background-color:pink;/*ie7*/

_ background-color:orange;/*ie6*/

}

: root#test {background-color:purple\ 9;} / * ie9*/

@ mediaalland (min-width:0px) {# test {background-color:black\ 0;}} / * opera*/

@ mediascreenand (- webkit-min-device-pixel-ratio:0) {# test {background-color:gray;}} / * chromeandsafari*/

Test

The above code can be directly copy out, save as html in each browser to try. Analysis:

(1) background-color:blue; is recognized by all browsers. Here, it is used for firefox.

(2) background-color:red\ 9;\ 9 all ie browsers can recognize

(3) background-color:yellow\ 0;\ 0 is reserved for ie8, but the author tests and finds that the latest version of opera also knows Khan. But wait a minute, hack wrote it to opera later, so we thought it was for ie8.

(4) + background-color:pink;+ie7 is fixed

(5) _ background-color:orange;_ is reserved for the magical ie6

(6): root#test {background-color:purple\ 9;}: root is for ie9. A version circulated on the Internet is: root#test {background-color:purple\ 0;}, and the new version of opera is also known, so after repeated verification by the author, the unique feature of ie9 is: root selector {attribute\ 9;}

(7) @ mediaalland (min-width:0px) {# test {background-color:black\ 0;}} this is the magic opera that always competes with ie to recognize\ 0. You must add\ 0, otherwise firefox,chrome,safari will know them all.

(8) @ mediascreenand (- webkit-min-device-pixel-ratio:0) {# test {background-color:gray;}} the last one belongs to chrome and safari, the upstart browsers.

This is the end of the introduction of "what is the knowledge of CSS hack". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.