Explication détaillée de l'utilisation des propriétés spécifiques à Gecko de certaines propriétés avancées cachées dans CSS3

font-size-adjust

Cette propriété CSS3 utile n'est actuellement prise en charge que par Firefox. Nous pouvons l'utiliser pour définir la taille du texte (taille de police) d'un élément spécifié doit être relative à la hauteur des lettres minuscules (hauteur x) au lieu de la hauteur des lettres majuscules (hauteur des majuscules). Par exemple, Verdana est plus claire que la police Times du même modèle et sa hauteur x est plus courte. Pour pallier ce défaut, on peut utiliser la propriété font-size-adjust pour corriger cette dernière.

Cette propriété est utile pour les polices avec différentes hauteurs d'x. Même si vous veillez à utiliser des polices de petite taille, font-size-adjust peut fournir une solution lorsque des problèmes surviennent.

Exemple

Si pour une raison quelconque Verdana n'est pas installé sur l'ordinateur de l'utilisateur, Arial sera corrigé pour avoir le même rapport hauteur/largeur que Verdana (0,58).

   p {
font-family:Verdana, Arial, sans-serif;
font-size: 12px;
font-size-adjust: 0.58;
}

Support du navigateur : Gecko.

rendu d'image

Il y a quelques années, les images n'étaient pas affichées selon leur taille d'origine, mais par le concepteur Effectuer un zoom arrière. En fonction de la taille du zoom et du contexte, l'image peut ne pas s'afficher correctement dans le navigateur ou peut simplement être manquante. Les navigateurs disposent désormais de meilleurs algorithmes pour afficher les images mises à l'échelle, mais il serait bien d'avoir un contrôle total sur le comportement de vos images lorsqu'elles sont mises à l'échelle.

Cette propriété privée de Gecko est particulièrement utile si vos images ont des lignes nettes et que vous souhaitez qu'elles les conservent après la mise à l'échelle. La valeur pertinente est -moz-crisp-edges. Le même algorithme est utilisé dans optimiseSpeed, tandis que auto et optimiseQuality sont définis comme comportement standard (mettre à l'échelle les éléments avec la meilleure qualité possible). L'attribut de rendu d'image peut également être utilisé sur les éléments 39000f942b2545a5315c57fa3276f220 et 5ba626b379994d53f7acf72a64f9b697, tout comme il est utilisé sur les images d'arrière-plan. Il s'agit d'une propriété standard CSS3, mais actuellement uniquement prise en charge par Firefox.

Il convient de noter que -ms-interpolation-mode: bicubic, bien qu'il s'agisse d'une propriété spécifique à IE. Cependant, Internet Explorer 7 restitue l'image avec une qualité supérieure après l'avoir mise à l'échelle. Étant donné que ce navigateur gère mal les choses par défaut, cet attribut peut être utile.

Prise en charge du navigateur : Gecko.

-moz-border-top-colors

Cet attribut peut être classé comme « bonbons pour les yeux ». Il vous permet de définir différentes couleurs de bordure lorsque la largeur de la bordure est supérieure à 1 px. Bien sûr, -moz-border-bottom-colors, -moz-border-left-colors et -moz-border-right-colors sont également disponibles.

Malheureusement, il n'y a pas d'abréviation pour -moz-border-colors, donc chaque bordure doit être définie séparément. Dans le même temps, la largeur de la bordure doit être cohérente avec le nombre de couleurs donné, sinon la dernière valeur de couleur remplira la largeur restante.

Exemple

Dans cet exemple, les bordures gauche et droite de l'élément seront orange standard, et le haut et le bas auront une couleur de type dégradé - rouge, jaune et bleu.

div {
border: 3px solid orange;
-moz-border-top-colors: red yellow blue;
-moz-border-bottom-colors: red yellow blue;
}

Support du navigateur : Gecko.

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!