J'ai toujours beaucoup de mal avec les librairies CSS utility-first type Tailwind mais il faut admettre que son argumentation tient la route sur pas mal de points.
Un choix d'organisation intéressant pour CSS. L'idée est de répartir vos classes dans 3 catégories distinctes : le cosmétique (apparence visuelle de vos composants), le layout (les différentes façons d'agencer vos composants) et le spacing (des classes utilitaires pour créer des espaces dans et entre vos composants).
L'approche est que ces 3 catégories soient mutuellement exclusives. Interdiction de mettre du margin ou du display dans la catégorie cosmétique par exemple.
Vous construisez ensuite votre site en piochant dans les différentes classes disponibles. Ça favorise la réutilisabilité et l'harmonie.
C'est une philosophie qu'on peut placer à mi-chemin entre le CSS vanilla et les frameworks utilitaires type Tailwind.
Douze propriétés CSS modernes à connaître pour résoudre des problèmes autrefois difficiles à contourner.
De la difficulté de centrer des trucs dans d'autres trucs. Délicieux à lire 🤗
Le layout CSS de type "masonry" (une grille d'éléments de taille différentes, sans gap) pourrait arriver un jour nativement dans CSS.
Un outil qui analyse votre code CSS.
Exemple d'utilisation du sélecteur CSS @page pour configurer précisément le rendu de vos pages web lors de l'impression. L'auteur utilise cette technique pour partager des formulaires dynamiques plutôt que des fichiers PDF, tout en conservant la possibilité d'imprimer sur papier ou PDF pour les utilisateurs.
Attention cependant aux conseils à la fin de l'article. Ajouter la clé primaire des données comme paramètre dans l'URL et charger les données en JavaScript présente le risque qu'un utilisateur modifie à la main ce paramètre et récupère des données auxquelles il ne devrait pas avoir accès. Si le format de la clé primaire est un identifiant généré aléatoirement et suffisamment long (type UUID), le risque est moindre.
Un guide intéractif pour le nouveau sélecteur :has en CSS.
Un outil pour convertir des polices d'écriture en différents formats (dont WOFF et WOFF2) et qui génère le code CSS pour les inclure facilement dans vos projets.
Cet article (🇬🇧) explique tellement bien ce qui cloche avec Tailwind.css ! Ça me rassure de voir que ce point de vue existe toujours. Tailwind est simplement très très fort en communication/manipulation.
À lire !
Because trends are temporary, but standards are forever.
Une vidéo de 1h54 qui vous apprendra à développer un jeu simple de zéro en HTML, CSS et JS, sans aucune dépendance, avec l'élément HTML <canvas>.
Le fait de partir de rien sans aucun moteur graphique rend l'approche super intéressante !
Une collection de 4000+ éléments HTML + CSS (boutons, checkboxes, etc.) à copier/coller dans vos projets.
Via https://korben.info/uiverse-plus-3500-elements-interface-utilisateur-copier-coller-projets-web.html
Comme toujours, un article passionnant de Josh Comeau qui explore les différentes façon de centrer un élément HTML en CSS. Didactique et plein de petites astuces très utiles. Vous allez presque obligatoirement apprendre quelque chose 😉
max-width: fit-content; 😍
Un énorme regroupement de tutoriels relatifs au développement web.
Un article en français qui présente le sélecteur CSS :has avec quelques cas d'utilisation.
Je sens que ça va me prendre un peu de temps de l'appréhender, mais il ouvre de belles possibilités :)
Une astuce pour mettre en surbrillance la ligne et la colonne auxquelles appartient la cellule d'un tableau HTML, uniquement avec CSS.
Une liste de thèmes CSS "classless" ce qui signifie qu'ils se contentent de styliser les composants HTML par défaut, sans utiliser de classes supplémentaires.
Ces styles sont un bon moyen de proposer un style moderne tout en conservant un code HTML aussi simple que possible.
Le sélecteur CSS :has est à présent géré par tous les navigateurs majeurs. Voici quelques exemples d'utilisation.
Un tuto simple qui aborde l'animation d'un SVG simple avec des transitions CSS.