CSS Stuff I & # 039; Je suis excité après la dernière réunion du CSSWG

Du 11 au 13 juin 2024, le CSS Working Group (CSSWG) a tenu sa deuxième réunion en face à face de l'année à Cruña, en Espagne, avec l'ordre du jour couvrant de nombreuses nouvelles fonctionnalités et améliorations à la langue CSS. Après les progrès remarquables tels que la nidification, la requête de conteneurs et les requêtes de style et has: sélecteurs en 2023, d'autres mises à jour révolutionnaires seront reçues en 2024. Que les nouvelles fonctionnalités telles que les déclarations conditionnelles en ligne ne font que commencer ou que des projets à long terme soient sur le point de se terminer, 2024 est déjà plein de développements passionnants - et nous entrons en juillet!

Cet article partagera certaines des nouvelles fonctionnalités les plus intéressantes et les plus importantes de CSS qui, je pense, sont discutées lors de cette conférence. Il convient de noter que ce n'est pas un enregistrement exact des discussions de la conférence, mais un aperçu des principaux sujets CSS sur qui se concentrent dans la conférence. En fait, ces fonctionnalités se préparent depuis des années, et les discussions se concentrent sur des cas spécifiques et de nouvelles améliorations plutôt que de définir une spécification complète;

Vous pouvez voir des questions spécifiques discutées à l'ordre du jour de la réunion du CSSWG.

Caractéristique 1: if() Prospect de la fonction

Étant donné que les propriétés personnalisées CSS ont obtenu un support solide vers 2016, de nombreuses façons ont été essayées d'appliquer des styles spécifiques en fonction des valeurs de propriété personnalisées sans compter sur JavaScript. L'une des premières solutions de style conditionnel a été proposée par Roman Komarov dans les «Conditions pour les variables CSS» de 2016. Depuis lors, de nombreuses autres «compétences» ont été documentées pour des déclarations conditionnelles dans CSS (y compris l'approche extrêmement intelligente proposée par Ana Tudor sur CSS-Tricks). En fait, le membre de CSSWG, Lea Verou, dans son récent article, «Inline Conditional Statements in CSS, Now?», Fournit une liste complète des discussions et des comparaisons de ces solutions.

pour être sûr, la communauté a toujours envie d'un moyen conditionnel d'appliquer des styles en utilisant des propriétés personnalisées. De nos jours, nous avons une spécification de requête de style qui peut accomplir cette tâche, mais elle a certaines limites qui ne sont pas liées au support du navigateur. Quelle est la plus grande limitation? Nous ne pouvons pas styliser directement le conteneur de requête , nous devons donc ajouter une sorte d'élément d'enveloppe autour du conteneur en HTML.

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

… et requête de style:

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

if() à quoi pourrait ressembler une fonction

En termes de CSSWG, l'ajout de fonctions if() a été discuté en 2018. Le 13 juin de cette année - oui, six ans plus tard - CSSWG a décidé de commencer à développer des fonctions if() pour CSS. Bien que ça ait l'air bien, ne vous attendez pas à voir dans votre navigateur pendant au moins deux ans if()! (C'est l'estimation non officielle de Lea.) Nous devrons peut-être attendre plus longtemps pour obtenir suffisamment de support de navigateur pour l'utiliser de manière fiable en production. Le projet de spécification vient de commencer et beaucoup de choses doivent être testées en premier. Pour référence, le projet de travail des variables CSS a commencé en 2012 et n'a reçu pas de support approfondi de navigateur avant 2016.

En termes de syntaxe, if() peut emprunter les opérateurs ternaires à JavaScript et à d'autres langages de programmation, et la structure est la suivante:

<code>.news-container {
  container-name: news-container;
}

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

… où A est l'attribut personnalisé que nous vérifions, et B et C sont des valeurs de retour conditionnelle possibles. Pour vérifier le style, le style en ligne style(--my-property: value) sera utilisé.

<code>if(a ? b : c)</code>

Même si ? n'est pas utilisé dans CSS, et : a des significations différentes ailleurs, je pense que cette syntaxe est la plus familière à la plupart des gens, sans parler qu'elle permet également des liens conditionnels transparents.

<code>.forecast {
  background-color: if(style(--weather: clouds) ? var(--clouds-color): var(--default-color));
}</code>

Future if() Amélioration des fonctions

Bien que ceux-ci n'apparaissent pas dans la version initiale, il est toujours intéressant de savoir quels changements peuvent se produire à un moment donné dans le futur: if()

• prend en charge d'autres instructions conditionnelles en ligne. Nous devons utiliser la requête pour vérifier les propriétés personnalisées, mais nous pouvons également utiliser la requête en ligne style() pour vérifier les propriétés des médias, ou utiliser le Inline media() pour vérifier si l'agent utilisateur prend en charge les propriétés spécifiques. support()

<code>.forecast {
  background-color: if(
    style(--weather: clouds) ? var(--clouds-color): 
    style(--weather: sunny) ? var(--sunny-color);
    style( --weather: rain) ? var(--rain-color): var(--default-color)
  );
}</code>

• Utiliser des instructions conditionnelles dans d'autres fonctions CSS. Dans les futures ébauches, nous pouvons utiliser des opérateurs ternaires dans d'autres fonctions sans les emballer dans , par exemple, si nous sommes dans les fonctions if() ou clamp(), nous pouvons faire les calculs sans round(). calc()

Fonction 2: transition à travers la vue du document

L'année dernière, l'API de transition View nous a permis de créer des transitions transparentes entre les pages Web et les états de navigation. Pas de composants ou de cadres, aucune bibliothèque d'animation requise - utilisez simplement une petite quantité de JavaScript et HTML et CSS simples. La première implémentation de la transition de la vue a été intégrée dans le navigateur il y a longtemps, mais elle est basée sur des fonctions expérimentales définies par Chrome et est limitée aux transitions entre deux états (transitions de vue à une page) sans prendre en charge les transitions entre les différentes pages (c'est-à-dire les transitions de vue multi-page), ce qui est exactement ce que la plupart de nos développeurs désirent. La possibilité d'imiter le comportement d'application native est passionnante!

