CSS puissant et stable, à utiliser dès aujourd'hui.
Je pense que chaque développeur front-end doit savoir que :has()
est plus qu'un "sélecteur parent", comment et pourquoi utiliser un subgrid
, comment imbriquer avec la syntaxe CSS intégrée, comment laisser le navigateur équilibrer le retour à la ligne du titre et comment utiliser les unités de requête de conteneur.
Cet article fait suite aux six extraits CSS que tout développeur front-end devrait connaître en 2023 de l'année dernière.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has()
est disponible dans tous les principaux navigateurs depuis fin 2023. Ce nouveau sélecteur semble petit et innocent, mais vous serez surpris de tous les cas d'utilisation qu'il peut débloquer : jeux, réactivité, mise en page sensible au contenu, composants intelligents et bien d'autres éléments abordés dans cet article de Jhey.
Voici quelques exemples d'utilisation de :has()
comme sélecteur parent. Il a reçu ce nom, car l'objet d'un sélecteur se trouve généralement à la fin, comme ul li
, où li
est l'objet et reçoit les styles. Avec :has()
, l'élément au début du sélecteur peut devenir l'objet. Dans l'exemple suivant, le bouton comporte un espace si un élément est présent avec une classe .icon
. La carte change d'orientation si elle contient une image.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Un sélecteur très demandé est celui qui permet de modifier une mise en page en fonction du nombre d'éléments qu'elle contient. Cela est désormais possible avec :has()
, car il peut conserver le conteneur comme sujet tout en interrogeant le nombre d'enfants.
main:has(> :nth-child(5)) {…}
Autre exemple de niveau supérieur : modifiez les styles définis sur l'ensemble du document lorsqu'une case à cocher spécifique de la page est activée :
html:has(#dark-mode:checked) {…}
Il s'agit de cas d'utilisation simples qui ne modifient pas l'objet du sélecteur. Si vous vous contentez de regarder des exemples comme celui-ci, vous pourriez penser que :has()
se limite à être un sélecteur parent. Prenons toutefois les exemples suivants. Ils recherchent un élément en fonction d'un ancêtre commun, puis font pivoter l'objet du sélecteur vers un enfant plus loin dans la page.
Celui-ci affiche un élément d'erreur de formulaire si l'une de ses entrées n'est pas valide:
form:has(:user-invalid) .error {
display: block;
}
Celui-ci fait glisser la zone de contenu principale lorsqu'un panneau latéral a la classe .--is-open
:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Voici une démonstration amusante qui utilise :has()
comme sélecteur parent, :has()
avec des requêtes de quantité et des requêtes de conteneur pour créer une mise en page en grille capable d'afficher élégamment 1 à 12 éléments en mode portrait ou paysage:
Créer une sous-grille
subgrid
Pendant de nombreuses années, la communauté Web du front-end a demandé une sous-grille pour compléter et finaliser le moteur de mise en page en grille CSS extrêmement populaire et puissant. Elle est désormais disponible dans les trois principaux moteurs.
Cliquez ici pour en savoir plus sur les sous-grilles.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
Nidification au format CSS
nesting
L'imbrication CSS intégrée est disponible dans tous les principaux navigateurs depuis 2023. J'ai même mis à jour mon site Web pour supprimer le processus de compilation qui compilait l'imbrication, et je livre maintenant une feuille de style plus petite. Oui, les feuilles de style avec imbrication sont plus petites, et tous les outils de développement du navigateur sont prêts à les représenter.
Pour en savoir plus, consultez la présentation de la syntaxe d'imbrication CSS. L'exemple de code suivant présente une syntaxe.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Laisser le navigateur équilibrer les titres
balance
pretty
Sans text-wrap: balance
, les développeurs et les rédacteurs doivent se contenter d'indices de saut de ligne tels que les éléments <wbr>
ou ­
. C'est une bataille perdue d'avance, car dès que le contenu est traduit, mis à l'échelle ou modifié de quelque manière que ce soit, il n'est pas garanti que ces indices de mise en page soient au bon endroit pour la nouvelle présentation du contenu.
Avec le retour à la ligne équilibré, vous pouvez laisser le navigateur s'en charger. Vous pouvez voir une comparaison dans le Codepen suivant.
Utiliser des unités de requête de conteneur
cqw
L'article de l'année dernière suggérait que chaque développeur front-end devrait savoir écrire une requête de conteneur. Si vous ne l'avez pas encore fait, faites de 2024 l'année où vous vous lancerez, et découvrez également les unités de requête de conteneur. Pour en savoir plus, Ahmad Shaded a écrit un excellent article sur les unités de requête de conteneur en 2021.
Six nouvelles unités de queries de conteneurs sont disponibles:
- Variante
cqi
intégrée. - Variante de largeur
cqw
. - Variante de bloc
cqb
. - Une variante de hauteur
cqh
. - Variante pour la longueur la plus courte
cqmin
. - Variante pour la longueur la plus longue
cqmax
.
Prenons l'exemple d'un scénario d'animations relatives et intrinsèques à un conteneur. Élément enfant qui glisse entièrement hors de son conteneur à l'aide de 100 cqi, soit 100% de la taille en ligne du conteneur.
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Voici une carte avec une typographie responsive de conteneur et une image qui s'adapte à l'orientation du conteneur, et qui est réduite de moitié si l'orientation est en mode paysage.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Si vous ne connaissez pas ces unités, nous vous conseillons de consulter toutes les unités disponibles en 2024.