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.
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.
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.
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.
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.
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.
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.
Pixels & Bretzels célèbre sa 100e édition avec un événement festif le 19 mars 2024 à Strasbourg. Au programme, des conférences, des quiz et des lots à gagner pour renforcer la communauté. Inscription via le site HelloAsso.
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.
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.