C'est pourquoi CSS View Module Transition Module 2 est si génial et pourquoi il est le plus populaire de toutes les nouvelles fonctionnalités CSS décrites dans cet article. Oui, cette fonctionnalité apporte une transition sans couture à l'extérieur de la boîte entre les pages, mais ce qui compte vraiment, c'est qu'il élimine la dépendance du cadre qui implémente cette fonctionnalité. Nous pouvons revenir à Pure CSS et JavaScript au lieu d'utiliser des bibliothèques - comme réagir certaines bibliothèques de routage.

Bien sûr, l'API de transition View peut être hors de portée pour une certaine complexité, mais elle est excellente pour la myriade de situations où nous voulons simplement faire des transitions de page sans avoir à supporter le coût de performance de l'introduction de cadres.

opinion pour afficher la transition

Lorsque nous naviguons de la même source à deux pages, la transition de vue est déclenchée. Dans ce cas, la navigation peut être de cliquer sur un lien, de soumettre un formulaire ou d'utiliser un bouton de navigateur pour faire des allers-retours. En revanche, l'utilisation d'une barre de recherche entre les mêmes pages source ne déclenche pas une transition de page.

les deux pages - la page que nous voulons laisser et la page que nous voulons naviguer - nous devons utiliser @view-transition AT-RULE et définir la propriété navigation sur auto pour opter pour opter la transition:

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

Lorsque les deux pages choisissent de rejoindre la transition, le navigateur "instantanément" les deux pages se fondera en douceur la page "avant" dans la page "After".

transition entre "instantanés"

Dans cette vidéo, vous pouvez voir comment l'ancienne page s'estompe dans la nouvelle page, grâce à un ensemble complet de nouveaux pseudo-éléments qui persistent pendant la transition et utilisent des animations CSS pour produire des effets. Le navigateur regroupera des instantanés d'éléments à l'aide d'une propriété unique view-transition-name qui définit un identifiant unique sur les transitions auxquelles nous pouvons nous référer, et cet identifiant est capturé dans le pseudo-élément ::view-transition contenant toutes les transitions sur la page.

Vous pouvez considérer ::view-transition comme l'élément :root de toutes les transitions de page, qui combine toutes les parties de transition de page sur la même animation par défaut.

<code>.news-container {
  container-name: news-container;
}

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

Notez que chaque transition est dans A ::view-transition-group, le groupe contient un ::view-transition-image-pair, et la paire contient à la fois des instantanés de page "anciennes" et "nouvelles". Nous pouvons ajouter autant de groupes que nous le souhaitons, et ils contiennent tous une paire d'images avec deux instantanés.

