La machine de si

Le groupe de travail CSS a décidé de développer des déclarations conditionnelles en ligne, ce qui a déclenché des discussions animées dans la section des commentaires. Certains développeurs sont enthousiasmés à ce sujet, tandis que d'autres craignent que cela ne rendra l'avenir de CSS incertain. Cela glissera-t-il dans une situation infernale remplie de développeurs qui abusent du CSS, qui mettent en œuvre trop de logique là où il devrait être une langue de style? Ne le fera pas. Même si certaines personnes le font, aucun blog grand public ne publie le non-sens du fou hypothétique qui ajoute une logique folle à CSS pour leurs propres fins. Par conséquent, nous savons que l'avenir du CSS est sûr.

la fin du monde? Il est plus longtemps

Les arguments de cet article confirment en outre que les déclarations conditionnelles en ligne peuvent ne pas être un signe avant-coureur de la fin de la civilisation: je pense que nous pouvons maintenant utiliser des requêtes de style pour atteindre les mêmes fonctionnalités, qui obtiennent un assez bon support de navigateur.

La proposition de Lea ressemble plus à du sucre syntaxique, parfois pratique et permet un balisage plus propre. Toute remarque de panique sur les instructions conditionnelles en ligne qui ruinent les CSS équivaut à exagérer l'ajout d'opérateurs ternaires aux langues qui prennent déjà en charge les instructions IF.

En fait, Lea a dit à propos de la syntaxe qu'elle a proposée: "Tout comme l'opérateur ternaire en JS, il peut également être plus ergonomique pour les situations où seule une petite partie de la valeur change." Ce n'est pas que les déclarations conditionnelles dans CSS sont interdites, mais que le CSS n'est pas toujours bon pour le manipuler.

Je veux un oompa Loompa conditionnel!

aussi. Il y en a beaucoup d'autres, comme en témoignent la liste soigneusement organisée de Lea des astuces complexes étonnantes, les gens ont découvert des moyens de simuler des instructions conditionnelles en ligne en utilisant le CSS actuel. Certains de ces conseils sont si compliqués que je ne sais toujours pas si je les comprends, mais leurs noms sont vraiment cool. Lea a conclu: "Si vous connaissez d'autres techniques, faites-le moi savoir pour que je puisse les ajouter."

hmm ... J'ai définitivement manqué quelques questions sur ces conseils à résoudre. J'ai remarqué que Lea avait un doctorat et j'étais un idiot. Alors je fais défiler et relire, mais je ne peux pas arrêter de penser: ces gens essaient-ils d'éviter d'ajouter des divs supplémentaires autour de leurs parties et d'utiliser des requêtes de style?

C'est juste si les gens veulent éviter des éléments inutiles dans le DOM, mais la liste des conseils de Lea montre que les alternatives sont très complexes, donc cela vaut la peine d'essayer à quelle distance une requête de style avec des divs emballages peut nous emmener.

Exemples convaincants

LEA L'exemple tourne autour de la définition d'une propriété "variante" sur la boîte d'invite et souligne que nous pouvons presque implémenter ce qu'elle veut avec la requête de style, mais la syntaxe de cette hypothèse est malheureusement invalide :

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

Elle veut coiffer le conteneur lui-même et ses éléments enfants selon --Variant. Maintenant, dans cet exemple concrète, je peux utiliser Z-Index pour modifier le :: après pseudo-élément pour créer l'illusion qu'il s'agit d'un conteneur. Ensuite, je peux définir ses bordures et son arrière-plan. Malheureusement, cette solution est aussi fragile que moi, dans cet autre exemple, Lea veut définir le flux flexible du conteneur en fonction de la variante. Ma solution pseudo-élémentaire n'est pas assez bonne dans ce cas.

Rappelez-vous, la proposition de Lea a été incorporée dans la norme CSS, tout comme les cadeaux d'anniversaire que l'univers lui a donné, il serait donc injuste d'essayer de remplacer ses cadeaux par ces faux conteneurs bon marché que j'ai achetés sur Temu. Elle mérite un vrai conteneur.

réessayons.

en utilisant l'emballage

Le commentaire de la proposition LEA mentionne le broyage de type, mais l'appelle "un moyen très (je le répète, très) complexe mais efficace" de résoudre le problème que les instructions conditionnelles en ligne sont conçues pour résoudre. Ce n'est pas juste. Le type de broyage m'a pris un peu de temps à comprendre, mais je pense que c'est plus facile à comprendre que les autres conseils et a moins d'inconvénients. Néanmoins, ce type de code en production peut être ennuyeux lorsque vous regardez les exemples. Alors, faisons grimons les dents et essayons de construire une version alternative de l'exemple de la variante Flexbox de Lea. Ma version n'utilise pas de broyage de type ou aucune astuce, mais utilise des requêtes de style "à l'ancienne" (pas si à l'ancienne) ainsi que des divs enveloppés pour résoudre le problème que nous ne pouvons pas styliser le conteneur lui-même en utilisant des requêtes de style.

