Ce billet explique comment générer des PDF à partir de HTML et CSS en utilisant Weasyprint, un outil Python. L'auteur, insatisfait par LaTeX, préfère utiliser des langages qu'il maîtrise mieux. Le tutoriel commence par un exemple simple de conversion HTML en PDF, en passant par l'ajout de styles CSS et diverses astuces pour personnaliser les documents. Il met l'accent sur l'importance des métadonnées et de l'accessibilité des PDF. J'ai découvert des astuces étonnantes : les types de page (page: xxx), la récupération du décompte (target-counter, non documentée dans la MDN !), les sélecteurs de page (:left :right), les règles de marge (@bottom-left @bottom-right), la position "running", etc.

Cet article explore le concept des "stacking contexts" en CSS, souvent mal compris et source de problèmes de mise en page. Il explique comment certains éléments HTML sont visuellement empilés les uns sur les autres grâce à un axe z imaginaire, créant une perception de profondeur. Les "stacking contexts" sont créés par des propriétés CSS comme position (avec z-index), opacity, transform, et contain. L'auteur souligne que les éléments sont d'abord empilés par contexte, puis par ordre de z-index au sein de chaque contexte. L'article propose des approches pratiques pour "déstacker" les éléments lorsque cela est nécessaire.

L'auteur partage son "CSS reset" personnalisé, expliquant pourquoi il préfère définir ses propres styles par défaut plutôt que d'utiliser ceux des navigateurs. Il détaille chaque règle CSS appliquée, comme la boîte de modèle border-box, la suppression des marges et des paddings par défaut, et la désactivation de l'ajustement automatique de la taille du texte sur mobile. Il utilise également des couches de cascade pour donner une faible spécificité à ses règles. Un partage utile pour les développeurs front-end cherchant à standardiser leurs projets.

Il s'agit d'un outil en ligne à qui vous donnez votre code CSS et qui est capable de repérer le code "daté" et de proposer des remplacements plus modernes

Découvrez quatre innovations CSS révolutionnaires : l'imbrication native (CSS Nesting), la gestion des couches (@layer), les requêtes de conteneur (Container Queries) et le sélecteur :has(). Ces fonctionnalités, désormais supportées par les navigateurs, transforment la conception des styles en offrant un code plus lisible, une gestion simplifiée des priorités et un responsive au niveau composant. Prêtes pour la production, elles marquent un tournant dans l'organisation et la modularité des styles CSS.

Ce billet de blog de Chris Coyier sur Frontend Masters explique comment créer des menus contextuels popover en utilisant le positionnement d'ancrage en CSS. L'auteur montre comment utiliser des éléments HTML comme <button> et <menu> (qui est en réalité une liste non ordonnée <ul>) pour créer un menu contextuel, avec des attributs comme command, commandfor et interestfor pour gérer l'ouverture et la fermeture du menu sans JavaScript. Le positionnement du menu est géré via des styles CSS avec des ancres nommées, permettant une animation fluide lors de l'ouverture et de la fermeture. L'article inclut également des considérations pour les retombées de positionnement et des liens vers des ressources supplémentaires.

Ce tutoriel explique comment utiliser CSS Subgrid pour aligner harmonieusement un catalogue de produits, même avec des images de ratios différents et des descriptions de longueurs variables. En créant une grille parente avec des rangées définies et en utilisant grid-template-rows: subgrid pour les éléments enfants, on assure un alignement parfait des titres et des boutons, évitant ainsi l'effet "escalier" peu professionnel. La solution propose une structure HTML sémantique avec des balises <article> pour chaque produit et un CSS qui définit une grille parente avec quatre rangées distinctes.

Ce guide explique comment utiliser CSS Subgrid pour aligner parfaitement des éléments dans des grilles complexes, comme des cartes de tarifs. Le Subgrid permet à un élément enfant d'adopter la grille de son parent, garantissant un alignement dynamique et précis. Le tutoriel détaille la structure HTML, le code CSS nécessaire, et les avantages de cette technique, comme la maintenance simplifiée et les performances optimisées. Un exemple pratique avec des cartes de tarifs est fourni, ainsi que des conseils pour optimiser avec LESS. Le guide recommande de maîtriser les bases de CSS Grid avant de se lancer dans le Subgrid.

