L'article explore les nouvelles capacités de la fonction attr() en CSS, qui permet désormais d'utiliser des valeurs autres que du texte, comme des couleurs, des nombres, et des pourcentages. Cette fonctionnalité, bien que non supportée par tous les navigateurs, offre une flexibilité accrue pour styliser des éléments HTML en fonction de leurs attributs. L'auteur présente divers cas d'utilisation, tels que l'assignation de colonnes dans une grille CSS, la gestion des délais d'animation, et la définition de couleurs dynamiques, tout en soulignant les avantages en termes de séparation des préoccupations et de réduction des conflits CSS.

L'article décrit le processus de recréation d'une animation P5.js de Rach Smith en utilisant CSS, en particulier la propriété offset-path. Initialement, l'auteur a tenté de suivre manuellement les positions et directions de chaque boîte dans l'animation, ce qui s'est avéré complexe. Cependant, il a découvert que l'utilisation de offset-path avec la fonction inset() permettait de créer un chemin carré le long duquel les boîtes pouvaient se déplacer en animant les valeurs de offset-distance. Cette méthode a simplifié le processus et permis de distribuer uniformément les boîtes grâce à des valeurs de animation-delay calculées proportionnellement. L'article explore également l'utilisation de offset-path avec d'autres formes comme polygon() pour créer des animations intéressantes et variées.

Les CSS Relative Colors permettent de manipuler dynamiquement les couleurs sans recourir à des préprocesseurs comme Sass. Ils offrent une méthode native pour ajuster l'opacité et créer des variations de couleurs directement en CSS. Cette fonctionnalité est supportée par les principaux navigateurs et permet de simplifier la gestion des couleurs dans les projets web. Les couleurs relatives utilisent des fonctions comme rgb() et hsl() pour modifier les canaux de couleur, facilitant ainsi la création de thèmes et d'effets visuels cohérents. Elles peuvent également être combinées avec color-mix() pour des ajustements plus complexes, offrant une flexibilité accrue dans le design web.

Tout est dans le titre

En résumé, si les valeurs comparées dans max sont un calcul et qu'un de ces calculs échoue, l'intégralité de max échoue... donc il vaut mieux entourer le calcul par un @supports

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