CSS 3 is not fully compatible with IE, and iecss3 is fully compatible.

CSS 3 is not fully compatible with IE, and iecss3 is fully compatible.

Address: http://www.phpthinking.com/archives/367

Up to Internet Explorer 8, the IE series does not support CSS3. To do some common effects such as rounded corners and shadows in IE, you need to use redundant and meaningless elements and images to make these effects. After getting tired of this, I want to solve these problems with a more concise, effective, and css3. Fortunately, even the criticized Internet Explorer is powerful enough. The technology unique to IE can achieve some good CSS3 effects.

Opacity transparency

The transparency of elements can be easily achieved using filters in IE.

1	background-color:green;

2	opacity: .4;

3	filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

Border-radius rounded corner/Box Shadow/Text Shadow

In IE, Vector Markup Language (VML) and javascript can be used to achieve these effects. After referencing an HTC file, these three CSS3 attributes can be used in IE.

1	-moz-border-radius: 15px; /* Firefox */

2	-webkit-border-radius: 15px; /* Safari 、Chrome */

3	border-radius: 15px; /* Opera 10.5 +, IE6 + use IE-CSS3 */

4	-moz-box-shadow: 5px 5px 5px #000; /* Firefox */

5	-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */

6	box-shadow: 5px 5px 50px #000; /* Opera 10.5 +, IE6 + use IE-CSS3 */

7	behavior: url(ie-css3.htc); /* Reference ie-css3.htc */

In fact, there is a filter in IE to implement shadow and drop-shadow effects.

Shadow produces continuous and gradient shadows.

1	filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);

The shadow generated by drop-shadow does not have any variation in light and shade.

1	filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1");

The filter seems to conflict with the existing htc script, or it can be called a feature: when both are enabled on an element at the same time, the filter effect will be transferred to its child element.

Gradients gradient

IE provides a simple gradient Filter

1	background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */

2	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */

3	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6+ */

It's easy to implement the gradient in IE

RGBA transparency color background

The gradient filter supports the RGBA color. The first two values of startColorStr and EndColorStr are Alpha channel values. When using the alpha channel to simulate the RGBA color background, remove the background-color attribute.

1	background-color: rgba(0, 255, 0, 0.6); /* FF3+, Saf3+,Opera 10.10+, Chrome */

2	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#9900FF00',EndColorStr='#9900FF00'); /* IE6+*/

Multiple Backgrounds multi-background image

In browsers that support multiple background images in CSS3, you can use the following statement to implement multiple background images:

1	background: url(bg-image-1.gif) center center no-repeat, url(bg-image-2.gif) top left;

To implement multi-background images in IE, add the following code to the separate IE hack style sheet:

1	background: transparent url(bg-image-1.gif) top left repeat;

2	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bg-image-2.gif', sizingMethod='crop'); /* IE6+ */

Multiple backgrounds of CSS3 browsers

Multiple IE backgrounds

Tranformations/rotate rotation element

There are two filters in IE that can be used to rotate elements, BasicImage and Matrix. The former is simple and convenient, but can only be used to rotate 90 * n (nε {1, 2, 3, 4}) degrees; matrix filters are powerful, but parameters are complex.

1	-moz-transform: rotate(180deg); /* FF3.5+ */

2	-o-transform: rotate(180deg); /* Opera 10.5 */

3	-webkit-transform: rotate(180deg); /* Saf3.1+, Chrome */

4	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

5	filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-1, M12=-1.2246063538223772e-16, M21=1.2246063538223772e-16, M22=-1);

It's easy to rotate

@ Font-face server font

Considering the font size of Chinese characters, this CSS3 feature is not practical.

1	font-family:'webFont';

2	src:url('myfont.eot');/*IE6+*/

3	src:local('fontname'),/* Font name */

4	url('myfont.woff') format('woff'),/*FF3.6*/

5	url('myfont.ttf') format('truetype');/*saf3+,chrome,FF3.5,opera10+*/

After the font is declared and referenced, you can use the font-family Field elsewhere on the webpage.

You can enable multiple filters on the same element, for example:

1	filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=5)progid:DXImageTransform.Microsoft.Alpha(opacity=40);

Although some effects of imitating CSS3 with filters are not perfect, in some cases, using these technologies can make our code more concise and unified.

How to Use css3 compatible with IE and other browsers

I just saw an article on Baidu [enable the Internet Explorer 6, Internet Explorer 7, and Internet Explorer to support CSS3 attributes] In the HACK method, because the link cannot be added, so you can search for this title on Baidu.

What Should CSS3 do for browsers that are not applicable?

Currently, mainstream browsers support CSS3 in sequence: Chrome, safari, firefox, opera & IE9, firefox, and even CSS3 selectors are not all supported, while others support it. Apart from Chrome & safari, others have limited support for reflection, flip, and other styles. opera does not even support gradient and transform animations of background colors ). IE6 \ 7 \ 8 should not be too extravagant, even if part of IE8 that supports CSS3 is less than 1/10.

CSS3 is equivalent to a set of style sheet definitions written casually on unsupported browsers: div {haha: huhu;}, which does not affect the page style.

There is nothing to do if it is not supported. For corner, reflection, tilt (rotation), and other definitions in CSS3, it is usually replaced by a background image in an unsupported browser. Animation and other effects can only be implemented using javascript.