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

This article mainly introduces "how to achieve downward compatibility with CSS". In daily operation, I believe many people have doubts about how to achieve downward compatibility with CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to achieve downward compatibility with CSS". Next, please follow the editor to study!

Skillfully using browser CSS attribute values to achieve backward compatibility

There are many good features in CSS3, such as box-shadow box shadow, but the only problem is that IE8 browsers do not support it. If it is an external PC site, then IE8 browsers can not ignore it, especially some sites with a wide audience.

What should I do? What I often do is that IE9+ browsers use box-shadow shadows and IE7,IE8 browsers use border wireframes.

For example, the following screenshot effect:

That is, to adopt different strategies for different browsers, our first response is to adopt some CSS hack techniques. For example, here, we want to distinguish between IE9+ browsers and IE8- browsers, which is not difficult. We can use: root pseudo-class. In IE9+ browsers,: root is actually equivalent to html, so we all do this:

.box {border: 1px solid # ddd;}: root box {border: 0 none; box-shadow: 0 1px 3px rgba;}

From the function to meet our development needs, most of the partners will stop at this time. In fact, we can do better.

A big problem with the above CSS hack technique is that when we use different CSS declarations for IE9+ browsers, we inadvertently increase the weight of these CSS declarations. This can easily increase the complexity of our CSS code, for example, we often encounter later styles that need to override the previous ones, because: root .box increases the weight, our later styles want to cover, we need more weight to deal with, obviously, the code is verbose.

In fact, we have a good compatibility differentiation strategy, that is to make full use of the browser's support for the CSS attribute itself to achieve browser compatibility differentiation, rather than through the traditional selector or some query statements.

Take our box shadows and borders here as an example. If I implemented it, it would look like this:

.box {box-shadow: 0 1px 3px rgba; border: 1px solid # d0d0d5; border: 0 rgba;}

It's easy to make IE9+ browsers without borders, as long as you use a writing form that only IE9+ knows without borders. Although border is recognized by all browsers, rgba color values are only supported by IE9+ browsers, so we can skillfully take advantage of the fact that IE8- browsers do not recognize rgba color values to achieve our backward compatibility.

Because IE8 browsers do not recognize rgba color representations, the following writing is illegal and will be ignored in IE8's eyes:

Border: 0 rgba (0pc0pl 0pg.2)

This kind of processing technique is what this article wants to say, using the incompatibility of the browser itself to achieve our downward compatibility effect.

The example inside, in theory, can also achieve our effect by using rgba directly. One character is missing, which would have been good. However, if you write border: 0 rgba in Sass, it will be self-righteously compiled by Sass into border: 0 transparent, damn it, this is 108000 miles short, although it is a thing to see that rgba and transparent are a thing, both are transparent, but for the border attribute, rgba can only be recognized by the IE7 browser, transparent from the IE7 browser to recognize. As a result, under the IE7,IE8 browser, the frame that would have appeared was killed directly, and the proper bug ah! In order to avoid this speechless problem, rgba is used.

The above example is demo, you can click here: CSS box shadow and border down compatible demo

There are many examples of backward compatibility using similar attribute value compatibility.

Try CSS3 calc () for all numerical compatibility.

For example, for the above example of IE9+ de-bounding, you can also try this:

.box {box-shadow: 0 1px 3px rgba; border: 1px solid # d0d0d5; border: calc (0px + 0px) # 000;}

Because CSS3 calc () calculates IE9+ browsers begin to support it.

Background picture can try background multiple backgrounds.

This kind of background image compatibility processing is actually very common, especially if you are a partner who likes SVG. We can use SVG graphics as the background, so that the retina display will rub well, but there is a problem with SVG, that is, the IE8 browser does not support it, what to do? IE8 browsers use traditional images, and only need 1-fold image, and only 1-fold image, because, I believe, there is no such thing as a user whose device is a retina screen, but also uses an IE8 browser to surf the Internet.

Here is an IE8 browser downwards compatible with the use of images processing problem, we are all background images, how to deal with it? So distressing ~ ~

Haha, don't worry. Although background attributes are supported, not all browsers support background attribute values and some syntax. For example, multiple backgrounds are only supported by IE9 browsers, so we can deal with them like this:

.box {background: url (test.png); / * IE8 * / background: url (test.svg), none; / * IE9+ * /}

Basically, the compatibility of the above three attribute values can satisfy the distinction between most modern browsers and ordinary browsers. However, the above examples distinguish IE9 from other low-level browsers. Sometimes we want to distinguish IE10+ from other browsers. What should we do? You know, IE10+ 's selector hack is very difficult, but we do have some attribute values of hack that might be surprisingly useful.

Hack techniques for distinguishing the properties of IE10+ browsers

Through a classic case illustration, we all know that IE10+ began to support CSS3 animation animation, so the common loading effects in our web pages can be achieved with the help of CSS3 animation, with a static png picture, using CSS3 to keep rotating, the effect is achieved, and the effect is more delicate, ultra-small, and there is no white sawtooth, it can be described as the best choice.

The following figure shows the size comparison between the traditional git chart and the png rotation chart:

You can see that the size is not of the same order of magnitude at all.

CSS3 animation works well, but the biggest problem is that IE9 and the following browsers do not support it. In line with the principle of facing the future and letting users feel the best experience as far as possible, we will find a way to adopt a downward compatible implementation strategy, that is, the browser CSS3 that supports CSS3 animation to achieve loading effect, and if the browser does not support it, it will also use gif, so the difficulty of technical implementation has become how to distinguish between IE9 and IE10 browsers.

There are many ways to distinguish between IE9 and IE8, because it is a great change from CSS2 to CSS3, but it is a slight change from IE9 to IE10, so it is difficult. The interesting thing about CSS is that as long as you are smart enough, you can always dig up some small and beautiful processing skills.

Which CSS attributes are supported by IE10 but not supported by IE9? apart from transition and animation, that is, the background of gradient has changed gradually. Therefore, we can skillfully realize our compatibility effect with the help of multiple backgrounds. The core CSS code is as follows:

.box {background: url (loading_blue.gif) no-repeat center; background: url (loading_blue.png) no-repeat center, linear-gradient (to top, transparent, transparent); animation: spin 1s linear infinite;}

Although IE9 supports multiple backgrounds, because you don't know the gradient linear-gradient syntax, the following line background:... The CSS code IE9 is not recognized, so IE9 just wants the above loading_blue.gif to easily achieve the downward compatibility of the loading effect under CSS3 animation.

You can click here: CSS png animation rotation is compatible with demo.

Screenshot under Chrome browser:

It should be noted that the following background can only be background, although in theory it is possible to use background-image, but under the IE7,IE8 browser, if background-image is a thing that you do not know, they will not think that this line of CSS is invalid, but that there is something wrong with your background image, which will lead to the realization of gif loading images under the IE7,IE8 browser.

How to subtly hide elements in IE9 and its following browser versions

Recently I came across a project in which some graphic effects designed by designers are very suitable for drawing in CSS3, with a twill border effect, which leads to compatibility only with IE10,IE9 and below browsers or images.

The HTML of this example is more complex than the loading case above, because the graph is responsible, so there will be a lot of HTML content, but for IE9, these are not needed, because the background image only needs a layer of tags. So, there are two areas that need to be compatible: first, the IE10+ does not have a background image; second, all the child elements in the IE9- have no effect, such as hiding.

The first compatibility processing is easy, similar to the loading processing above:

.box {background: url (shape.png); background: linear-gradient (to top, transparent, transparent), none;}

What if the elements in the key are hidden? Are there any hidden attributes that IE10 knows and IE9 doesn't? I'm sorry, no, either I know them all, or I don't know them all. Is there no way to deal with it? Yes!

When we write CSS3 attributes, we habitually add private prefixes, although many attributes are no longer needed, such as:

.box {- webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite;}

This kind of private prefix writing is essentially the downward compatibility strategy of this article taking advantage of browser compatibility. Therefore, if the attributes between browsers support private prefixes, you can also take advantage of attribute compatibility to achieve downward compatibility.

There are actually few CSS attributes that need to be distinguished by private prefixes between IE9 and IE10, one of which is the transform attribute:

That is, in IE9 browsers, transform is not recognized without a private prefix. Well, we have an idea, and we can use transform to achieve our hiding effect.

The core CSS is as follows:

.box > div {position: relative; left:-999px; / * so the browser offsets the screen * / transform: translateX (999px); / * IE10+ position correction * /}

In theory, the above code will meet our needs. Note, however, that browsers that require private prefixes for transform are native IE9 browsers, and users must use the native version, so from the user's point of view, we're done here. However, our testing colleagues are probably looking at the downward compatibility mode of browsers such as IE11. You know, the transform of IE11 and IE9 can be recognized without the-ms- private prefix, and it is very likely that your implementation here will be reported to bug.

So, for security reasons, we need to do further processing on the above CSS, as follows:

.box > div {position: relative; left:-999px; / * so the browser offsets the screen * / transform: translate3d (999pxmemo 0); / * IE10+ position correction * /}

Hey, double insurance, even if non-native IE9 transform does not need the-ms- private prefix, 3D transform must not be recognized, so a perfect distinction between IE10 and IE9 hidden backward compatibility scheme is achieved.

At this point, the study on "how to achieve downward compatibility with CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.