Dans cet article de HTMHell, Darice de Cuba explique l'importance de nommer les classes CSS de manière générique et indépendante du design. Elle souligne que les noms de classes doivent refléter le contenu et non la présentation, afin de faciliter les modifications futures du CSS sans toucher au HTML. Elle donne des exemples de bonnes et mauvaises pratiques, et conclut en insistant sur l'importance de maintenir un code lisible et facile à modifier.

Cet article met en lumière l'utilisation excessive de JavaScript pour résoudre des problèmes qui pourraient être mieux gérés par CSS. L'auteur, Chizaram Ken, souligne que les lacunes de connaissances poussent souvent les développeurs à sur-ingénieriser des solutions, ce qui impacte négativement les performances. Par exemple, des fonctionnalités CSS comme content-visibility: auto et les unités de vue modernes (dvh, svh, lvh) offrent des solutions efficaces sans JavaScript, mais les développeurs continuent de privilégier des solutions JavaScript par habitude. L'article explore des problèmes spécifiques comme la virtualisation dans React, les requêtes de conteneur et les animations de défilement, en proposant des alternatives CSS et en discutant des cas où JavaScript reste pertinent. Un appel est lancé pour éviter d'utiliser useEffect et useState pour des problèmes de rendu, en insistant sur l'importance de comprendre les capacités natives du navigateur avant de recourir à des bibliothèques JavaScript.

L'article explore comment réduire la charge de travail de JavaScript en utilisant des fonctionnalités modernes de HTML et CSS. Il propose de remplacer certains patterns JavaScript par des méthodes natives, comme les éléments <details> et <summary> pour les accordéons, ou une ligne de CSS pour ajuster la taille des champs de formulaire. L'objectif est de diminuer la quantité de JavaScript nécessaire, améliorant ainsi les performances et l'expérience utilisateur. L'auteur promet également une bibliothèque de composants avec ces nouvelles approches.

Andy Clarke explore l'importance de "la mesure" en typographie, qui désigne la longueur d'une ligne de texte. Il explique comment cette notion, issue de l'imprimerie traditionnelle, peut influencer la mise en page web. En définissant la mesure comme une propriété CSS personnalisée (--measure: 60ch), il montre comment elle peut guider la conception de mises en page, de grilles et même de requêtes de conteneur, pour améliorer la lisibilité et l'adaptabilité des sites web. Des exemples pratiques sont disponibles dans son laboratoire.

Matt Zeunert explore les raisons pour lesquelles certaines pages web contiennent des documents HTML volumineux, souvent en raison de l'intégration de ressources comme des images, des CSS ou des polices de caractères en Base64. Il analyse divers cas, tels que les images intégrées via des data URLs, les CSS inline avec des sélecteurs complexes, et les polices de caractères embarquées, qui peuvent impacter les performances. L'article met en lumière les avantages et inconvénients de ces pratiques, notamment l'absence de mise en cache indépendante et la priorisation des ressources. Un outil, le DebugBear HTML Size Analyzer, a été amélioré pour gérer ces structures complexes.

Cet article de CSS-Tricks explore les fonctions trigonométriques inverses en CSS : asin(), acos(), atan() et atan2(), souvent considérées comme les fonctionnalités les moins aimées selon le State of CSS 2025. L'auteur, Juan Diego Rodríguez, explique comment ces fonctions permettent de retrouver un angle à partir d'une valeur trigonométrique, contrairement aux fonctions sin(), cos() et tan() qui font l'inverse. Il détaille leurs définitions, leurs domaines et plages de valeurs, ainsi que leurs applications pratiques, en mettant en avant l'utilité particulière de atan() et atan2() pour déterminer des angles dans divers contextes.

L'article explore la problématique des animations CSS redondantes dans les projets web. L'auteur souligne que les animations de base comme les fade-in, slide ou zoom sont souvent recréées de manière indépendante, entraînant une duplication inutile de code et une maintenance complexe. Il propose une solution pour standardiser ces animations en consolidant les @keyframes, transformant ainsi un système chaotique en un système clair et prévisible. Une lecture utile pour les développeurs front-end cherchant à optimiser leur code et leur flux de travail.

Cette page recense les projets Open Source d'Alsacréations sur Github :

