Chrome 133 Goodies

Le travail de l'équipe Chrome doit être excitant! Obtenir de première main dans la dernière version du navigateur et faire des démos cool pour montrer les nouvelles fonctionnalités doivent être très bien. Bien sûr, je ne l'envie pas du tout! (Vous demandez pourquoi?)

Retour au point, avez-vous vu les notes de sortie de Chrome 133? Il est actuellement en version bêta, mais l'équipe Chrome a publié une série de grands articles et de démos impressionnantes qui sont difficiles à ignorer. J'ai décidé de les assembler.

attr() Fonctions largement utilisées!

Nous avons pu utiliser des attributs HTML dans CSS pendant un certain temps, mais il est limité aux attributs content et aux chaînes d'analyses uniquement.

<h1 data-color="orange">Some text</h1>

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

Bramus montre comment l'utiliser dans Chrome 133 pour tout attribut CSS, y compris les attributs personnalisés. Par exemple, nous pouvons obtenir la valeur de l'attribut et l'utiliser pour l'attribut color de l'élément:

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

Bien sûr, c'est un exemple simple. Mais cela montre qu'il y a trois composants ici:

1. Propriétés (data-couleur)
2. type (type ())
3. Valeur d'arbitrage (https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffff)

Les attributs sont définis par nous-mêmes. Il est très pratique de pouvoir insérer des wildcards dans des balises et de les utiliser pour les paramètres de style. type() est une nouvelle fonctionnalité qui aide CSS à identifier le type de valeur traité. Si nous utilisons des valeurs numériques, nous pouvons utiliser une méthode d'écriture plus concise. Par exemple, supposons que nous utilisons des attributs pour définir la taille de la police d'un élément:

<div data-size="20">Some text</div>

Maintenant, nous pouvons définir l'attribut font-size (unité en px):

h1 {
  font-size: attr(data-size px, 16);
}

Les valeurs d'arbitrage sont facultatives et peuvent ne pas être requises en fonction de votre cas d'utilisation.

Statut de défilement dans la requête de conteneur!

c'est incroyable! Si vous avez toujours voulu un moyen de coiffer l'élément collant lorsqu'il est dans un état "collant", vous saurez à quel point il est cool d'avoir une telle fonctionnalité. Adam Argyle utilise le modèle classique de la liste alphabétique et applique des styles au titre de lettre lorsqu'il est collé en haut de la fenêtre. Il en va de même pour le défilement des éléments SNAP et le défilement des éléments des conteneurs.

En d'autres termes, lorsque les éléments sont "coller", "Snap" et "Scrollable", nous pouvons les coiffer.

Un petit exemple que vous devez ouvrir dans le navigateur de chrome:

L'idée globale (je ne sais que beaucoup maintenant) est que nous enregistrons un conteneur ... un conteneur que nous pouvons interroger. Nous définissons un container-type pour le conteneur, qui est le type de défilement que nous utilisons. Dans ce cas, nous utilisons un positionnement collant où l'élément est "coller" en haut de la page.

<h1 data-color="orange">Some text</h1>

Le conteneur ne peut pas se demander lui-même, il doit donc essentiellement être un emballage pour les éléments que nous voulons coller. Le menu est un peu spécial car nous avons l'élément <nav></nav>, qui est généralement rempli d'une liste de liens non ordonnée. Ainsi, notre <nav></nav> peut être utilisé comme conteneur pour notre requête, car nous collons réellement la liste non ordonnée en haut de la page.

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

Nous pouvons mettre la logique collante directement sur <nav></nav> car elle contient en fait le contenu collé:

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

Si nous utilisons un pied de page collant au lieu d'un menu, nous pouvons utiliser stuck: bottom. Mais le fait est qu'une fois que l'élément <nav></nav> est collé en haut, nous pouvons y appliquer des styles dans le bloc @container comme suit:

<div data-size="20">Some text</div>

nicher d'autres sélecteurs, il semble également fonctionner. Par exemple, lorsque la navigation est collante, nous pouvons modifier le lien dans le menu:

h1 {
  font-size: attr(data-size px, 16);
}

donc, oui. Comme je l'ai dit, faisant partie de l'équipe de développement de Chrome, il doit être cool de commencer avec ces fonctionnalités. Merci beaucoup à Bramus et Adam de continuer à nous présenter de nouvelles fonctionnalités et les grands efforts pour faire une si grande démo.

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!