Maçonnerie : Observer l'évolution d'une fonctionnalité CSS

En regardant les discussions sur CSS Masonry et ce qu'elles peuvent nous apprendre sur le développement de nouvelles fonctionnalités CSS. Quel est le rôle du CSSWG ? Quelle influence ont les navigateurs ? Que pouvons-nous apprendre de la façon dont les fonctionnalités passées ont évolué ?

Masonry: Watching a CSS Feature Evolve css-tricks.com

RSS Hunter • 13 oct. 2025

Nous avons complètement manqué width/height: stretch

TL;DR : stretch fait la même chose que déclarer 100%, mais ignore le padding lorsqu'il examine l'espace disponible.

We Completely Missed width/height: stretch css-tricks.com

RSS Hunter • 10 oct. 2025

Le truc avec la couleur contrastée

L'un de nos favoris, Andy Clarke, sur la seule chose qui empêche la fonction CSS contrast-color() d'atteindre sa véritable gloire : Pour la conception de mon site web, j'ai choisi une couleur de fond bleu foncé (#212E45) et un texte clair (#d3d5da). Ceci

The thing about contrast-color css-tricks.com

RSS Hunter • 8 oct. 2025

Créer avec shape-outside

Il existe tellement d'opportunités créatives pour utiliser shape-outside que je suis surpris de le voir si rarement utilisé. Alors, comment pouvez-vous l'utiliser pour ajouter de la personnalité à un design ? Voici comment je procède.

Getting Creative With shape-outside css-tricks.com

RSS Hunter • 6 oct. 2025

Même idée, pinceau différent

Naturellement, tout ressemble à du code quand je fixe une toile vierge. Que la toile soit du papier, un écran, une maquette Figma, ou quoi que ce soit d'autre.

Same Idea, Different Paint Brush css-tricks.com

RSS Hunter • 1 oct. 2025

Tour des nouvelles fonctionnalités CSS dans Safari 26

Safari 26 ajoute : 75 nouvelles fonctionnalités, 3 dépréciations et 171 autres améliorations. Voici toutes les nouveautés CSS que vous voudrez connaître.

Touring New CSS Features in Safari 26 css-tricks.com

RSS Hunter • 29 sept. 2025

Recréer l'animation Google Gemini de Gmail

John Rhea s'est mis au défi de recréer le bouton fantaisie en utilisant la nouvelle fonction CSS shape() saupoudrée d'animation pour s'en rapprocher.

Recreating Gmail’s Google Gemini Animation css-tricks.com

RSS Hunter • 26 sept. 2025

Arithmétique typée CSS

À partir de Chrome 140, nous pourrons calculer des valeurs numériques avec des types de données mixtes. Cela peut sembler peu, mais Amit montre à quel point c'est important, appelant cela "Computational CSS".

CSS Typed Arithmetic css-tricks.com

RSS Hunter • 24 sept. 2025

Sur les personas inclusives et la recherche utilisateur inclusive

Un ensemble de notes tirées de l'article d'Eric Bailey sur l'utilisation des personas inclusifs et de la recherche utilisateur.

On inclusive personas and inclusive user research css-tricks.com

RSS Hunter • 19 sept. 2025

Est-il temps de se désengager ?

De nombreuses fonctionnalités de Sass que nous avons appris à aimer ont été intégrées au CSS natif sous une forme ou une autre. Alors, devrions-nous encore utiliser Sass ? C'est ainsi que le développeur Jeff Bridgforth y réfléchit.

Is it Time to Un-Sass? css-tricks.com

RSS Hunter • 17 sept. 2025

La fonctionnalité CSS la plus détestée : cos() et sin()

Je veux examiner les utilisations pratiques des fonctions trigonométriques CSS. Et nous commencerons par ce qui est peut-être la fonction la plus populaire de la "pire" fonctionnalité : sin() et cos().

The “Most Hated” CSS Feature: cos() and sin() css-tricks.com

RSS Hunter • 15 sept. 2025

