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.
Au jour 80, j’ai expliqué que nous pouvions vérifier si un conteneur a une propriété et une valeur spécifiques attribuées et appliquer des styles supplémentaires en fonction de cette condition. Au jour 82, j’ai expliqué que la valeur d’une propriété peut provenir de différentes sources, subir des ajustements avant de devenir la valeur réelle et prendre différentes formes en cours de route. Pour utiliser des requêtes de style conteneur, il est important de comprendre quelle valeur est utilisée dans les requêtes.
Commençons agréablement et facilement. Nous avons un .card et la valeur de la --bg la propriété est red. Dans une requête de style, nous vérifions si c’est réellement le cas et appliquons un style conditionnel au <h1> imbriqué dans la carte.
<div class="card">
<h1>heyho</h1>
</div>.card {
--bg: red;
}@container style(--bg: red) {
h1 {
border: 10px dotted aqua;
}
}
Résultat : le <h1> obtient une belle bordure pointillée.
Si nous plaçons la valeur de la couleur dans sa propre propriété et interrogeons l’affectation de la var() fonction à la --bg propriété, les styles seront également appliqués.
html {
--color-red: red;
}.card {
--bg: var(--color-red);
}
@container style(--bg: var(--color-red)) {
h1 {
border: 10px dotted aqua;
}
}
C’est là que ça devient vraiment intéressant : si nous redéfinissons la requête sur style(--bg: red)les styles s’appliquent toujours.
html {
--color-red: red;
}.card {
--bg: var(--color-red);
}
@container style(--bg: red) {
h1 {
border: 10px dotted aqua;
}
}
Même si nous n’attribuons jamais --color-red pour --bgmais ils ont la même valeur, les styles s’appliquent toujours.
html {
--color-red: red;
}.card {
--bg: red;
}
@container style(--bg: var(--color-red)) {
h1 {
border: 10px dotted aqua;
}
}
Le “simple” L’explication est que les requêtes de style comparent l’égalité des valeurs calculées et non les affectations. La valeur calculée résulte de la résolution des dépendances de valeur, ce qui signifie généralement l’absolutisation des valeurs relatives. Les deux côtés de la requête sont évalués et résolus avant la comparaison.
Ainsi, dans chaque exemple, la comparaison réelle est quelque chose comme :
@container style("red": "red") {
h1 {
border: 10px dotted aqua;
}
}Voir sur CodePen.