Exemple rapide: utilisons ::view-transition "root" comme paramètre pour sélectionner toutes les transitions sur la page et créer une animation coulissante entre l'ancien et les nouveaux instantanés.

<code>if(a ? b : c)</code>

Si nous naviguons entre les pages, toute l'ancienne page glissera vers la gauche et la nouvelle page entière glissera depuis la droite. Mais nous voulons peut-être empêcher certains éléments de la page de participer à la transition car ils persistent entre les pages, tandis que tout le reste passe de "l'ancien" instantané au "nouveau" instantané.

C'est la clé des attributs view-transition-name, car nous pouvons installer certains éléments et les mettre en ::view-transition-group séparés de tout le reste pour les gérer séparément.

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

Vous pouvez en trouver une démo en direct sur GitHub. Veuillez noter qu'au moment de la rédaction, le support du navigateur est limité aux navigateurs de chrome (c'est-à-dire Chrome, Edge, Opera).

Nous avons beaucoup à espérer quand il s'agit de passer à travers les vues des documents. Par exemple, si nous avons plusieurs éléments avec différents view-transition-name, nous pouvons leur fournir un view-transition-class partagé pour les styliser en un seul endroit - et même utiliser JavaScript pour personnaliser davantage la transition de la vue pour vérifier de quelle URL La page est en transition et anime en conséquence.

Caractéristique 3: positionnement de l'ancrage

Il semble être un jeu d'enfant pour localiser les éléments par rapport à un autre élément de CSS, mais nécessite en fait des attributs de marge de mélange (en haut, en bas, à gauche, à droite) basé sur une série de nombres magiques pour obtenir le résultat correct. Par exemple, une invite de widget apparaissant sur le côté gauche d'un élément pendant le survol peut ressembler à ceci en html:

<code>.news-container {
  container-name: news-container;
}

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

… et CSS en utilisant la méthode actuelle:

<code>if(a ? b : c)</code>

devoir modifier les valeurs de positionnement et de marge des éléments n'est pas la fin du monde, mais il semble qu'il devrait y avoir un moyen plus facile. De plus, les info-bullets dans le dernier exemple sont très fragiles;

Le positionnement de l'ancrage CSS est une autre nouvelle fonctionnalité discutée lors de la réunion du CSSWG et il espère rendre ces choses beaucoup plus faciles.

Créer des points d'ancrage

L'idée de base est que nous construisons deux éléments:

• On agit comme une ancre,
• une "cible" ancrée à l'élément.

De cette façon, nous avons un moyen plus déclaratif d'associer un élément et de le positionner par rapport à l'élément d'ancrage.

Tout d'abord, nous devons créer notre élément anchor-name Anchor Point avec le nouvel attribut .

Changez légèrement notre marque:

<code>.forecast {
  background-color: if(style(--weather: clouds) ? var(--clouds-color): var(--default-color));
}</code>

Nous spécifions une indentation en pointillés unique comme sa valeur (tout comme une propriété personnalisée):

<code>.forecast {
  background-color: if(
    style(--weather: clouds) ? var(--clouds-color): 
    style(--weather: sunny) ? var(--sunny-color);
    style( --weather: rain) ? var(--rain-color): var(--default-color)
  );
}</code>

Ensuite, nous utilisons l'attribut position-anchor et le positionnement fixed ou absolute pour associer .tooltip. .anchor

<code>.my-element {
  width: if(media(width > 1200px) ? var(--size-l): var(--size-m));
}</code>

est actuellement au-dessus de .tooltip, mais nous devons le déplacer vers un autre emplacement pour éviter cela. La façon la plus simple de déplacer .anchor est d'utiliser le nouvel attribut .tooltip. Supposons que inset-area est au milieu d'une grille 3 × 3, et nous pouvons localiser des info-bullets dans la grille en y attribuant des lignes et des colonnes. .anchor

inset-area La propriété est .tooltip prend deux valeurs dans la position dans une ligne et une colonne spécifiques. Il compte en utilisant des valeurs physiques (telles que la gauche, la droite, le haut et le bas) ainsi que des valeurs logiques (telles que le début et la fin) du modèle d'écriture de l'utilisateur et des valeurs centrales partagées. Il accepte également des valeurs qui référencent les coordonnées x et y, telles que X-Start et Y-End. Tous ces types de valeur sont des méthodes qui représentent l'espace sur une grille 3 × 3.