Type de comparaison d'emballage Goute

Comparez l'exemple de LEA avec ma version du code pour nous aider à comprendre les différences de complexité.

Voici deux versions de CSS:

Voici deux versions de la balise:

Par conséquent, CSS plus simple et légèrement plus de balisage. Peut-être que nous avons trouvé la direction.

La raison pour laquelle j'aime les requêtes de style est que la proposition de Lea utilise la fonction style (), donc si sa proposition est adoptée par le navigateur, il semble possible de migrer la requête de style vers une déclaration conditionnelle en ligne et de supprimer l'emballage. Si je ne mentionne pas que la migration de ce type de code pourrait être un cas d'utilisation viable pour l'IA, ce message n'est pas l'article 2025. Peut-être que l'IA ne sera pas si mauvaise lorsque nous obtiendrons des déclarations conditionnelles en ligne.

Mais nous étions un peu hors sujet. Avez-vous essayé d'adopter des frameworks JavaScript cool qui semblent élégants dans l'exemple de tâches? Si quoi que ce soit, vous saurez qu'une solution qui semble convaincante dans des exemples simples peut défier votre volonté de survivre dans de vrais exemples. Voyons donc à quel point il fonctionne efficace avec les requêtes de style dans des exemples plus réalistes.

Recherche de vérification

Combinez mon exemple ci-dessus avec l'exemple de MDN sur la validation HTML5 et la démonstration cool de Seth Jeffery de transformer les icônes CSS pures, puis les saisir toutes en machine "et si" pour la démonstration suivante.

Si vous faites valide le formulaire, toutes les modifications apportées à la boîte d'invite sont basées sur une propriété personnalisée. Cette propriété n'est jamais directement utilisée dans la valeur de la propriété CSS de la boîte d'invite, mais elle contrôle la requête de style qui définit la couleur de la bordure, l'icône, la couleur d'arrière-plan et le contenu de la boîte d'invite. Nous avons réglé la propriété - Variant au niveau .Allout-Wrapper. Je l'ai configuré en utilisant CSS comme suit:

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

Cependant, cette variable peut être définie par des styles en ligne dans JavaScript ou HTML, tout comme l'exemple de LEA. La validation du formulaire est juste ma façon de rendre la démo plus interactive pour afficher la boîte d'invite qui peut être modifiée dynamiquement basée sur - Variant.

Résumé

J'écris un article contre les techniques de pliage de CSS à notre volonté, ce qui ne correspond pas à mon style, et je suis totalement en faveur de la langue "tromperie" pour faire ce que nous voulons faire. Cependant, l'utilisation d'emballages et de requêtes de style peut être le moyen le plus simple d'obtenir une prise en charge des instructions conditionnelles en ligne. Si nous voulons nous sentir plus comme vivre dans le futur, nous pouvons utiliser l'approche ci-dessus comme base pour les polyfills d'instructions conditionnelles en ligne ou en utilisant le plugin de parcelle de magie du préprocesseur ou du plugin postcss - mais pour ce compromis, mon doigt de déclenchement convient toujours de la touche de suppression. Lea admet: «Si vous pouvez faire quelque chose avec des requêtes de style, utilisez les requêtes de style autant que vous le souhaitez - elles sont presque certainement une meilleure solution.»

À travers les expériences de cet article, je me suis convaincu que la question de style est toujours un bon choix même dans le cas de Lea - mais j'ai toujours hâte de relevé des déclarations conditionnelles. Pendant ce temps, les requêtes de style sont plus faciles à comprendre au moins par rapport à d'autres solutions connues. Ironiquement, je suis d'accord avec les commentaires qui remettent en question l'exigence de déclarations conditionnelles en ligne, non pas parce qu'elle ruinera le CSS, mais parce que je crois que nous pouvons maintenant mettre en œuvre le LEA avec le CSS moderne, sans aucune astuce. Ainsi, nous n'avons peut-être pas besoin de déclarations conditionnelles en ligne, mais elles nous permettent d'écrire du code plus lisible et plus concis. Si vous pouvez penser à quelques exemples de barrières de complexité que vous pouvez rencontrer en utilisant des requêtes de style au lieu d'énoncés conditionnels en ligne, veuillez me le faire savoir dans la section des commentaires.

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!