Que pouvons-nous réellement faire avec une forme d'angle ?

Quand j'ai commencé à jouer avec le code, les coins arrondis nécessitaient cinq images de fond ou une image sprite probablement créée dans Photoshop, alors quand border-radius est apparu, je me souviens que tout le monde pensait que c'était la meilleure chose qui soit.

What Can We Actually Do With corner-shape? css-tricks.com

RSS Hunter • 12 sept. 2025

Compiler plusieurs fichiers CSS en un seul

Stu Robson décrit deux façons de compiler plusieurs fichiers CSS lorsque vous ne vous appuyez pas sur Sass pour cela.

Compiling Multiple CSS Files into One css-tricks.com

RSS Hunter • 11 sept. 2025

Quelles sont vos 4 propriétés CSS préférées ?

Chacun a une opinion différente, ce qui est formidable car cela démontre le métier désordonné et non linéaire qu'est la pensée en tant que développeur front-end.

What’re Your Top 4 CSS Properties? css-tricks.com

RSS Hunter • 10 sept. 2025

Composition en CSS

Le CSS est un langage composable par nature. Cette nature de composition est déjà intégrée dans la cascade. Nous ne parlons tout simplement pas de composition comme d'une "grande chose" car c'est la nature du langage.

Composition in CSS css-tricks.com

RSS Hunter • 8 sept. 2025

Ce que vous devez savoir sur l'interpolation des couleurs en CSS.

Color quoi ? Sunkanmi Fafowora explique comment une tâche quotidienne pour CSS peut être utilisée pour créer de meilleures expériences de couleurs.

What You Need to Know About CSS Color Interpolation css-tricks.com

RSS Hunter • 5 sept. 2025

La fonction CSS light-dark() devrait-elle prendre en charge plus de valeurs que light et dark ?

La fonction light-dark() est actuellement conçue pour prendre en charge seulement deux schémas de couleurs. Devrait-elle en supporter d'autres ? Sunkanmi Fafowora répond oui et non.

Should the CSS light-dark() Function Support More Than Light and Dark Values? css-tricks.com

RSS Hunter • 2 sept. 2025

Ascenseur CSS : une machine d'état purement CSS avec navigation par étage

Dans cet article, l'auteur Chris Sabourin vous guide à travers la façon dont les fonctionnalités CSS modernes peuvent créer un ascenseur entièrement fonctionnel et interactif qui sait où il est, où il se dirige et combien de temps il lui faudra pour y arriver. Aucun JavaScript requis.

CSS Elevator: A Pure CSS State Machine With Floor Navigation css-tricks.com

RSS Hunter • 29 août 2025

Une astuce de panier d'achat avec boutons radio

Voici une approche pour animer les produits ajoutés à un panier d'achat qui gère un nombre infini d'éléments en utilisant une variante de l'ancien "Checkbox Hack" (astuce du checkbox).

A Radio Button Shopping Cart Trick css-tricks.com

RSS Hunter • 27 août 2025

Devenir créatif avec les images dans le contenu de longue forme

Les images dans le contenu en long format peuvent (et devraient souvent) faire plus que simplement illustrer. Elles aident à définir le rythme, influencent les émotions des lecteurs et ajoutent une personnalité que les mots seuls ne peuvent pas toujours transmettre.

Getting Creative With Images in Long-Form Content css-tricks.com

RSS Hunter • 25 août 2025

Texte en couches 3D : Interactivité et dynamisme

Dans ce troisième et dernier chapitre, nous allons explorer l'interactivité en ajoutant du JavaScript, en commençant par un simple effet :hover, et en terminant par un texte entièrement responsive et rebondissant qui suit votre curseur en temps réel.

3D Layered Text: Interactivity and Dynamicism css-tricks.com

RSS Hunter • 22 août 2025

Texte en couches 3D : Mouvement et Variations

