Warum gibt es nur CSS, das vom IE erkannt wird?

PHPz

Freigeben： 2023-04-23 13:44:45

Original

585 Leute haben es durchsucht

In den letzten Jahren ist die Web-Frontend-Entwicklung durch die kontinuierliche Aktualisierung und Aktualisierung der Browsertechnologie immer komfortabler und offener geworden. Allerdings gibt es immer noch einige ältere Browser, die mit neuen Webtechnologien nicht effizient umgehen können.

Eines der am häufigsten genannten Probleme ist, dass nur der IE-Browser (Internet Explorer) speziell CSS-Eigenschaften und -Selektoren verarbeitet. Solche CSS-Stile werden „IE-only CSS“ genannt, da sie nur auf IE-Browsern funktionieren.

In diesem Artikel besprechen wir diese CSS-Eigenschaften und -Selektoren, die nur vom IE erkannt werden, und untersuchen, warum sie existieren und wie man in der modernen Webentwicklung mit ihnen umgeht.

1. Warum wird nur CSS vom IE erkannt?

In den Anfängen der Web-Frontend-Entwicklung war der IE einer der beliebtesten Browser. Damals verwendeten Entwickler IE-spezifische CSS-Stile, um sicherzustellen, dass ihre Websites im IE korrekt angezeigt wurden.

Mit der Zeit wurden andere Browser populär, wie Chrome, Safari und Firefox, und alle begannen, neue CSS-Eigenschaften und -Selektoren zu unterstützen, was Entwicklern mehr Kontrolle über das Erscheinungsbild der Website gab. Allerdings scheint der Internet Explorer aufgegeben worden zu sein, und Entwickler mussten weiterhin alte CSS-Stile verwenden, um sicherzustellen, dass ihre Websites im IE ordnungsgemäß funktionieren.

Die vom IE erkannten CSS-Eigenschaften und -Selektoren konnten damals als Notlösung für Entwickler angesehen werden, um das Problem zu lösen, aber jetzt sind sie zu einem Problem für Entwickler geworden.

2. CSS-Eigenschaften, die nur vom IE erkannt werden

Die Verwendung dieser Eigenschaften ist veraltet und Entwickler sollten es versuchen um deren Verwendung zu vermeiden:# 🎜🎜#

2.1. Filterattribut

Das Filterattribut ist ein CSS-Attribut, das nur vom IE-Browser erkannt wird und zum Anwenden eines oder mehrerer Grafikeffekte verwendet wird. wie Unschärfe, Helligkeit und Schatten. Diese Effekte lassen sich durch die CSS-Filterfunktion erzielen, die auch in anderen Browsern genutzt werden kann.

In den Browsern IE 8 und IE 9 kann das Filterattribut jedoch mehrere Effekte anwenden, was in anderen Browsern nicht möglich ist. Beispiel:

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

Nach dem Login kopieren

Das Filterattribut wendet hier zwei Effekte an: einer ist ein Hintergrund mit Farbverlauf und der andere ist Deckkraft. In den Browsern IE 8 und IE 9 funktionieren beide Effekte, in anderen Browsern wird jedoch nur der erste Effekt angewendet.

Wenn Sie also Filtereffekte in den Browsern IE 8 und IE 9 verwenden müssen, müssen Sie das Filterattribut verwenden, Filtereffekte in anderen Browsern sollten jedoch die CSS-Filterfunktion verwenden.

2.2. -ms-interpolation-mode-Attribut

-ms-interpolation-mode-Attribut ist ein CSS-Attribut, das nur vom IE-Browser erkannt wird und zur Steuerung der Darstellung von Bildern verwendet wird . Es kann die Werte „Nächster Nachbar“, „Bikubisch“ oder „Bilinear“ annehmen, was die Bildqualität verbessern oder beeinträchtigen kann.

Diese CSS-Eigenschaft ist jedoch nur im IE 8-Browser nützlich, andere Browser ignorieren sie. In der modernen Webentwicklung ist die Verwendung dieser Eigenschaft im Allgemeinen nicht mehr erforderlich, da neue CSS-Technologien eine bessere Kontrolle über die Darstellung von Bildern ermöglichen.

2.3. Schreibmodus-Attribut

Das Schreibmodus-Attribut ist ein CSS-Attribut, das nur vom IE-Browser erkannt wird und zum Ändern der Textrichtung auf der Seite verwendet wird . Die Ausrichtung kann von oben nach unten oder von links nach rechts erfolgen. Außerdem können Sie die Textausrichtung auf vertikal oder horizontal festlegen.

Allerdings funktioniert diese CSS-Eigenschaft nicht in anderen Browsern. In der modernen Webentwicklung wird empfohlen, anstelle des Schreibmodus-Attributs die neuen Flexbox- und Grid-Layout-Technologien zu verwenden.

3. CSS-Selektoren, die nur vom IE erkannt werden

Die folgenden CSS-Selektoren sind mittlerweile veraltet und Entwickler sollten versuchen, sie zu vermeiden Verwendung:

3.1. *HTML-Selektor

Zum Beispiel:

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

Nach dem Login kopieren

Das bedeutet, dass dieser CSS-Stil auf alle Body-Elemente unter dem HTML-Root-Element angewendet wird.

Dieser Selektor wird jedoch in anderen Browsern nicht unterstützt, Sie können jedoch reguläre Nachkommenselektoren verwenden, um den gleichen Effekt zu erzielen.

3.2. :First-Child-Selektor

: Der First-Child-Selektor ist ein CSS-Selektor, der nur vom IE-Browser erkannt wird und zum Auswählen des ersten Elements eines Elements verwendet wird untergeordnetes Element.

Zum Beispiel:

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

Nach dem Login kopieren

Das bedeutet, dass dieser CSS-Stil auf alle Div-Elemente angewendet wird, die das erste untergeordnete Element unter dem übergeordneten Element sind.

In IE 7 und früher unterscheidet sich dieser Selektor jedoch vom Pseudoelement :first-child. In IE 7 und früheren Versionen wählt dieser Selektor nur das erste untergeordnete Element aus, während er in anderen Browsern das erste untergeordnete Element auswählt.

Daher empfehlen wir in der modernen Webentwicklung die Verwendung des Descendent-Selektors: First-Child anstelle dieses Selektors.

4. Wie gehe ich mit CSS um, das nur vom IE erkannt wird?

Während CSS-Eigenschaften und -Selektoren, die nur vom IE erkannt werden, in der modernen Webentwicklung weniger verbreitet sind, sind sie in älteren Browsern wie IE 8 und IE 9 immer noch nützlich.

Um sicherzustellen, dass die Website in diesen älteren Browsern korrekt angezeigt wird, können Entwickler bedingte Kommentare verwenden, um unterschiedliche CSS-Stile für verschiedene IE-Browser bereitzustellen.

Hier finden Sie beispielsweise bedingte Kommentare, die bestimmte CSS-Stile für die Browser IE 8 und IE 9 bereitstellen:

<!--[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]-->

Nach dem Login kopieren

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

5. 结论

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

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

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

Das obige ist der detaillierte Inhalt vonWarum gibt es nur CSS, das vom IE erkannt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!