Premier draft pour les spécifications CSS qui permettront de styliser les composants natifs.
Ajoutez une touche d'animation (ou plusieurs !) à vos sites web.
Un outil interactif pour comprendre le positionnement Flexbox en CSS et expérimenter ses propriétés.
ESLint permet maintenant de linter le code CSS.
Il existe enfin une façon standard de styliser les barres de défilement (scrollbars) avec scrollbar-color et scrollbar-width.
Utilisation de CSS Grid pour créer un bloc duquel le contenu dépassé partiellement aux extrémités, mais de manière harmonieuse.
Le code final reste assez complexe surtout si vous n'êtes pas familier avec CSS Grid 😬
2 ajouts intéressants à CSS, surtout margin-trim qui permet à un élément parent d'annuler toutes les marges des éléments enfants avec lesquelles il est en contact.
Configurer en détail les éternelles listes numérotées est désormais possible en CSS.
La nouvelle propriété CSS content-visibility permet de faire du lazy loading sur des morceau entiers du DOM pour améliorer le temps de chargement de vos pages.
Les éléments à qui est attribuée la valeur auto ne seront "peint" ou rendu par le navigateur seulement lorsqu'ils s'apprêtent à être visible, après que l'utilisateur ait suffisamment fait défilé la page.
Et c'est un bon candidat à l'amélioration progressive puisque les navigateurs qui ne connaissent pas cette propriété se contenteront de l'ignorer.
Je ne connaissais pas la méthode animate() utilisable sur un élément HTML qui permet de créer et déclancher une animation CSS à la volée, en JavaScript, un peu à la manière de ce que permettent les librairies d'animation, mais en natif du coup.
Le positionnement par ancres de CSS (uniquement dans les navigateurs basés sur Chromium pour le moment) ouvre énormément de possibilités.
Quelques nouveautés CSS quo vont devenir de plus en plus utilisables en 2025.
Ajouter l'attribut inert à un élément HTML le rend — lui et tous ses descendants — inopérants. Il devient impossible d'interagir avec eux.
L'article aborde les différences avec les attributs ou les propriétés CSS similaires qu'il ne remplace pas, tels que disabled, visability: hidden, etc.
Par exemple, c'est ce que les modales HTML natives utilisent pour empêcher les interactions avec ce qu'elles recouvrent.
Exploration des propriétés CSS @starting-style et transition-behavior: allow-discrete pour les animations.
Les valeurs discrètes sont les valeurs non-numeriques telles que block, inline, etc.
Pré-charger les polices de caractère dont on sait à l'avance qu'elles seront utilisées, pour que le navigateur n'attende pas d'avoir chargé le CSS pour les télécharger.
Cette technique permet de limiter les layout shifts provoqués par le remplacement de la police par défaut par la police personnalisée, et d'améliorer le temps de chargement global de la page.
La propriété CSS interpolate-size est un un peu le nouveau box-sizing: border-box; : elle permet de transitioner depuis ou vers un mot clé (auto par exemple) en plus des grandeurs fixes, chose qui a longtemps été impossible avec du pur CSS.
Il suffit de la déclarer à la racine et elle s'applique partout. Mais elle n'est pas activé par défaut pour éviter les régression sur les anciens sites.
L'usage des popover HTML comme alternative à l'attribut title qui n'est ni accessible ni utilisable sur mobile.
Il y a tout de même encore quelques efforts à faire pour le positionnement et l'interactivité.
Un outil pour faciliter l'usage des fonction CSS d' "easing" (aucune idée de comment traduire ça).
Très bien conçu et très sympa esthétiquement, avec cette petite touche néon :)
Initiation aux animations de défilement (scroll animation) en CSS.
La transition CSS à laquelle les développeurs n'osaient même pas rêver pendant de nombreuses années est maintenant possible 🥳