Dans ce chapitre, nous explorerons différentes façons d'animer l'effet, d'ajouter des transitions et de jouer avec diverses variations. Nous verrons comment le mouvement peut améliorer la profondeur et comment de subtiles modifications peuvent créer une ambiance complètement nouvelle.

3D Layered Text: Motion and Variations css-tricks.com

RSS Hunter • 20 août 2025

Texte en couches 3D : les bases

Un client m'a demandé de créer un effet de texte gonflé. Avec un peu de malice et du CSS avancé, j'ai réussi à obtenir un résultat dont je suis vraiment fier, qui est couvert dans cette série en trois parties.

3D Layered Text: The Basics css-tricks.com

RSS Hunter • 18 août 2025

Couvrir caché=jusqu'à découverte

Histoire courte : Ajouter l'attribut "hidden" avec la valeur "until-found" à un élément en HTML permet de rendre tout contenu caché à l'intérieur de l'élément trouvable dans le navigateur avec la fonction de recherche dans la page.

Covering hidden=until-found css-tricks.com

RSS Hunter • 15 août 2025

Quelques choses que vous ne saviez peut-être pas sur l'élément ancre et son attribut href

Il est facile de prendre les superpouvoirs d'URL pour acquis, même si vous avez déjà ces modèles sous votre ceinture.

A Few Things About the Anchor Element’s href You Might Not Have Known css-tricks.com

RSS Hunter • 15 août 2025

Sur la conformité à l'accessibilité, les systèmes de design et les unités de base CSS

Mon cerveau ne peut s'empêcher d'essayer d'établir des liens entre des idées apparemment disparates. Et c'est exactement ce qui s'est produit hier lorsque j'ai lu : L'article de Hidde « Les composants peuvent-ils respecter les WCAG ? » L'article de Joas « Automatiser les systèmes de design » L'article de Zell « Nous pourrions avoir besoin de quelque chose entre racine et relatif »

On Accessibility Conformance, Design Systems, and CSS “Base” Units css-tricks.com

RSS Hunter • 14 août 2025

Il se pourrait que nous ayons besoin de quelque chose entre les unités CSS racine et relatives pour les « éléments de base »

J'ai fini par comprendre que peut-être nous devons avoir une unité entre les valeurs racine et relatives. Cela ouvrirait une toute nouvelle possibilité lors de la création de composants réutilisables.

We Might Need Something Between Root and Relative CSS Units for “Base Elements” css-tricks.com

RSS Hunter • 13 août 2025

Questions CSS

CSS-Questions est un mini-site où vous pouvez tester vos connaissances en CSS avec plus de 100 questions.

CSS-Questions css-tricks.com

RSS Hunter • 12 août 2025

Atelier pratique de mise en page : Bricolage et Nonsens

Le vétéran du design web Andy Clarke propose un atelier de deux heures sur la création de mises en page pratiques et créatives le 18 septembre. Inscrivez-vous et économisez quelques dollars avec un code promo.

Stuff & Nonsense Practical Layout Workshop css-tricks.com

RSS Hunter • 11 août 2025

Devenir créatif avec les citations

Comment concevoir des citations en bloc et des citations pour refléter l'identité visuelle d'une marque et aider à raconter son histoire ? Voici comment je le fais en personnalisant l'élément HTML blockquote à l'aide de bordures, de guillemets décoratifs, de formes personnalisées et de quelques propriétés inattendues.

Getting Creative With Quotes css-tricks.com

RSS Hunter • 11 août 2025

Comment se préparer aux questions d'entretien spécifiques au CSS

Obtenez des conseils pour répondre à un ensemble de 10 questions relatives au CSS que vous rencontrerez probablement lors d'entretiens en développement front-end.

How to Prepare for CSS-Specific Interview Questions css-tricks.com

RSS Hunter • 8 août 2025

Ramener le parallax avec des animations CSS pilotées par défilement

