Comment obtenir la compatibilité entre navigateurs pour les dégradés linéaires en CSS3 ?

Prise en charge multi-navigateurs des dégradés linéaires en CSS3

Énoncé du problème

Dans le paysage actuel du développement Web, la compatibilité entre navigateurs est primordiale. Pour obtenir des effets de dégradé cohérents sur tous les navigateurs, les développeurs peuvent rencontrer des difficultés avec des fonctionnalités spécifiques. Cet article explore l'implémentation des dégradés linéaires dans CSS3 pour Opera et Internet Explorer.

Alternatives de navigateur

Pour Opera et IE, le code équivalent pour les dégradés d'arrière-plan utilisant les préfixes des fournisseurs est :

background-image: -ms-linear-gradient(right, #0c93C0, #FFF);
background-image: -o-linear-gradient(right, #0c93C0, #FFF);

Dégradés horizontaux

Pour créer un dégradé horizontal, modifiez la syntaxe comme suit :

background-image: -webkit-linear-gradient(left, #0C93C0, #FFF);
background-image:    -moz-linear-gradient(left, #0C93C0, #FFF);

Explication du préfixe

Les propriétés CSS expérimentales sont préfixées pour indiquer la compatibilité avec des navigateurs spécifiques :

• -webkit- pour les navigateurs Webkit (Chrome, Safari )
• -moz- pour Firefox
• -o- pour Opera
• -ms- pour Internet Explorer
• Aucun préfixe pour l'implémentation standard

Support Internet Explorer

Pour les versions d'IE inférieures à 10, utilisez le syntaxe suivante :

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

Explication de la syntaxe

Le La syntaxe -ms-filter pour IE est la suivante :

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
     startColorStr='#0c93c0', /*Start color*/
     endColorStr='#FFFFFF',   /*End color*/
     GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

Le format de couleur ARGB peut être utilisé à la place du RGB HEX. GradientType est facultatif et ne respecte pas la casse.

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!