Améliorations des gradients CSS: la syntaxe à double position simplifie les rayures du gradient

Il y en a un dans la liste des fonctions de polyfill coniques de Lea Verou qui ont attiré mon attention:

Prend en charge la syntaxe à double position (le même point d'arrêt de couleur utilise deux positions comme raccourcis pour deux points d'arrêt de couleur consécutifs avec la même couleur)

étonnamment, j'ai récemment découvert que la plupart des gens ne savent même pas que la syntaxe à deux positions de points d'arrêt de gradient existe réellement dans la spécification, j'ai donc décidé d'écrire un article à ce sujet.

Selon la spécification:

La spécification de deux positions facilite la création de "rayures" de couleur unie dans un gradient sans avoir à répéter la couleur deux fois.

Je suis totalement d'accord que c'est la première chose qui me vient à l'esprit lorsque je comprends cette fonctionnalité.

Supposons que nous voulons obtenir le résultat suivant: Un dégradé avec de nombreuses bandes verticales de largeur égale (je l'ai obtenu du post précédent de Chris):

Les valeurs hexadécimales sont: # 5461C8, # C724B1, # E4002B, # FF6900, # F6BE00, # 97D700, # 00AB84 et # 00A3E0.

Voyons d'abord comment y parvenir en utilisant CSS sans utiliser la position du point d'arrêt double!

Nous avons huit rayures, dont chacune représente un huitième de la largeur du gradient. Un huitième de 100% est de 12,5%, nous passons donc d'une bande à l'autre en multiples de cette valeur.

Cela signifie que notre linéaire-gradient () ressemble à ceci:

 <code>linear-gradient(90deg, #5461c8 12.5% /* 1*12.5% */, #c724b1 0, #c724b1 25% /* 2*12.5% */, #e4002b 0, #e4002b 37.5% /* 3*12.5% */, #ff6900 0, #ff6900 50% /* 4*12.5% */, #f6be00 0, #f6be00 62.5% /* 5*12.5% */, #97d700 0, #97d700 75% /* 6*12.5% */, #00ab84 0, #00ab84 87.5% /* 7*12.5% */, #00a3e0 0)</code>

Notez que nous n'avons pas besoin de répéter la valeur en pourcentage de la position d'arrêt, car nous effectuons automatiquement une transition nette chaque fois que la position d'arrêt est plus petite que la position précédente. C'est pourquoi il est toujours possible d'utiliser 0 (il est toujours inférieur à toute valeur positive) et d'utiliser # C724B1 25%, # E4002B 0 au lieu de # C724B1 25%, # E4002B 25%, par exemple. Si nous décidons d'ajouter deux rayures et de régler la position d'arrêt sur un multiple de 10%, cela peut nous faciliter la vie à l'avenir.

Pas mal, surtout par rapport au code que les générateurs de gradient génèrent généralement. Cependant, si nous décidons que l'une des rayures au milieu ne correspond pas tout à fait aux autres rayures, le changer en quelque chose d'autre signifie qu'il doit être mis à jour à deux endroits.

Encore une fois, ce n'est pas un gros problème, nous pouvons le résoudre sans l'aide d'un préprocesseur:

 <code>$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0; @function get-stops($c-list) { $s-list: (); $n: length($c-list); $u: 100%/$n; @for $i from 1 to $n { $s-list: $s-list, nth($c-list, $i) $i*$u, nth($c-list, $i 1) 0 } @return $s-list } .strip { background: linear-gradient(90deg, get-stops($c))) }</code>

Cela générera le dégradé CSS exact que nous avons vu plus t?t, et maintenant nous n'avons plus à le modifier à deux endroits.

Démo de codep

Mais même si le préprocesseur nous empêche de taper deux fois la même chose, il n'éliminera pas la duplication dans le code généré.

Et nous ne voulons peut-être pas toujours utiliser des préprocesseurs. Mis à part le fait que certaines personnes sont têtue ou ont une peur ou une haine irrationnelles pour les préprocesseurs, l'utilisation parfois de boucles se sent un peu idiote.

Par exemple, lorsque nous n'avons presque rien à boucler! Supposons que nous voulons obtenir un modèle d'arrière-plan plus simple, comme un motif de hachage diagonal, qui, je pense, est plus courant que les motifs arc-en-ciel surexagérés, qui peuvent ne pas convenir à la plupart des sites Web.

Cela nécessite l'utilisation de la répétition linéaire-gradient (), ce qui signifie que même si nous n'avons pas une très longue liste de valeurs hexadécimales comme nous l'avons fait auparavant, cela nécessite une duplication:

 <code>repeating-linear-gradient(-45deg, #ccc /* can't skip this, repeating gradient won't work */, #ccc 2px, transparent 0, transparent 9px /* can't skip this either, tells where gradient repetition starts */)</code>

Ici, nous ne pouvons pas rejeter les premier et dernier points d'arrêt, car c'est exactement ce qui indique comment le gradient se répète dans le rectangle défini par la taille de l'arrière-plan.

Si vous voulez comprendre pourquoi il est préférable d'utiliser la répétition linéaire-gradient () au lieu d'un gradient linéaire simple () combiné à la taille de l'arrière-plan appropriée pour créer un tel hachage, consultez un autre article que j'ai écrit auparavant.

C'est là que cette fonctionnalité entre en jeu - elle nous permet d'éviter la duplication dans le code CSS final.

Pour le cas de la bande arc-en-ciel, notre CSS devient:

 <code>linear-gradient(90deg, #5461c8 12.5%, #c724b1 0 25%, #e4002b 0 37.5%, #ff6900 0 50%, #f6be00 0 62.5%, #97d700 0 75%, #00ab84 0 87.5%, #00a3e0 0)</code>

Pour recréer le hachage, nous avons juste besoin:

 <code>repeating-linear-gradient(-45deg, #ccc 0 2px, transparent 0 9px)</code>

Démo de codep

Comment est la situation de soutien? Très bien, vous avez bien demandé! C'est en fait très bon! Il fonctionne avec Safari, les navigateurs de chrome (Edge est maintenant inclus!) Et Firefox. Le bord pré-chrome et certains navigateurs mobiles peuvent toujours être dans la fa?on dont vous le pouvez, mais si vous n'avez pas à vous soucier de fournir un support à tous les navigateurs ou de fournir une solution de repli est OK, alors vous pouvez commencer à l'utiliser!

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!