Tout est dans le titre

Il s'agit d'une façon plus fine d'utiliser les Cross-Document View Transitions, qui permettent de faire des effets de transition quand on passe d'une page à une autre via un clic.

Tout est dans le titre

Tout est dans le titre

L'auteur rappelle le principe de moindre pouvoir : choisir le langage le moins puissant pour un but donné — on permet ainsi de laisser le navigateur la manière d'accomplir ce que l'on souhaite.

Il présente ensuite quelques éléments / fonctionnalités pour lesquelles JavaScript peut être remplacé avantageusement par du HTML / CSS :

• Custom Switches
• Datalist, un composant avec autocomplétion native
• Un Color picker
• Accordions
• Dialog modals

Il rappelle à chaque fois les meilleures pratiques d'accessibilité.

Tout est dans le titre

une bibliothèque d'animations CSS pour des loader

Un guide assez complet sur l'utilisation de text-wrap: balance et text-wrap: pretty

Tout est dans le titre

Tout est dans le titre

2 nouveautés CSS intéressantes :

• Une unité : le lh pour line-height -> très pratique pour avoir un design avec un bon rythme vertical (espacement entre paragraphes par exemple) À noter qu'il existe le rlh pour root line-height
• Une propriété : margin-trim qui permet de supprimer la marge top du 1er élément enfant et la marge bottom du dernier. Supporté uniquement par safari pour le moment, mais il y a des astuces pour avoir le même comportement sur les autres navigateurs

Tout est dans le titre

Tout est dans le titre : ça parle de scroll driven animation

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Un effet "verre" avec l'utilisation de la propriété CSS backdrop-filter

Un guide complet sur l'utilisation de overflow: clip

Une explication sur le fonctionnement des modes light / dark (et pourquoi la fonction css light-dark est à utiliser)