Le parallax est un motif où différents éléments d'une page web se déplacent à des vitesses variables lorsque l'utilisateur fait défiler, créant une apparence en trois dimensions, en couches. Il nécessitait autrefois du JavaScript. Maintenant, nous avons des animations déclenchées par le défilement en CSS, qui est exempt du blocage du thread principal qui peut affecter les animations JavaScript.

Bringing Back Parallax With Scroll-Driven CSS Animations css-tricks.com

RSS Hunter • 6 août 2025

Penser profondément à la mise en page et à la dénomination des couleurs

Aujourd'hui, je souhaite discuter de quelques modèles de nommage de palettes de couleurs que la communauté utilise, et de la manière dont je propose de nous améliorer, afin que nous obtenions à la fois flexibilité et beauté.

Thinking Deeply About Theming and Color Naming css-tricks.com

RSS Hunter • 4 août 2025

Conserver les démonstrations d'articles vivantes lorsque les API tierces meurent

Existe-t-il un moyen de créer des démonstrations qui ne tombent pas en panne lorsque les services sur lesquels elles dépendent échouent ? Comment pouvons-nous nous assurer que les démonstrations éducatives restent disponibles le plus longtemps possible ?

Keeping Article Demos Alive When Third-Party APIs Die css-tricks.com

RSS Hunter • 30 juil. 2025

Créer une mise en page maçonnée qui fonctionne aujourd'hui

J'ai continué à essayer de comprendre comment faire fonctionner la maçonnerie aujourd'hui avec d'autres navigateurs. Je suis ravi de signaler que j'ai trouvé un moyen - et, bonus ! - que le support peut être fourni avec seulement 66 lignes de JavaScript.

Making a Masonry Layout That Works Today css-tricks.com

RSS Hunter • 28 juil. 2025

Comment découvrir un astuce CSS

Inventons-nous ou découvrons-nous les astuces CSS ? Lee Meyer explique comment les limitations créatives, la pensée récursive et les combinaisons inattendues conduisent à ses idées les plus intéressantes.

How to Discover a CSS Trick css-tricks.com

RSS Hunter • 25 juil. 2025

Formation certifiante en conception atomique

Brad Frost a introduit le concept de « Design Atomique » il y a bien longtemps, en 2013. Il a même écrit un livre à ce sujet. Et nous avons tous pris note, car ce terme fait partie de notre lexique depuis lors. C'est une belle façon…

Atomic Design Certification Course css-tricks.com

RSS Hunter • 24 juil. 2025

Un premier aperçu de l'API Interest Invoker (pour les popovers déclenchés par survol)

Chrome 139 expérimente l'API d'Invokeur d'Intérêt proposée par Open UI, qui serait utilisée pour créer des infobulles, des menus de survol, des cartes de survol, des actions rapides et d'autres types d'interfaces utilisateur pour afficher plus d'informations avec des interactions de survol.

A First Look at the Interest Invoker API (for Hover-Triggered Popovers) css-tricks.com

RSS Hunter • 23 juil. 2025

Une introduction à la capture de focus

Le piégeage de focus concerne la gestion du focus à l'intérieur d'un élément, de sorte que le focus reste toujours à l'intérieur de celui-ci. Le processus entier semble simple en théorie, mais il peut être très difficile à mettre en œuvre en pratique, principalement en raison des nombreux éléments à gérer.

A Primer on Focus Trapping css-tricks.com

RSS Hunter • 21 juil. 2025

Devenir créatif avec les lettres Versal

Une lettre versale est un élément de décoration typographique trouvé dans les manuscrits enluminés et la conception de livre traditionnelle, où elle ajoute de l'intérêt visuel et aide à guider l'œil du lecteur vers le point où il devrait commencer.

Getting Creative With Versal Letters css-tricks.com

RSS Hunter • 18 juil. 2025

Obtenir clarté sur le verre liquide d'Apple

Notes réunies sur Liquid Glass, le nouveau langage de design d'Apple qui a été présenté lors de la WWDC 2025. Ces liens sont une sélection soignée de publications et de ressources que j'ai trouvées utiles pour comprendre le contexte de Liquid Glass, ainsi que des techniques pour le recréer en code.

