Conditions de cas de commutation CSS

CSS n'a pas encore eu de règle de commutation ou conditionnel si, à part la nature spécifique des requêtes @media et une ruse profonde avec les propriétés personnalisées CSS. Jetons un coup d'œil à la raison pour laquelle il serait utile si nous le faisions, et regardez une astuce qui est utilisable aujourd'hui pour le retirer.

Un bavardage récent sur la possibilité

Bien qu'aucune de ces choses ne soit utilisable aujourd'hui, il y a eu beaucoup de discussions sur le concept de CSS conditionnel générique juste l'année dernière:

• Brian Kardell a proposé une instruction Switch () et Tab Atkins Riff dessus.
• Jonathan Neal a proposé une variation de requête multimédia pour les valeurs conditionnelles qui ont suscité beaucoup de conversations.
• Lea Verou a proposé des «propriétés personnalisées de niveau supérieur» (voici un aperçu de Bramus van Damme) qui semblent extraordinairement utiles.

Alors, oui. La demande de CSS conditionnelle est là.

Imaginez pourquoi le CSS conditionnel serait utile

Peut-être un changement visuel après une certaine quantité de défilement. Un changement visuel après une entrée numérique se situe dans une certaine plage. Un composant avec une poignée d'états.

Il existe tout un genre de bibliothèques JavaScript extrêmement populaires pour l'interface utilisateur (par exemple React, Vue, etc.) qui sont essentiellement destinées à la construction de l'interface utilisateur en fonction de l'état. Il s'agit clairement d'un besoin de développeur. Si nous pouvions déplacer ce style basé sur l'État vers CSS, c'est tout le moins JavaScript dont nous pourrions avoir besoin - et peut-être une meilleure séparation des préoccupations.

Un thème commun

Nous avons déjà des propriétés personnalisées dans CSS, et nous pourrions leur faire changer la logique de variation d'états, modifiant un bloc de styles comme effet secondaire de la propriété personnalisée passant à certaines valeurs.

Il est vrai que nous avons déjà des mécanismes pour changer les blocs de styles. Nous pouvons changer de classe via JavaScript, et cette classe peut appliquer ce que nous aimons dans CSS. Mais cela ne signifie pas que le style basé sur l'État dans CSS ne serait pas utile. Nous n'avons pas toujours la capacité ou ne voulons peut-être pas écrire de JavaScript pour cela, et modifiez plutôt les propriétés personnalisées d'autres manières (par exemple, les requêtes multimédias, les modifications HTML, etc.). Le faire dans CSS signifie aider à séparer la logique métier et la logique de style visuel.

Un truc! Utilisation de @keyframes pour l'état

CSS @KeyFrames peut être utilisé pour changer de modification spécifique. Grâce à la puissance de la propriété d'animation, une possibilité s'ouvre pour sélectionner exactement le cadre à afficher et le faire s'arrêter exactement sur ce cadre, imitant efficacement une instruction de cas de commutateur ou des styles basés sur l'État.

Voyons voir cela en action en jouant avec la propriété d'animation-délay:

Voici ce qui se passe dans ce stylo:

• Animation-retard: les valeurs de retard négatives forcent un cadre spécifique (ou entre) pour prendre effet (les valeurs positives ne fonctionnent pas de cette façon). Nous utiliserons cette astuce pour forcer les états.
• Animation-Play-State: USUSE: nous ne nous animant rien, donc l'animation restera en pause.
• Durée d'animation: la durée réelle n'a pas d'importance, elle en a juste besoin, donc il y a une durée pour contenir les différentes images clés. Nous en ferons une valeur comme 100,001S afin que si nous retardons les années 100, la dernière image clé fonctionnera toujours. La durée doit être plus longue que la valeur de retard.

La première entrée de plage modifie le retard d'animation entre une plage de -100 et 0s.

Un cas d'utilisation réel

Avant de sauter directement dans l'exemple de travail, il vaut la peine de discuter de cette astuce plus en détail car il y a des nuances dont vous devriez être conscient.

Tout d'abord, l'astuce ne fonctionne qu'avec des valeurs numériques. Ainsi, les valeurs de couleur ou les chaînes parce qu'elle effectue strictement les mathématiques.

Deuxièmement, il y a le truc booléen. Considérez une variable - Vale: 10 qui peut prendre n'importe quelle valeur numérique entre 0 et 100. Nous voulons appliquer la couleur si la valeur est supérieure à 5. Comment savons-nous si la valeur est supérieure ou inférieure à 5? Et même si nous savons, comment cela nous aide-t-il réellement?

 --is-above-5: pince (0, var (- valeur) - 5, 1)

Clamp () est comme un calc plus intelligent (), en ce qu'il nous permet de limiter strictement une valeur calculée à plage tout en déclarant une valeur idéale. Cette gamme est tout ce qui est nécessaire pour atteindre une variable booléenne.

Écrivez n'importe quel mathématique dans le deuxième paramètre du clamp () et qui sortira 0 (ou ci-dessous) ou 1 (ou au-dessus). Assurez-vous de ne pas écrire de mathématiques qui pourraient entraîner un nombre entre 0 et 1.

Voici comment cela fonctionne:

Le seul travail de l'entrée de plage consiste à «diffuser» sa valeur en définissant des valeurs pour --value, - min et --max, puis en modifiant la valeur à l'aide d'un événement OnInput. C'est la chose la plus minimale qui peut être faite pour obtenir un comportement de type état dans CSS. Aucun javascript nécessaire.

En utilisant les fonctions mathématiques CSS, il est possible de déduire le pourcentage «terminé» de la barre de progression de ces mêmes variables:

 - Complèté: calc ((var (- valeur) - var (- min)) / (var (- max) - var (- min)) * 100);

Maintenant, nous savons si la valeur dépasse un certain pourcentage, ce qui nous donne encore une autre façon de modifier par l'état:

 --Over-30: pince (0, var (- terminé) - 30, 1);
--Over-70: clamp (0, var (- terminé) - 70, 1);
/* ...et ainsi de suite... */

Ok, génial, mais comment pouvons-nous l'utiliser pour sélectionner une image clé spécifique? En utilisant la fonction max ():

 - Frame: Max ( 
    calc (1 - var (- plus de-30)), 
    var (- plus de-30) * 2, 
    var (- plus de 70) * 3, 
    var (- IS-100) * 4 
));

La chose avec CSS Booleans est qu'il existe de nombreuses façons de les utiliser pour atteindre un certain objectif, et il faut faire preuve de créativité, en trouvant une formule courte et lisible.

Dans la formule ci-dessus, les booléens «basculent» un numéro de trame si le booléen a la valeur de 1. Étant donné que nous utilisons une fonction maximale, le plus grand nombre de trame à bascule sera la valeur calculée de - trame.

Notez que le changement de couleur a une légère transition. Nous aurions pu le faire avec l'arrière-plan: CurrentColor; sur la zone de remplissage, qui hérite de la couleur du parent, mais j'ai choisi d'utiliser CSS Houdini pour illustrer la puissance d'attribuer des transitions aux variables CSS en déclarant son type.

Un exemple d'une astuce booléenne CSS à forte utilisation peut être visualisé dans le stylo ci-dessous, qui est un composant CSS uniquement avec beaucoup de variables qui permettent une large gamme de personnalisation:

Je suis sûr qu'il existe de nombreux autres cas d'utilisation pour cette petite astuce et je suis ravi de voir ce qui pourrait être réalisé par la créativité de la communauté.

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!