Étiquette : front-end
-
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
-
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
-
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
-
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
-
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 :
-
Web Components: Working With Shadow DOM
Bookmarked Web Components: Working With Shadow DOM — Smashing Magazine. Je suis longtemps passé à côté du Shadow DOM. Trop abstrait, trop “spec moderne” pour mes besoins du quotidien. Mais cet article m’a recadré. Il explique comment le Shadow DOM te permet d’encapsuler un composant comme un vrai bloc isolé : pas de fuite de
-
Accessibility essentials every front-end developer should know
Bookmarked Accessibility essentials every front-end developer should know by Martijn Hols.
-
Navigations on the Web – Jim Nielsen’s Blog
[…] a button inside a form, like a link, triggers a round-trip request to the server for a new document — a navigation. Mastodon
-
Belle trouvaille
Had you heard of these bits of CSS? Me too/neither! https://adactio.com/journal/21007 Je viens de découvrir à mon tour la propriété text-emphasis et le sélecteur ::file-selector-button dont parle Jeremy. Je pense que je vais pouvoir utiliser ce dernier sélecteur dans mon projet actuel. Mastodon
-
Éviter le soulignement des pseudo-éléments dans un lien
Categories: ArticlesJe viens de découvrir qu’en ajoutant display: inline-block sur le pseudo-élément ::before ou ::after d’un lien <a></a>, on peut annuler l’affichage du style text-decoration: underline sur le pseudo-élément même si on le veut sous l’élément en lui-même… C’est bien après plus de 10 ans de carrière dans le Web… https://codepen.io/nighcrawl/pen/dyLvYoV Mastodon