Why does only CSS recognized by IE exist?

In recent years, with the continuous updating and upgrading of browser technology, Web front-end development has become more and more convenient and open. However, there are still some older browsers that cannot handle new web technologies efficiently.

One of the most frequently mentioned problems is that only the IE (Internet Explorer) browser specifically handles CSS properties and selectors. Such CSS styles are called "IE-only CSS" because they only work on IE browsers.

In this article, we will discuss these CSS properties and selectors that are only recognized by IE, and explore why they exist and how to deal with them in modern web development.

1. Why only CSS recognized by IE exists?

In the early days of web front-end development, IE was one of the most popular browsers. At that time, developers would use IE-specific CSS styles to ensure that their websites displayed correctly on IE.

As time went on, other browsers became popular, such as Chrome, Safari, and Firefox, and they all began to support new CSS properties and selectors, giving developers more control over the appearance of the website. and feeling. However, Internet Explorer appears to have been abandoned, and developers have had to continue using old CSS styles to ensure their sites function properly on IE.

The CSS properties and selectors recognized by IE could be considered a stopgap measure for developers to solve problems at that time, but now they have become a problem for developers.

2. CSS properties that are only recognized by IE

The following are some CSS properties that are only recognized by IE. The use of these properties is obsolete and developers should try to avoid using them:

2.1. filter attribute

The filter attribute is a CSS attribute recognized only by IE browser and is used to apply one or more graphic effects, such as blur, bright and shadow. These effects can be achieved through the CSS filter function, which can also be used in other browsers.

However, in IE 8 and IE 9 browsers, the filter attribute can apply multiple effects, which is not possible in other browsers. For example:

.div {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#000000');
    filter:alpha(opacity=50);
}

The filter attribute here applies two effects: one is a gradient background, and the other is opacity. In IE 8 and IE 9 browsers both effects will work, but in other browsers only the first effect will be applied.

So, if you have to use filter effects in IE 8 and IE 9 browsers, you need to use the filter attribute, but filter effects in other browsers should use the CSS filter function.

2.2. -ms-interpolation-mode attribute

-ms-interpolation-mode attribute is a CSS attribute only recognized by IE browser, used to control the rendering method of images. It can take values ​​of nearest-neighbor, bicubic, or bilinear, which can improve or damage the quality of the image.

However, this CSS property is only useful in IE 8 browsers, other browsers ignore it. In modern web development, it is generally no longer necessary to use this property, as new CSS technologies provide greater control over how images are rendered.

2.3. writing-mode attribute

The writing-mode attribute is a CSS attribute recognized only by IE browser and is used to change the direction of text in the page. It can be set to have a top-to-bottom or left-to-right orientation, and you can also set the text direction to be vertical or horizontal.

However, this CSS property does not work in other browsers. In modern web development, it is recommended to use the new flexbox and grid layout technologies instead of the writing-mode attribute.

3. CSS selectors that are only recognized by IE

The following are some CSS selectors that are only recognized by IE. These selectors are now obsolete and developers should try to avoid using them:

3.1. * HTML selector

• HTML selector is a CSS selector recognized only by IE browser, used to match elements with HTML root elements when selecting them. In this selector, the "*" symbol represents all elements.

For example:

* html body {
    font-size: 14px;
}

This means that this CSS style is applied to all body elements under the HTML root element.

However, this selector is not supported in other browsers, but a regular descendant selector can be used to achieve the same effect.

3.2. :first-child selector

:The first-child selector is a CSS selector recognized only by IE browser, used to select the first child element of an element .

For example:

div:first-child {
    font-size: 16px;
}

This means that this CSS style is applied to all Div elements that are the first child element under the parent element.

However, in IE 7 and earlier, this selector is different from the pseudo-element: first-child. In IE 7 and earlier this selector only selects the first child element, while in other browsers it does select the first child element.

Therefore, in modern web development, we recommend using the descendant selector: first-child instead of this selector.

4. How to deal with CSS that is only recognized by IE?

While CSS properties and selectors that are only recognized by IE are less common in modern web development, they can still be useful on older browsers such as IE 8 and IE 9.

To ensure that websites display correctly on these older browsers, developers can use conditional comments to provide different CSS styles for different IE browsers.

For example, the following are conditional comments that provide specific CSS styles for IE 8 and IE 9 browsers:

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
 
<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->

在这里，如果浏览器是IE 8或IE 9，则加载ie8.css或ie9.css。这使开发人员可以针对不同的浏览器提供不同的CSS样式。

5. 结论

只有IE识别的CSS属性和选择器在现代Web开发中已过时，但仍然有用于旧的IE浏览器。开发人员应该避免使用它们，并使用现代的CSS技术来实现相同的效果。

如果确实需要在旧版本的IE浏览器中使用这些CSS属性和选择器，则可以使用条件注释和IE特定的CSS样式来为不同的浏览器提供不同的CSS效果。

在Web开发中，我们必须始终记住，我们的目标是提供良好的用户体验，为此，我们应该遵循最佳实践，为不同的浏览器提供最佳的CSS样式。通过了解只有IE识别的CSS，我们可以更好地处理它们，确保我们的网站在所有浏览器中都能正确显示。

The above is the detailed content of Why does only CSS recognized by IE exist?. For more information, please follow other related articles on the PHP Chinese website!