Par exemple, si nous voulons que .tooltip soit positionné par rapport au coin supérieur droit du point d'ancrage, nous pouvons définir la propriété inset-area comme ceci:

<code><div style="--variant: info">
  <p>Here is some good <strong>news</strong></p>
</div></code>

Enfin, si nous voulons que notre info-bulle couvre deux zones de la grille, nous pouvons utiliser le préfixe span-. Par exemple, span-top place .tooltip sur la zone supérieure et centrale de la grille. Si nous voulons courir toute la direction, nous pouvons utiliser la valeur span-all.

L'un des exemples de problèmes, nous n'avons pas de points d'ancrage, c'est que les info-bulleurs peuvent déborder de l'écran. Nous pouvons résoudre ce problème en utilisant une autre nouvelle propriété (appelée position-try-options cette fois) combinée à une nouvelle fonction inset-area().

(oui, il y a une propriété inset-area et une fonction inset-area(). C'est celle dont nous devons nous souvenir!)

La propriété

position-try-options accepte une liste séparée par des virgules des positions de repli pour quand .tooltip déborde de l'écran. Nous pouvons fournir une série de fonctions inset-area(), chacune contenant la même valeur d'attribut que l'attribut inset-area. Maintenant, chaque fois que l'info-bulle sort de l'écran, le prochain emplacement déclaré est "essayé" et si cet emplacement provoque un débordement, le prochain emplacement déclaré est tenté, etc.

<code>.news-container {
  container-name: news-container;
}

@container news-container style(--variant: info) {
  p {
    color: blue;
    border: 1px solid blue;
  }
}</code>

C'est un concept très nouveau et il faut un certain temps pour comprendre. Miriam Suzanne, membre du CSSWG, s'est assis avec James Stuckey Weber pour discuter et essayer le positionnement de l'ancrage dans une vidéo très valable.

Si vous recherchez TL; DW, Geoff Graham a pris des notes sur la vidéo.

Pour la simplicité, de nombreux aspects du positionnement de l'ancrage ne sont pas introduits ici, en particulier les nouvelles fonctions anchor() et @try-position at-rule. La fonction anchor() renvoie la position calculée du bord d'ancrage, ce qui fournit plus de contrôle sur les propriétés de marge d'info-bulle. @try-position AT-RULE est utilisé pour définir la position personnalisée à définir sur la propriété position-try-options.

Mon intuition est que pour la grande majorité des cas d'utilisation, l'utilisation de inset-area sera assez puissante.

CSSWG est un effort collectif

J'ai dit plus tôt que cet article ne donnera pas un récapitulatif exact des discussions menées lors des réunions du CSSWG, mais ne sera qu'une large introduction aux nouvelles spécifications du CSS, qui ne seront pas obligées à apparaître lors de ces réunions en raison de leur nouveauté. Il y a même certaines fonctionnalités que nous n'avons tout simplement pas le temps de revoir dans cette revue, qui sont toujours en cours de discussion ( toux , maçonnerie).

L'une des choses qui est certaine est que la spécification n'est pas formulée dans une ou deux réunions dans un environnement sous vide;

J'ai également eu l'occasion de parler à certains des grands développeurs de CSSWG et j'ai trouvé le plus qu'ils obtenaient des réunions intéressantes. Vous pourriez vous attendre à ce que if() soit en tête de leur liste, car c'est ce qui est discuté sur les réseaux sociaux. Mais le membre de CSSWG, Emilio Cobos, me dit que par exemple, l'attribut letter-spacing est intrinsèquement défectueux, et il n'y a pas de solution simple pour résoudre le problème qu'il est cohérent avec la définition actuelle de letter-spacing et comment elle est utilisée dans le navigateur. Cela inclut le fait que la conversion des propriétés normales en propriétés abrégées peut être dangereuse dans la base de code.

Nous pouvons penser que chaque détail de l'insignifiance sera soigneusement analysé au profit d'Internet et sans amour pour Internet. Et, comme je l'ai mentionné plus tôt, ces choses ne se produisent pas dans un environnement sous vide fermé. Si vous avez un intérêt pour l'avenir du CSS - qu'il s'agisse de suivre CSS ou de participer activement - considérez l'une des ressources suivantes.

• Page d'accueil CSSWG
• CSSWG Blog
• CSSWG Draft (github)
• CSSWG News RSS Feed (Atom)
• Tableau de spécification CSS
• Liste de diffusion d'annonces de révision publique et archives (et flux RSS)

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!