CSS3 Instance Tutorial: IE does not support special handling of CSS3 effects

Article Introduction: Transparency properties are a very common and popular attribute in CSS and are now widely supported by major browsers, but unfortunately IE6/7/8 does not support this attribute. Although IE does not support this CSS property, we can achieve the same effect by using the Filter filter property of IE specific.

Opacity Transparency

Transparency properties are a very common and popular attribute in CSS and are now widely supported by major browsers, but unfortunately IE6/7/8 does not support this attribute. Although IE does not support this CSS property, we can achieve the same effect by using the Filter filter property of IE specific.

Listing 1. Opacity code Example

opacity:0.4; /*chrome, Safari, Firefox, Opera * * filter:progid:DXImageTransform.Microsoft.Alpha (OPACITY=40);/* IE6/IE7/8 * -ms-filter: "Progid:DXImageTransform.Microsoft.Alpha (opacity=40)";/* IE8 *

As the preceding code shows, the first line uses the Opacity property in other browsers, and the second line uses the Filter property in the IE6/7/8 to set transparency; The third line is the new IE Filter property, which only works in IE8 and is ignored in other browsers, if not for IE8 settings, You can use the second line of code. The settings for the parameter are basically the same as the Opacity property in the CSS, and 0-100 is used in the IE filter to show transparency, so the opacity=40 is equivalent to the Opacity property of 0.4, which means transparency is 40%. There are two drawbacks to using this filter property: Because Microsoft-specific properties are used, your CSS is not validated, and the filter properties of IE allow all HTML child nodes to inherit this attribute.

Figure 1.IE Transparency demo in Browser

Border-radius Fillet effect

Fillet effect is another very common and popular effect in CSS3. It makes it harder for programmers to assemble many rounded images or use a lot of complex JavaScript to achieve the same effect. To a large extent, the rounded property simplifies the HTML code structure, while optimizing the display effect. However, this attribute is still not supported by IE full range browsers. Luckily, Remiz Rahnas used VML to write an HTC file to support the fillet effect for IE browsers.

Listing 2. Fillet code Example

-moz-border-radius:15px; /*firefox*/ -webkit-border-radius:15px/*safari, chrome*/ border-radius:15px,/*opera 10.5+, IE 6+*/ Behavior:url (IE-CSS3.HTC); /* Call script Add fillet effect * *

As shown in the code above, the use of fillet properties is consistent with the CSS fillet property, except that a Behavior:url (IE-CSS3.HTC) is added later. The Behavior property is only supported and recognized by the IE browser, and is used to tell IE to invoke the script to add rounded effects on the elements that have the style Class set. A concise code allows IE to support rounded corners without requiring you to maintain any additional code. But there are some drawbacks to this compromise: first, a HTC file needs to be introduced on the server side, which should not have much impact on server-side and client-side performance after gzip compression; second, it will make your CSS validation illegal; In addition, this script has a IE8 on the Some problems, it will make the Z-index value negative. So you need to be careful when you use it.

Figure 2.IE Fillet effect demo in browser

Box Shadow Boxes Shadow

Box shading is a useful attribute in another CSS3 that allows programmers to create a shadow element with a stereo effect by simply adding an attribute. This property is still not supported in IE full-range browsers, but IE provides filter properties for this effect, and as with the rounded corners above, we can do this with VML scripts.

The filter implementation code for listing 3.Box Shadow

-moz-box-shadow:2px 2px 3px #969696; * Firefox 3.5+ /-webkit-box-shadow:2px 2px 3px #969696;/* Safari and Chrome * * filter:progid:DXImageTransfor M.microsoft.shadow (color= "#969696", direction=145, strength=3);

The VML script implementation for listing 4.Box Shadow

-moz-box-shadow:2px 2px 3px #969696; /* Firefox /-webkit-box-shadow:2px 2px 3px #969696/* Safari and Chrome * * box-shadow:2px 2px 3px #969696; * Opera 10.5+, ie6+*/ behavior:url (IE-CSS3.HTC);/* Invoke script Add shadow effect * *

As shown in the above code, both of the above methods can achieve this effect. Note, however, that the IE filter effect syntax differs from the CSS3 property syntax in other browsers. It is therefore necessary for the developer to carefully debug so that it appears to have the same effect in different browsers.

Figure 3.IE Browser Box Shadow effect demo

Text Shadow

Text shading is popular not only in print but also in Web design. However, for the Text Shadow This property we are not so lucky, IE did not provide the corresponding filter effect, there is no ready-made VML script can be used. In the past Web development, we usually use pictures to achieve the effect of text shading. Kilian Valkhof to solve the problem of text shading under IE, and wrote a jQuery plugin.

The Text Shadow effect code is implemented in the listing 5.IE browser

Text-shadow: #aaa 5px 5px 8px; $ (document). Ready (function () { $ (". Text-shadow"). Textshadow (); });

As shown in the above code, we can use the text shadow effect in IE after downloading the JQuery core package and the Drop Shadow plugin. The Textshadow () method can also fill in a JavaScript object parameter, as shown in the following table:

Table 1.textShadow Property Parameter table

Property name	Type	Default value	Describe
Left	Integral type	4	Shadow Distance
Top	Integral type	4	Shadow Angle
Blur	Integral type	2	Shadow diffusion degree
Opacity	0-1 Decimal	0.5	Shadow Transparency
Color	Color values	Black	Font Shadow Color
Swap	Boolean	False	Do you want to wrap?

Figure 4.Text Shadow Demo diagram

Gradients Gradual discoloration

The gradients in the CSS3 provide a great convenience for the gradient background color, and we don't have to use a lot of small pictures for the gradient background color, and we don't have to do a lot of work to accommodate the browser resolution. Although IE does not support this property, we can still implement the effect by IE by using the Filter property.

In Listing 6.IE browser to implement gradients

Background-image:-moz-linear-gradient (Top, #81a8cb, #4477a1); /* Firefox 3.6/ background-image:-webkit-gradient (linear,left bottom,left top, color-stop (0, #4477a1), Color-stop (1, #81a8cb)); * Safari & Chrome * /Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= "#81a8cb", endcolorstr= "#4477a1"); * IE6 & IE7 /-ms-filter: "Progid:DXImageTransform.Microsofkt.gradient (gradienttype=0, startcolorstr= "#81a8cb", endcolorstr= "#4477a1") "; * IE8 * *

As shown in the above code, we can use IE's proprietary filters to achieve this effect. Where gradienttype can have two option values 0 and 1, representing horizontal and vertical gradients, respectively. StartColorStr and EndColorStr represent the color values of the beginning of the gradient and the ending color values respectively. Although the parameters and functions are not as much as the CSS3, they are sufficient for the general requirements. In addition, the Filter property is not the same syntax that is supported in IE6/7 and IE8, so we need to write different code to do the IE6/7 and IE8 compatibility processing.

Figure 5.IE Browser Fade Demo

RGBA Color

CSS3 provides another way to set the background transparency, which is the RGBA color. RGBA color allows developers to specify not only the values of R, G, and B three primary colors when specifying colors, but also the transparency of colors. This allows us to achieve the same transparent glass effect in the browser as Windows7, which greatly enhances the visual sensory experience of the WEB program. In IE full range of browsers still do not support RGBA color, we can only use the IE filter simulation to achieve this effect.

Listing 7.IE Browser RGBA color Implementation code

Background:rgba (km, 224,. 4); Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0, startcolorstr= "#886287a7", endcolorstr= "# 886287a7 ");

As shown in the above code, using the gradient filter in IE, you can simulate a RGBA color effect that is very similar to other browsers by changing the starting and ending color settings. In addition, in order to obtain a better transparent background in IE, using PNG image as a background image is also a good choice. But the disadvantage is that you have to deal with a lot of pictures, and in order to adapt to the picture background have to modify the structure of HTML.

Figure 6.IE Filter in browser implements RGBA color effect

Rotation rotation

In the latest Firefox and Webkit browsers, there are varying degrees of support for CSS3 deformation and animation effects. You can rotate, stretch, translate an HTML element to achieve the previous only use the stereo effect of the picture, you can also use CSS properties to achieve gorgeous fade in, fade and so on animation effect. At present, ie full range browser does not support this attribute, but few people know that using IE filters can achieve simple HTML element rotation effect.

Listing 8.IE implementation rotation in browser

-webkit-transform:rotate (90deg); -moz-transform:rotate (90deg); Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=1);

As the above code shows, the last line of code in IE to achieve the rotation effect. The options for the parameter rotation are 1, 2, 3, and four, which represent rotation 90 degrees, 180 degrees, 270 degrees, and 360 degrees respectively. Compared with the rotational 360-degree function in CSS3, the rotary filter function in IE is very limited, and the 90-degree rotation is difficult to meet the needs of developers.

In addition, dojo in the 1.5 version of the CSS3 in the transform properties of some support, including the matrix, rotate, skew, scale, translate and other functions. If you have CSS3 deformation requirements, you can refer to the use of dojo for this part of the function extension.

Listing 9. Use Dojo to set HTML element rotation

Dojox.html.ext-dojo.style ("transform", "Rotate (10deg)");

Figure 7.IE Browser Filter implements HTML element rotation

Summary

CSS3 has not yet been officially released, but individual browser vendors have started to support these new features in part. The support of these new features brings me a lot of surprises, making it easy for us to realize our unexpected gorgeous effects and simplify the code for many front-end implementations. But CSS3 has also brought us a lot of trouble, the various browser vendors to CSS3 standard support inconsistent, especially the maverick IE for developers to bring more trouble. In order to achieve the Cross-browser and display consistency of the WEB program, we have to spend a lot of time on debugging different browser differences. This paper gives a detailed introduction to the CSS3 effect that some IE does not support and the alternative scheme in IE browser. Hope for the vast number of developers in the future development work to provide a little enlightenment.