Getting Clarity on Apple’s Liquid Glass css-tricks.com

RSS Hunter • 17 juil. 2025

Ce que j'ai retenu de l'enquête État du développement 2025

Les résultats de l'enquête State of Devs 2025 sont sortis ! Sunkanmi Fafowora met en avant quelques résultats clés concernant la diversité, la santé et les salaires.

What I Took From the State of Dev 2025 Survey css-tricks.com

RSS Hunter • 16 juil. 2025

Définir la longueur de ligne en CSS (et adapter le texte à un conteneur)

Les nombreuses façons de gérer la longueur de ligne lorsqu'on travaille avec du texte... y compris deux propriétés proposées qui pourraient le rendre plus facile à l'avenir.

Setting Line Length in CSS (and Fitting Text to a Container) css-tricks.com

RSS Hunter • 14 juil. 2025

Le cours Maestro de la mise en page

La mise en page. C'est l'un de ces choses faciles à apprendre, difficiles à maîtriser, comme on dit de jouer de la basse. Non pas parce qu'il est innément difficile de, disons, placer deux éléments côte à côte, mais parce qu'il y a beaucoup, beaucoup de façons de l'aborder. Et …

The Layout Maestro Course css-tricks.com

RSS Hunter • 11 juil. 2025

En-tête collante déclenchée par défilement

Je jouais avec des animations déclenchées par le défilement, cherchant toutes sortes de choses aléatoires que l'on pouvait faire. C'est ainsi que j'ai eu l'idée d'animer les titres principaux et, en utilisant des animations déclenchées par le défilement, de changer les titres en fonction de la position de défilement de l'utilisateur.

Scroll-Driven Sticky Heading css-tricks.com

RSS Hunter • 11 juil. 2025

Meilleures formes CSS avec shape() — Partie 4 : Fermer et Déplacer

La fonction shape() avec les commandes close et move peut ne pas être celles que vous utilisez fréquemment, mais sont incroyablement utiles pour certaines formes.

Better CSS Shapes Using shape() — Part 4: Close and Move css-tricks.com

RSS Hunter • 7 juil. 2025

The Gap contre-attaque : désormais personnalisable

Styler l'espace entre les éléments de mise en page - l'écart - a généralement nécessité quelques astuces ingénieuses. Mais une nouvelle fonctionnalité CSS change tout cela avec juste quelques propriétés CSS simples qui rendent facile et flexible l'affichage de séparateurs stylisés entre vos éléments de mise en page.

The Gap Strikes Back: Now Stylable css-tricks.com

RSS Hunter • 1 juil. 2025

Utilisation des couches de cascade CSS avec les utilitaires Tailwind

Étant le mauvais garçon que je suis, je ne considère pas l'approche par défaut de Tailwind pour les couches de cascade comme la "meilleure". Après plus d'un an d'expérimentation avec Tailwind et du CSS vanilla, j'ai découvert ce que je crois être une solution meilleure.

Using CSS Cascade Layers With Tailwind Utilities css-tricks.com

RSS Hunter • 30 juin 2025

Recettes de blobs CSS

Blob, Blob, Blob. Quelle est la façon la plus efficace de créer des formes blob en CSS ? Il s'avère, comme toujours, qu'il en existe plusieurs. Comparons-les ensemble !

CSS Blob Recipes css-tricks.com

RSS Hunter • 27 juin 2025

KelpUI

KelpUI est une nouvelle bibliothèque que Chris Ferdinandi développe, conçue pour exploiter les fonctionnalités CSS plus récentes et les composants Web. J'ai pris plaisir à suivre Chris tandis qu'il publiait une série d'articles en cours détaillant son processus de pensée derrière la bibliothèque, allant très loin dans son approche. Vous obtenez vraiment une image claire de sa stratégie et j'adore cela.

KelpUI css-tricks.com

RSS Hunter • 26 juin 2025