CSS va du porh-phog Wild, je te dis quoi

Associé à l'évolution du CSS, nous semblons être dans l'une des périodes d'innovation les plus excitantes de l'histoire du CSS. C'était vraiment excitant lorsque tous les navigateurs prennent en charge Flexbox, puis la grille peu de temps après. Ils transforment complètement CSS, ce qui ne le rend plus une collection maladroite de trucs, mais quelque chose de plus raisonnable et plus conforme à la tendance de l'époque.

Ce sentiment devient de plus en plus fort. Tout récemment, les choses suivantes se sont produites.

⚠️? ? ⚠️

Nidification indigène

Le nidification indigène est devenu le premier projet de travail public, ce qui signifie qu'il est plus proche que jamais d'être une réalité. Beaucoup de gens utilisent des préprocesseurs uniquement pour la commodité de la nidification, ce qui devrait être utile pour ceux qui souhaitent simplifier les outils de construction pour éviter cela.

J'aime particulièrement comment nidifier les règles conditionnelles.

 <code>.card { & .title { } & .body { } @media (min-inline-size > 1000px) { & { } } @nest body.dark & { } }</code>

J'ai entendu des rumeurs sur cette solution viable, ce qui évite le besoin de sélecteurs simples et évite également complètement @nest.

 <code>.card {{ .title { } .body { } body.dark & { } }}</code>

Requête en conteneur

Container Query n'est actuellement qu'un projet d'éditeur (CSS Confineration Module 3), mais il est déjà implémenté dans Chrome (besoin d'activer les drapeaux). Ils ont beaucoup de sens car ils nous permettent de prendre des décisions de style en fonction de la taille du conteneur lui-même, ce qui est une très bonne idée dans le monde axé sur les composants d'aujourd'hui.

• Miriam Suzanne: propositions et explications de requête en conteneurs
• Stephanie Eckles: Début avec CSS Container Query
• Geoff Graham: Collection de requête en conteneur
• Una Kravets: Next Generation CSS: @Container

Consultez le code pour un exemple simple du site (il peut sembler bizarre si vous n'avez pas l'indicateur activé dans Chrome).

 <code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card { display: flex; } @container (max-width: 500px) { /* 必须设置子元素的样式，而不是容器*/ .card { flex-direction: column; } }</code>

Récipient

L'unité de conteneur a également un projet de spécification qui pour moi double presque le praticité des requêtes de conteneurs. L'idée est que vous avez une unité basée sur la taille du conteneur (largeur, hauteur ou "en ligne de taille" / "Block-Size"). Je pense que les unités Qi sont les plus utiles.

Espérons que bientôt, nous écrire des CSS à l'échelle du conteneur qui styles en fonction de notre propre taille et pourront passer cette taille pour une utilisation par d'autres propriétés internes. La propriété de taille de police est un exemple pratique simple (une police basée sur sa taille à l'échelle de conteneurs), mais je crois que l'unité de conteneur sera utilisée à diverses fins, telles que l'espace, le rembourrage et à bien d'autres fins.

 <code>/* 在您要查询的父元素上设置containment */ .card-container { /* 目前两者都有效，不确定哪个是正确的*/ contain: style layout inline-size; container: inline-size; } .card h2 { font-size: 1.5rem; /* 备用*/ } @container type(inline-size) { .card h2 { font-size: clamp(14px, 1rem 2qi, 56px) } }</code>

Couche en cascade

La couche Cascade (dans la spécification du projet de travail) introduit un tout nouveau paradigme pour déterminer le gagnant du sélecteur CSS dans la cascade. Actuellement, il s'agit principalement d'une compétition spécifique. Le sélecteur avec la spécificité la plus élevée gagne, seul le style en ligne et les règles spécifiques avec la clause! Importante peuvent la surperformer. Mais avec les couches, tout sélecteur correspondant sur la couche supérieure gagnera.

• Miriam Suzanne: Exemples / démos simples et documentation d'explication.
• Bramus van Damme: L'avenir de CSS: Couche Cascade (CSS @ Layer)

 <code>@layer base; @layer theme; @layer utilities; /* 没有层的重置样式（超低）*/ * { box-sizing: border-box; } @layer theme { .card { background: var(--card-bg); } } @layer base { /* 大多数样式？*/ } @layer utilities { .no-margin { margin: 0; } }</code>

@quand

La règle CSS quand / else proposée par TAB Atkins est acceptée, c'est un moyen d'exprimer les requêtes @Media et @Supports, et vous pouvez exprimer la condition ELSE plus facilement. Alors que les requêtes multimédias ont déjà des capacités logiques, l'expression des requêtes mutuellement exclusives est difficile depuis longtemps, ce qui le rend très simple.

 <code>@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ }</code>

Portée

L'idée des styles de portée (qui est un projet d'éditeur) est qu'il fournit une syntaxe pour écrire des styles qui ne sont appliqués qu'aux blocs de sélecteur et aux internes, mais ont également la capacité d'arrêter les lunettes, créant ainsi des boucles de portée.

Ma chose préférée est l'intensité de la "proximité". Miriam explique de cette façon:

 <code>.light-theme a { color: purple; } .dark-theme a { color: plum; }</code>

<code><div>
  <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Prune</a>

  <div>
    <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">Peut-être que c'est Plum? ? ?</a>
  </div>
</div></code>

Droite? ! Il n'y a aucun bon moyen d'exprimer à quel point vous voulez que le lien gagne avec. Actuellement, la spécificité des deux sujets est la même, mais le thème .Dark est derrière - donc il gagne. Espérons que les styles de portée peuvent également résoudre ce problème.

 <code>@scope (.card) to (.content) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... } }</code>

 <code>/* 邻近性帮助！*/ @scope (.light-theme) { a { color: purple; } } @scope (.dark-theme) { a { color: plum; } }</code>

Vous n'êtes actuellement pas en mesure d'utiliser quoi que ce soit à partir de cette liste sur votre site Web de production. Après des années à essayer de suivre ce genre de chose, je ne sais toujours pas comment cela finit par aller. Je pense que les spécifications doivent être achevées en premier et convenues. Le navigateur les sélectionne ensuite, espérant plus d'un. Je pense qu'une fois qu'ils les ont, les spécifications peuvent être finalisées?

Je ne sais pas. Peut-être que certains d'entre eux disparaîtront. Peut-être que certains d'entre eux se produiront très rapidement, tandis que d'autres seront très lents. Probablement, certains d'entre eux apparaîtront dans certains navigateurs, et pas dans d'autres. Hé, au moins nous avons des navigateurs à feuilles persistantes maintenant, donc quand les choses se produisent, cela se produit très rapidement. J'ai l'impression que nous sommes maintenant dans une étape où la plupart des fonctionnalités les plus grandes et les meilleures CSS sont soutenues par tous les navigateurs, mais avec tout ce qui va, nous allons être dans une phase de soutien plus fragmentée pour les dernières technologies.

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!