www.alsacreations.com

Dev front

Choisir entre balance et pretty pour text-wrap

Cet article présente les nouvelles propriétés CSS pour la gestion de l'enveloppement du texte via la valeur 'text-wrap' du CSS Text Module Level 4. Deux valeurs, 'balance' et 'pretty', sont détaillées pour équilibrer le texte dans un conteneur, avec des recommandations d'utilisation selon le contexte. Les performances et la compatibilité navigateur sont également abordées.

Autre

Les easter eggs sur le web

Cet article explore le concept des easter eggs dissimulés dans le code source des sites web, souvent à destination des développeurs. Il présente plusieurs exemples d'organisations qui cachent des messages ou des art ASCII, et explique comment certains fichiers comme robots.txt ou humans.txt peuvent contenir de tels messages. L'article fournit également des astuces pour intégrer des easter eggs dans vos propres projets, tout en évoquant le Code Konami et d'autres méthodes ludiques pour interagir avec les utilisateurs via la console du navigateur.

Dev front

Animer un bouton burger simple avec SVG et CSS

Cet article explique comment animer un bouton burger en utilisant SVG et CSS. Il détaille les étapes de création de l'icône en SVG et l'ajout de styles CSS pour réaliser des animations fluides. Le processus inclut également des considérations pour l'accessibilité et la gestion des événements via JavaScript, permettant au bouton de fonctionner comme un élément interactif. Les transitions sont expliquées en profondeur avec des instructions claires pour obtenir un résultat visuel harmonieux et efficace.

Dev front

Mettre en surbrillance ligne et colonne au survol d'une table

Cet article explique comment mettre en surbrillance une ligne et une colonne d'une table au survol de la souris en utilisant des techniques CSS. Il présente des solutions simples et fonctionnelles, tout en comparant l'utilisation de JavaScript et de CSS pour obtenir cet effet. L'accent est mis sur la combinaison de certaines propriétés et pseudo-éléments CSS pour créer une illusion de surbrillance sur les deux axes. Des recommandations sont également fournies pour mieux gérer l'affichage dans certaines situations.

Dev front

CSS :has() le sélecteur de parent, mais bien plus encore !

Le sélecteur CSS :has() permet de cibler des éléments parents ou frères dans le DOM en fonction des éléments qu'ils contiennent. Introduit dans les spécifications 'Selectors level 4', ce sélecteur ouvre de nouvelles possibilités en CSS, permettant des effets conditionnels selon la présence de descendants ou d'enfants. Sa compatibilité est assurée dans tous les navigateurs depuis décembre 2023. L'article explore divers cas d'usage et exemples pratiques de son application.

Dev front

Optimiser le poids des images SVG

Cet article discute de l'importance d'optimiser le poids des images SVG sur le web, en expliquant les différentes techniques d'optimisation, y compris l'utilisation d'outils comme SVGO et SVGOMG. Il aborde également l'exportation d'images SVG depuis des outils de design comme Figma et souligne l'impact de la performance sur l'expérience utilisateur.

Dev front

Dialog, Modal, Popover : la synthèse

L'article présente les différentes notions liées aux éléments dialog, modal et overlay en HTML, en expliquant leurs caractéristiques, leur fonctionnement, et l'importance de l'accessibilité et de la gestion des interactions utilisateur sur une page web. Il décrit notamment les différences entre éléments modaux et non-modaux, ainsi que les techniques pour gérer l'inertie du contenu lors de l'affichage d'éléments de type overlay.

Dev front

Les modes d'apparence Light mode et Dark mode

L'article explique le concept du mode sombre (dark mode) et ses bénéfices pour réduire la fatigue visuelle et la consommation d'énergie. Il aborde les façons d'activer cette fonctionnalité sur différents systèmes (Windows, MacOS) et dans les navigateurs (Firefox, Chrome), ainsi que l'utilisation des Devtools pour les développeurs. Il détaille aussi les couleurs système qui s'adaptent automatiquement au thème. Enfin, l'article parle de media queries pour détecter les préférences d'apparence de l'utilisateur et l'importance d'offrir aux utilisateurs la possibilité de choisir leur thème.

Dev front

Tout savoir sur les variables CSS (custom properties)

Cet article explique l'utilisation des variables CSS dans le développement web, soulignant leur praticité pour centraliser et réutiliser les styles, améliorer la maintenance du code et faciliter la personnalisation de thèmes. En comparant les variables CSS aux préprocesseurs comme Sass et LESS, il montre comment elles offrent un support natif sans compilation et permettent des modifications en temps réel. Les avantages des variables CSS incluent également leur flexibilité et leur compatibilité avec la plupart des navigateurs modernes, faisant d'elles un outil essentiel pour les développeurs.