Comment implémenter des dégradés dans Internet Explorer 9 et au-delà ?

Dégradés dans Internet Explorer 9 et au-delà

Dans le domaine du développement Web, les dégradés sont devenus indispensables pour créer des interfaces visuellement attrayantes et engageantes. Bien qu'Internet Explorer 9 soit désormais considéré comme un héritage, il reste un point de discorde concernant la prise en charge des dégradés.

Requête de préfixe de dégradé IE9

Un développeur a demandé des éclaircissements sur le préfixe du fournisseur pour dégradés dans IE9, exprimant une confusion sur l’utilisation de filtres propriétaires. Pour résoudre ce problème, nous nous tournons vers une implémentation complète du dégradé sur plusieurs navigateurs :

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

Dégradés de navigateur modernes

Cependant, à mesure que le développement Web progressait, IE10 a introduit un nouveau syntaxe dégradée, suivie d'implémentations similaires dans d'autres navigateurs majeurs. Voici un extrait de code mis à jour présentant la prise en charge du dégradé dans les navigateurs modernes :

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

Avec ce code mis à jour, vous pouvez obtenir un rendu de dégradé cohérent sur tous les principaux navigateurs, y compris IE10 et versions ultérieures. N'oubliez pas que les navigateurs modernes prennent également en charge l'utilisation des valeurs RVB/RGBA au lieu de la notation hexadécimale pour les définitions de couleurs.

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!