Ange Chierchia

Développeur Web full-stack

css

  • Anchor Positioning in CSS

    Bookmarked The Basics of Anchor Positioning by Ahmad Shadeed.

    C’est toujours le même problème : t’as besoin de positionner un élément par rapport à un autre… mais ils sont pas dans la même boîte. Résultat : t’injectes du JS, tu bidouilles le DOM, tu fais des hacks moches avec position: absolute.

    Et là, paf. Anchor Positioning débarque avec une promesse sexy : tu peux cibler un autre élément comme ancre de positionnement — même s’il est plus haut dans le DOM. anchor() fait le job. position-try() ajoute même une logique de fallback. Et cerise sur le gâteau : pas besoin que ce soit le parent direct.

    C’est encore un draft. Mais franchement, vu le nombre de fois où j’ai dû recoder des tooltips, popups ou menus qui s’ouvrent “vers la bonne direction”… j’ai envie d’y croire.

    Et c’est typiquement le genre de feature CSS que t’aurais rêvé d’avoir avant : puissante, propre, explicite.

  • Un-Sass’ing my CSS

    Bookmarked Un-Sass’ing my CSS | Always Twisted.

    Ça m’a fait sourire. On a tous eu notre période Sass : mixins partout, variables, nesting à outrance. C’était grisant, ça donnait l’impression d’être plus « pro ». Mais le temps passe, le CSS a grandi, et beaucoup de ces artifices ne servent plus à grand-chose.

    L’article raconte ce cheminement : désapprendre Sass pour réapprendre le CSS brut. Pas comme une régression, mais comme un gain de clarté. Quand tu enlèves la couche intermédiaire, tu te rends compte que ton code respire mieux, que le navigateur fait déjà pas mal de choses tout seul.

    Ça m’a fait réfléchir à ma propre boîte à outils. On accumule, on optimise, on complexifie… et puis un jour on redécouvre que la simplicité, c’est aussi une forme de puissance. Peut-être qu’au fond, le vrai luxe en dev, c’est d’avoir moins à maintenir.

    Un rappel utile : parfois, coder mieux, c’est surtout coder moins.

  • CSS Relative Colors

    Bookmarked CSS Relative Colors by Ahmad Shadeed.

    Le “Relative Color Syntax” change la façon dont on pense nos palettes : on ne stocke plus des variantes figées, on décrit des relations. En clair : une seule source (–brand) et des dérivés cohérents pour hover, focus, borders, badges… avec color(from …). Tu ajustes luminosité, saturation, alpha ou canal par canal sans bricoler des HSL magiques ni multiplier les tokens.

    Ce que j’aime dans l’article : il reste ancré dans le réel. Des exemples lisibles, des patterns qu’on rencontre tous les jours (états de boutons, overlays, dégradés, dark mode) et surtout une logique de design system : la couleur devient une fonction, pas une valeur. Tu peux faire évoluer ta teinte de base sans réécrire la moitié du CSS. Et les deltas (légèrement plus sombre, un peu plus saturé) gardent la cohérence de marque.

    Pragmatiquement, je vois trois gains : 1) moins de variables à maintenir, 2) des thèmes plus fiables, 3) une accessibilité plus maîtrisée (contrastes ajustables sans casser l’identité). Mon conseil : commence petit. Définis 1–2 couleurs sources, dérive –brand-hover, –brand-outline, –surface-elevated avec color(from …), et observe la simplification. Une base solide, des variantes “calculées”, et un design qui respire.

  • Creating CSS Theme Variables from a JS file

    Bookmarked CSS { In Real Life } | Creating CSS Theme Variables from a JS file.

    Les design tokens, c’est la promesse d’une cohérence. Mais dans la pratique, on se retrouve souvent avec un fichier SCSS, un fichier JS, un fichier Figma… et des incohérences qui s’accumulent. L’idée proposée ici est toute bête mais super efficace : un seul fichier JavaScript, qui définit tes tokens (couleurs, tailles, etc.), et qui crache directement des variables CSS prêtes à l’emploi. Plus besoin de jongler, tout le monde boit à la même source.

    Ce que j’aime, c’est la simplicité. Pas besoin de grosse usine à gaz ni de tooling lourd façon “style dictionary”. Tu écris tes valeurs une fois, tu génères les :root { –variable: valeur }, et basta. Côté dev, tu consommes les tokens en JS et en CSS sans jamais les dédoubler.

    Ça ne remplacera pas une infra complète pour une grosse équipe produit, mais pour un projet à taille humaine, c’est pile le bon compromis : un point de vérité unique, une synchro JS/CSS sans douleur, et une dette technique évitée dès le départ. Bref, ça mérite d’être testé sur ton prochain side project.

  • Bringing Back Parallax With Scroll-Driven CSS Animations

    Bookmarked https://css-tricks.com/bringing-back-parallax-with-scroll-driven-css-animations/.

    Franchement, j’avais enterré le parallax avec les carrousels autoplay et les splash pages en Flash. Mais là, j’ai été surpris.

    Avec les scroll-driven animations, le truc retrouve une seconde vie : fluide, natif, et surtout sans les usines à gaz JS d’avant.

    L’article de CSS-Tricks décortique la méthode avec pédagogie en mode : t’as une timeline liée au scroll, tu cales tes keyframes dessus, et roule ma poule.

    Ce que j’ai aimé, c’est qu’on n’est plus dans le « waouh » pour faire waouh.

    C’est clean, subtil, et ça s’intègre bien dans un design qui respecte l’utilisateur.

    Tu peux même jouer avec la perspective ou l’échelle d’un élément selon sa progression dans la page, sans flinguer les perfs.

    Bref, si t’avais lâché l’affaire avec le parallax, c’est le bon moment pour t’y remettre.

  • Tous les éditeurs de code que j’ai utilisé

    Ceci est un post que j’ai eu envie d’écrire pour aucune autre raison que celle d’être tombé sur l’un des premiers article du blog de Paweł Gryzbek. Je ne vais pas partager mon « setup » mais plutôt tous les IDE, au sens large, que j’ai utilisé jusqu’à maintenant pour le développement Web.

    • Microsoft FrontPage 🤢
    • Dreamweaver MX
    • Komodo Edit
    • Espresso
    • Coda
    • Adobe Brackets
    • Sublime Text 2
    • Sublime Text 3
    • Atom
    • Visual Studio Code

    J’ai adoré utiliser Espresso pour le CSS et Coda pour le PHP, mais j’avoue que mon préféré jusqu’ici c’est VSCode. Déjà avant que GitHub soit racheté par Microsoft j’adorais coder dans Atom. Ça fait maintenant plus de 6 ans que je code dans VSCode et je ne compte pas changer !

  • Should masonry be part of CSS grid? – Ahmad Shadeed

    Bookmarked Should masonry be part of CSS grid? by Ahmad Shadeed.

    If we go with the new syntax (display: masonry), it will need a few years to become supported in all major browsers. Let’s be honest, a layout is a major part of a web page that makes it hard to apply progressive enhancement. You either have a masonry or not, right?

    Making it part of CSS grid will at least guarantee that the layout will work, but without the masonry stuff.

  • CSS Cap Unit – Ahmad Shadeed

    Bookmarked CSS Cap Unit by Ahmad Shadeed.

    A look at how I solved a design problem with CSS cap unit.

  • Double your specificity with this one weird trick – Cirrus’s Realm

    Bookmarked Double your specificity with this one weird trick | Cirrus’s Realm.

    Je me souviens avoir déjà utilisé cette technique par le passé, mais c’était un rappel nécessaire pour moi. J’utilise beaucoup trop souvent !important à mon goût.

    Une autre technique que j’utilise c’est d’ajouter un sélecteur d’attribut en plus, mais c’est moins joli.

  • Guillemets, quotes, etc.

    Bookmarked How to display language-specific quotes in CSS | Stefan Judis Web Development.

    Je viens de tomber sur cet article de Stefan Judis et ça m’a rendu fou ! Fou parce que depuis quelques années je fais beaucoup d’intégrations multilingues en anglais, allemand et français et je n’ai jamais eu connaissance de ces valeurs open-quote/close-quote.

    J’ai hâte de les utiliser dans mes futures intégrations !