Table of Contents
1. Why only CSS recognized by IE exists?
2. CSS properties that are only recognized by IE
2.1. filter attribute
2.2. -ms-interpolation-mode attribute
2.3. writing-mode attribute
3. CSS selectors that are only recognized by IE
3.1. * HTML selector
3.2. :first-child selector
4. How to deal with CSS that is only recognized by IE?
5. 结论
Home Web Front-end Front-end Q&A Why does only CSS recognized by IE exist?

Why does only CSS recognized by IE exist?

Apr 23, 2023 am 10:07 AM

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);
}
Copy after login

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;
}
Copy after login

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;
}
Copy after login

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]-->
Copy after login

在这里,如果浏览器是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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What is useEffect? How do you use it to perform side effects? What is useEffect? How do you use it to perform side effects? Mar 19, 2025 pm 03:58 PM

The article discusses useEffect in React, a hook for managing side effects like data fetching and DOM manipulation in functional components. It explains usage, common side effects, and cleanup to prevent issues like memory leaks.

Explain the concept of lazy loading. Explain the concept of lazy loading. Mar 13, 2025 pm 07:47 PM

Lazy loading delays loading of content until needed, improving web performance and user experience by reducing initial load times and server load.

What are higher-order functions in JavaScript, and how can they be used to write more concise and reusable code? What are higher-order functions in JavaScript, and how can they be used to write more concise and reusable code? Mar 18, 2025 pm 01:44 PM

Higher-order functions in JavaScript enhance code conciseness, reusability, modularity, and performance through abstraction, common patterns, and optimization techniques.

How does currying work in JavaScript, and what are its benefits? How does currying work in JavaScript, and what are its benefits? Mar 18, 2025 pm 01:45 PM

The article discusses currying in JavaScript, a technique transforming multi-argument functions into single-argument function sequences. It explores currying's implementation, benefits like partial application, and practical uses, enhancing code read

How does the React reconciliation algorithm work? How does the React reconciliation algorithm work? Mar 18, 2025 pm 01:58 PM

The article explains React's reconciliation algorithm, which efficiently updates the DOM by comparing Virtual DOM trees. It discusses performance benefits, optimization techniques, and impacts on user experience.Character count: 159

What is useContext? How do you use it to share state between components? What is useContext? How do you use it to share state between components? Mar 19, 2025 pm 03:59 PM

The article explains useContext in React, which simplifies state management by avoiding prop drilling. It discusses benefits like centralized state and performance improvements through reduced re-renders.

How do you prevent default behavior in event handlers? How do you prevent default behavior in event handlers? Mar 19, 2025 pm 04:10 PM

Article discusses preventing default behavior in event handlers using preventDefault() method, its benefits like enhanced user experience, and potential issues like accessibility concerns.

What are the advantages and disadvantages of controlled and uncontrolled components? What are the advantages and disadvantages of controlled and uncontrolled components? Mar 19, 2025 pm 04:16 PM

The article discusses the advantages and disadvantages of controlled and uncontrolled components in React, focusing on aspects like predictability, performance, and use cases. It advises on factors to consider when choosing between them.

See all articles