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

The main content of this article is to explain "what are the ways for IE browsers to write CSS style alone?" interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the ways for IE browsers to write CSS styles alone?"

IE hacks

For example, the left margin of an element in other browsing is 30px, while in IE6, it is set to 20px, which can be written as follows:

The code is as follows:

.demo {margin-left: 30px; _ margin-left: 20px;}

Personally, I prefer conditional annotation CSS to IE hacks. The word "hacks" in IE hacks is already very uncomfortable. I always feel that it is a partial prescription and a biased solution. But IE hacks also has its advantages--

1.CSS hacks is embedded in a normal CSS and no more HTTP requests are generated.

2.CSS hacks is embedded in ordinary CSS, so it is more convenient to write.

Of course, its shortcomings are also obvious--

1. It is a non-standard product.

two。 Embedded in other CSS, not easy to maintain. Especially when there is a large number of hacks, maintenance is a nightmare.

3. Embedded in other CSS, even in non-IE browsers will be loaded, a waste of resources.

Conditional comment CSS

In the same example above, if you use conditional annotation CSS, you can write as follows:

HTML:

The code is as follows:

Ie6.css

The code is as follows:

.demo {margin-left: 20px;}

Here's a note: conditional comments are IE proprietary Miscrosoft extensions to regular (X) HTML annotations. From the W3C standard, it is also a non-standard product, but it is Microsoft's official way of developing for IE, and conditional comments appear as regular comments for all other browsers, so they are harmless to other browsers.

The advantage of conditional annotation CSS is that it is written in a separate CSS file, can accurately control the loading in a specific IE, does not cause a waste of resources, and is easy to maintain. The disadvantage is that it will generate redundant HTTP requests, especially when you need a large number of compatible versions of IE, you need to generate multiple HTTP requests, which will undoubtedly affect the page loading speed of the lower version of IE, which originally has a small number of channels.

Obviously, neither of the above methods is a good one, so let's introduce a relatively better solution.

Conditional comments html tag

This approach also uses conditional annotations, but instead of using conditional annotations for CSS, conditional annotations are used for html tags to introduce different class to distinguish between different IE and other browsers. For example:

The code is as follows:

Then add the corresponding class to the CSS for a specific IE and write it in a normal CSS file. For example, the above example can be written in the CSS file:

The code is as follows:

.ie6 .demo {margin-left: 20px;}

This method absorbs the benefits of conditional annotation expressions without generating redundant HTTP requests, just because these IE-specific CSS are put together with ordinary CSS, that is, not the corresponding IE will also be loaded, so if the number of CSS is relatively large, it will be as wasteful as using hacks, and developers need to choose the method according to the specific situation.

At this point, I believe that you have a deeper understanding of "what are the methods for IE browsers to write CSS style alone?" you might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.