Pourquoi seul le CSS reconnu par IE existe-t-il ?

Ces dernières années, avec la mise à jour et la mise à niveau continues de la technologie des navigateurs, le développement frontal Web est devenu de plus en plus pratique et ouvert. Cependant, certains navigateurs plus anciens ne peuvent toujours pas gérer efficacement les nouvelles technologies Web.

L'un des problèmes les plus fréquemment mentionnés est que seul le navigateur IE (Internet Explorer) gère spécifiquement les propriétés et les sélecteurs CSS. De tels styles CSS sont appelés « CSS IE uniquement » car ils ne fonctionnent que sur les navigateurs IE.

Dans cet article, nous discuterons de ces propriétés et sélecteurs CSS qui ne sont reconnus que par IE, et explorerons pourquoi ils existent et comment les gérer dans le développement Web moderne.

1. Pourquoi seul CSS est-il reconnu par IE ?

Au début du développement Web front-end, IE était l'un des navigateurs les plus populaires. À cette époque, les développeurs utilisaient des styles CSS spécifiques à IE pour garantir que leurs sites Web s'affichaient correctement sur IE.

Au fil du temps, d'autres navigateurs sont devenus populaires, tels que Chrome, Safari et Firefox, et ils ont tous commencé à prendre en charge de nouvelles propriétés et sélecteurs CSS, donnant aux développeurs plus de contrôle sur l'apparence de leurs sites Web. Cependant, Internet Explorer semble avoir été abandonné et les développeurs ont dû continuer à utiliser d'anciens styles CSS pour garantir le bon fonctionnement de leurs sites sur IE.

Les propriétés et sélecteurs CSS reconnus par IE pourraient être considérés comme une solution provisoire pour les développeurs pour résoudre le problème à ce moment-là, mais ils sont maintenant devenus un problème difficile pour les développeurs.

2. Propriétés CSS qui ne sont reconnues que par IE

Voici quelques propriétés CSS qui ne sont reconnues que par IE. L'utilisation de ces propriétés est obsolète et les développeurs doivent essayer d'éviter de les utiliser :

2.1.

L'attribut filter est une propriété CSS reconnue uniquement par Internet Explorer et utilisée pour appliquer un ou plusieurs effets graphiques tels que le flou, la lumière et l'ombre. Ces effets peuvent être obtenus grâce à la fonction de filtre CSS, qui peut également être utilisée dans d'autres navigateurs.

Cependant, dans les navigateurs IE 8 et IE 9, l'attribut filter peut appliquer plusieurs effets, ce qui n'est pas possible dans d'autres navigateurs. Par exemple :

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

L'attribut filtre applique ici deux effets : l'un est un arrière-plan dégradé et l'autre est l'opacité. Dans les navigateurs IE 8 et IE 9, les deux effets fonctionneront, mais dans les autres navigateurs, seul le premier effet sera appliqué.

Donc, si vous devez utiliser des effets de filtre dans les navigateurs IE 8 et IE 9, vous devez utiliser l'attribut filter, mais les effets de filtre dans d'autres navigateurs doivent utiliser la fonction de filtre CSS.

2.2. Attribut -ms-interpolation-mode

-ms-interpolation-mode attribut est un attribut CSS uniquement reconnu par le navigateur IE, utilisé pour contrôler la méthode de rendu des images. Il peut prendre des valeurs de voisin le plus proche, bicubique ou bilinéaire, ce qui peut améliorer ou endommager la qualité de l'image.

Cependant, cette propriété CSS n'est utile que dans le navigateur IE 8, les autres navigateurs l'ignorent. Dans le développement Web moderne, il n'est généralement plus nécessaire d'utiliser cette propriété, car les nouvelles technologies CSS offrent un meilleur contrôle sur la façon dont les images sont rendues.

2.3. Attribut writing-mode

L'attribut writing-mode est un attribut CSS qui n'est reconnu que par le navigateur IE et est utilisé pour changer la direction du texte dans la page. Il peut être configuré pour avoir une orientation de haut en bas ou de gauche à droite, et vous pouvez également définir la direction du texte pour qu'elle soit verticale ou horizontale.

Cependant, cette propriété CSS ne fonctionne pas dans les autres navigateurs. Dans le développement Web moderne, il est recommandé d'utiliser les nouvelles technologies de mise en page flexbox et grille au lieu de l'attribut writing-mode.

3. Sélecteurs CSS reconnus uniquement par IE

Voici quelques sélecteurs CSS reconnus uniquement par IE. Ces sélecteurs sont désormais obsolètes et les développeurs devraient essayer d'éviter de les utiliser :

3.1 * Sélecteurs HTML

.

Le sélecteur HTML est un sélecteur CSS reconnu uniquement par Internet Explorer et permet de faire correspondre un élément à l'élément racine HTML lors de sa sélection. Dans ce sélecteur, le symbole "*" représente tous les éléments.

Par exemple :

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

Cela signifie que ce style CSS est appliqué à tous les éléments de corps sous l'élément racine HTML.

Cependant, ce sélecteur n'est pas pris en charge dans d'autres navigateurs, mais vous pouvez utiliser des sélecteurs descendants classiques pour obtenir le même effet.

3.2. :sélecteur de premier enfant

 : Le sélecteur de premier enfant est un sélecteur CSS reconnu uniquement par le navigateur IE et est utilisé pour sélectionner le premier élément enfant d'un élément.

Exemple :

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

Cela signifie que ce style CSS est appliqué à tous les éléments Div qui sont le premier élément enfant sous l'élément parent.

Cependant, dans IE 7 et versions antérieures, ce sélecteur est différent du pseudo-élément :first-child. Dans IE 7 et versions antérieures, ce sélecteur sélectionne uniquement le premier élément enfant, tandis que dans d'autres navigateurs, il sélectionne le premier élément enfant.

Par conséquent, dans le développement Web moderne, nous recommandons d'utiliser le sélecteur descendant : premier enfant au lieu de ce sélecteur.

4. Comment gérer les CSS qui ne sont reconnus que par IE ?

Bien que les propriétés et les sélecteurs CSS qui ne sont reconnus que par IE soient moins courants dans le développement Web moderne, ils peuvent toujours être utiles sur les navigateurs plus anciens comme IE 8 et IE 9.

Pour garantir que le site Web s'affiche correctement sur ces anciens navigateurs, les développeurs peuvent utiliser des commentaires conditionnels pour fournir différents styles CSS pour différents navigateurs IE.

Par exemple, voici des commentaires conditionnels qui fournissent un style CSS spécifique pour les navigateurs IE 8 et IE 9 :

<!--[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，我们可以更好地处理它们，确保我们的网站在所有浏览器中都能正确显示。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!