• Kiwipedia - Nos guidelines, checklist et bonnes pratiques d'intégration web
• Bretzel - Layouts CSS réutilisables et utilitaires
• KNACSS - styles modernes et accessibles pour les éléments HTML natifs courants
• MyDevice - Taille, résolution et infos de votre device
• UniClaude - Explorateur de caractères Unicode
• Spätzi - Testez et corrigez vos contrastes de couleurs non accessibles
• Schnaps.it - Générateur de Lorem Ipsum alsacien, gal!
• Reset - Reset CSS moderne et accessible
• Liquid - Un gabarit de page responsive en Grid Layout
• Quetsche - Compression d'images. Simple. Basique
• Cuillère - Générateur de QR codes personnalisés
• Palette - Générateur de palettes de couleurs accessibles
• Quiz - Modèle de quiz interactif avec calcul du score
• IEscape - Aidez l'Alsacréature à échapper à Internet Explorer
• Pepin #archive - Structure par défaut de plugin jQuery

Lyra Rebane défend l’idée que beaucoup de sites n’ont pas besoin de JS ou de frameworks lourds pour offrir une expérience riche : modernes, HTML et CSS seuls suffisent souvent. L’article montre de nouveaux outils CSS (naming, nesting, pseudo-classes, color mixing, unités viewport dynamiques, etc.), des composants interactifs accessibles (via « \:checked », « \:has », « details/summary », etc.), et des effets visuels performants. L’auteur insiste aussi sur les bénéfices pour la performance, l’accessibilité, la vie privée, et le plaisir de coder léger, esthétique et fonctionnel.

Dans son article, Josh W. Comeau explore les défis et solutions pour créer des effets de décalage de couleurs dynamiques en CSS, notamment pour des animations de particules. Il explique d’abord comment générer des couleurs aléatoires en HSL pour une cohérence visuelle, mais souligne une limitation majeure : les navigateurs interpolent les couleurs en RGB, ce qui produit des teintes grisées et peu naturelles lors des transitions entre deux couleurs HSL. Par exemple, une transition entre rouge et turquoise passe par du gris, car les canaux RGB convergent vers des valeurs similaires. Pour contourner ce problème, il propose d’utiliser la propriété CSS filter: hue-rotate(), qui permet de faire tourner la teinte de manière fluide et naturelle autour de la roue chromatique, sans perte de saturation. Il partage aussi des astuces pour ajouter des effets de scintillement aléatoires aux particules, améliorant ainsi le réalisme de l’animation.

L’interpolation des couleurs en CSS permet de générer des couleurs intermédiaires entre deux points de couleur, offrant ainsi des palettes uniques, des dégradés fluides et des transitions harmonieuses. Cette technique est omniprésente en CSS : dans les dégradés (linear-gradient, conic-gradient), les animations, les transitions, les filtres, ou encore la fonction color-mix(). Elle repose sur une syntaxe formelle, comme in <espace-couleur> <méthode-interpolation-teinte>?, où l’on spécifie l’espace de couleur (rectangulaire : srgb, lab, oklab ; ou polaire : hsl, lch, oklch) et la méthode d’interpolation de la teinte (shorter, longer, increasing, decreasing). Les espaces polaires, comme oklch, se distinguent par leur représentation cylindrique (luminosité, chroma, teinte), permettant des interpolations circulaires de la teinte, à l’image d’une horloge où l’on choisit le chemin le plus court ou le plus long entre deux valeurs. Par exemple, color-mix(in lch longer hue, red, blue) utilise un arc plus long pour mélanger les couleurs, créant des effets visuels riches. Cette approche est particulièrement utile pour concevoir des dégradés dynamiques, des animations colorées ou des mélanges de couleurs innovants, enrichissant ainsi l’expérience visuelle des sites web.

Suite de https://meyerweb.com/eric/thoughts/2025/08/07/infinite-pixels/ , Eric Meyer explore dans ce billet les comportements inattendus et parfois incohérents entre navigateurs (Safari, Chrome, Firefox) lors de l’utilisation du mot-clé CSS infinity dans des calculs (calc()). Il teste son impact sur des propriétés comme text-indent, word-spacing, letter-spacing, z-index ou encore animation-duration. Résultat : selon le navigateur, les valeurs calculées varient énormément (de 33 millions de pixels à des nombres astronomiques), et certaines propriétés, comme z-index, voient leur valeur plafonner à 2147483647, rendant impossible un "au-delà de l’infini". Les animations avec une durée infinie deviennent inutilisables, surtout sur Safari, tandis que diviser un nombre fini par l’infini donne systématiquement 0, une rare harmonie entre les navigateurs. Une plongée ludique et technique dans les limites (ou leur absence) de CSS ! [