Une bonne astuce pour élargir la zone cliquable d'un bouton de manière invisible et sans distordre le visuel du bouton lui-même.
button::after {
content: "";
position: absolute;
inset: -5px;
}Il semblerait qu'il soit maintenant possible d'utiliser Tailwind (un framework CSS) en meilleure harmonie avec le CSS natif. On peut par exemple utiliser les tokens de Tailwind dans du CSS classique, rendant inutile l'usage de @apply. Je n'aime toujours pas ces frameworks "utility-first" mais il faut admettre que ce virage est fait dans la bonne direction.
Styliser le gap CSS. Encore un peu tôt pour l'utiliser, c'est uniquement supporté par Chrome pour l'instant.
Rester à la page avec CSS. Des articles chaque semaine.
Linter du code CSS avec Stylelint comme on le fait généralement pour le code JS avec ESLint.
Une excellente explication de la notion de height (hauteur) en CSS et de sa différence majeure avec width (largeur) que je n'avais jamais pris le temps de verbaliser mais qui est complètement sensée.
La propriété CSS currentColor est souvent méconnue.
Un guide utile pour l'API view-transiton.
Voir aussi https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/
Une sorte de reset CSS un peu différent, qui se focalise sur l'amélioration de certains styles manquants par défaut dans les navigateurs, notamment pour l'accessibilité.
La fonction CSS shape() permet de définir des formes avec la même logique que SVG mais au lieu de M, L etc. on utilise des mots clés CSS comme top, bottom, 50%, ce qui permet de rendre les formes responsives !
Je ne savais pas que le style par défaut de la balise <h1> peut varier si elle est contenue à l'intérieur d'une ou plusieurs <section> par exemple. Cette particularité disparaîtra bientôt.
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.