Posté sur
Il est temps de me familiariser avec le CSS moderne. Il y a tellement de nouveautés en CSS que je connais trop peu. Pour changer cela, j’ai lancé #100DaysOfMoreOrLessModernCSS. Pourquoi un CSS plus ou moins moderne ? Parce que certains sujets porteront sur des fonctionnalités de pointe, tandis que d’autres existent depuis un certain temps déjà, mais j’ai juste peu ou pas d’expérience avec cela.
Les requêtes de style peuvent modifier considérablement la façon dont nous écrivons le CSS.
Avertir: Si vous êtes un fan de Tailwind ou de frameworks utilitaires similaires, vous pourriez trouver cet article offensant car il suggère d’utiliser moins de classes au lieu de plus.
Au jour 80, je vous ai présenté les requêtes de style conteneur. Je vous ai montré un exemple pratique d’un projet sur lequel je travaillais où les requêtes de style auraient été vraiment utiles : lorsque le composant suivant a une couleur d’arrière-plan sombre, j’ai défini une couleur de texte claire sur tous les enfants.
<div class="card">
<h2>light</h2>
</div><div class="card" style="--bg: var(--dark)">
<h2>dark</h2>
</div>
:root {
--dark: #000;
--light: aqua;
}.card {
--bg: var(--light);
background-color: var(--bg);
color: #000;
}
@container style(--bg: var(--dark)) {
* {
color: #fff;
}
}
Oui, je sais, ce n’est pas le meilleur exemple au monde, mais vous comprenez.
Ce qui est encore plus intéressant que d’interroger des propriétés personnalisées, que nous avons appliquées à une propriété d’un conteneur, est d’interroger des propriétés personnalisées dont le seul but est de nous dire quelque chose sur le conteneur. Ça n’a pas de sens ? Bon, voici un exemple.
Disons que nous avons un composant de carte de base.
Mon titre
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non id sint pariatur excepturi delectus, quas saepe, adipisci nemo, beatae quo minima molestiae mollitia expedita assumenda doloremque.
Si je veux une plus grande variation de ce composant, je fais ceci:
<div class="card" style="--card-size: large">
…
</div>Vous pouvez également créer une classe distincte, si vous n’êtes pas fan des styles en ligne.
.card-large {
--card-size: large;
}<div class="card card-large">
…
</div>Mon titre
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non id sint pariatur excepturi delectus, quas saepe, adipisci nemo, beatae quo minima molestiae mollitia expedita assumenda doloremque.
Note: Les requêtes de style conteneur ne sont toujours prises en charge dans Chrome que derrière un indicateur.
Ou si je veux une disposition verticale pour la grande carte, je fais ceci :
<div class="card" style="--card-size: large; --card-style: vertical">
…
</div>Mon titre
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non id sint pariatur excepturi delectus, quas saepe, adipisci nemo, beatae quo minima molestiae mollitia expedita assumenda doloremque. Magni nesciunt animi recusandae.
Voici les requêtes de style qui rendent cela possible :
@container style(--card-size: large) {
.card-wrapper {
--width: 30rem;
}h2 {
font-size: 2rem;
}
}
@container style(--card-style: vertical) {
.card-wrapper {
--width: 40rem;
--direction: row;
gap: 1rem;
}
h2 {
margin-top: 0.5em;
}
.card-image {
aspect-ratio: 1;
}
}
D’accord, cool, mais ne pouvons-nous pas simplement utiliser une classe pour ça ? Oui mais…
-
Au lieu d’appliquer un style conditionnel à l’aide d’une classe, nous pouvons maintenant faire quelque chose que nous avons l’habitude de faire depuis un certain temps déjà : ajouter des conditions via des requêtes. Il s’agit simplement de requêtes de style au lieu de requêtes multimédias.
-
Nous n’avons plus besoin de classes de modificateurs. La requête de style étend déjà les styles de ce bloc à une condition spécifique.
-
Nous pouvons créer des variations d’éléments qui n’ont pas ou n’ont pas besoin de classes.
<blockquote style="--type: pull-quote">
</blockquote> -
les propriétés personnalisées sont héréditaires, ce qui signifie que nous pouvons contrôler le style de toutes les cartes d’un élément en définissant la propriété sur l’élément parent.
<section style="--card-size: large">
<div class="card">…</div>
<div class="card">…</div>
<div class="card">…</div>
</section>ou même
<body style="--card-size: large">
<div class="card">…</div>
<div class="card">…</div>
<div class="card">…</div>
</body>
Les requêtes de style conteneur sont tellement nouvelles qu’elles n’existent même pas encore. J’ai hâte que les navigateurs les prennent en charge pour voir si et comment ils vont changer la façon dont nous écrivons CSS.
Voir sur CodePen.