:has()
Cette nouvelle pseudo-class, permet de mettre en page les éléments HTML selon leur contenu. Par exemple :
Pour une liste d’articles, on pourrait en avoir certains contenant une images et d’autres sans images. On pourrait alors dire au CSS, mon article à par défaut une taille de texte à 42px et par contre, si mon article comprend une balise “img” tu réduis la taille du titre à 24px. Cela permet de manière très simple d’équilibrer visuellement les articles avec ou sans images.
/!\ au 24 août 2023, il n’est pas encore compatible avec Firefox
article h2 {
font-size: 42px;
}
article:has(img) h2 {
font-size: 24px;
}
En savoir plus ici : MDN web docs
@container
Le @container est une nouvelle règle en CSS qui permet de mettre en forme les éléments par rapport au container parent. C’est à dire qu’aujourd’hui, on peut dire à si mon header fait moins que 400px tu executes cette mise en page, sinon tu mets les propriétés par défaut. Concrètement, en CSS ça donnerait :
header {
container: header / inline-size;
display: flex;
flex-direction: row;
}
/* Si la largeur du container 'header' est plus petit que 400px */
@container header (width < 400px) {
flex-direction: column;
}
En savoir plus ici : MDN web docs
Transform (obsolète)
Il y a moins d’une année, le transform était encore obligatoire et depuis CSS3 nous simplifie la vie en ayant séparer chacune des valeurs “transform” en propriété unique, concrètement :
div {
/* avant 2023 */
transform: rotate(90deg) translate(10px, 10px) scale(2);
/* maintenant */
rotate: 90deg;
translate: 10px 10px;
scale: 2;
}
