CSS 3 in IE is not fully compatible

CSS 3 in IE is not fully compatible

 

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.