Css

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.

www.alsacreations.com

css
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.

www.alsacreations.com

css
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.

www.alsacreations.com

css
Autre

Pixels et Bretzels la 100e

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.

www.alsacreations.com

css
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.

www.alsacreations.com

css
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.

www.alsacreations.com

css
Dev front

URL, URI, URN, quelles différences ?

L'article explique la différence entre URL, URI et URN, décrivant leur fonction et leur structure. L'URL sert d'adresse pour les ressources sur le web, l'URN identifie des ressources par leur nom sans spécifier comment y accéder, tandis que l'URI est le terme général qui englobe les deux. L'auteur évoque également l'invention des URL par Tim Berners-Lee et leur standardisation dans les RFC. Enfin, il souligne l'importance des URL bien structurées pour le référencement.

www.alsacreations.com

css
"
Dev front

Svelte 5 Released | Hacker News

Svelte 5 offre une meilleure gestion de la complexité d'état. Il reste accessible pour ceux qui n'ont que des connaissances en HTML, CSS et JavaScript. Bien que certains trouvent que les nouveaux concepts, comme les 'runes', ressemblent à des choix discutables, beaucoup apprécient la simplicité de Svelte par rapport à React. L'écosystème de Svelte continue d'évoluer, et les utilisateurs expriment leur satisfaction quant à l'expérience de développement qu'il propose.

news.ycombinator.com

css
Dev front

Text Truncation with Ellipsis on Multiple Lines | 56kode

L'article traite de la troncation de texte avec des ellipses sur plusieurs lignes, en expliquant comment gérer l'affichage du texte long dans des espaces limités. Il présente des méthodes classiques pour tronquer le texte en une seule ligne, ainsi que des solutions pour les lignes multiples, en utilisant des propriétés spécifiques à WebKit et des solutions de repli pour les navigateurs non pris en charge. Ces techniques permettent de créer une solution robuste pour le rendu de texte tronqué sur différentes plateformes.

www.56kode.com

css
Dev front

React-admin: October 2024 Update

L'update d'octobre 2024 de React-admin présente de nouvelles fonctionnalités et améliorations apportées depuis la version 5, publiée en juin. Les nouvelles versions mineures 5.1 et 5.2 introduisent des fonctionnalités telles que la prise en charge de nouveaux fournisseurs de données, des améliorations aux vues de liste et de détail, ainsi qu'une meilleure personnalisation de la page de connexion. Des notifications sur les filtres actifs dans les vues de liste et un composant de grille alternatif basé sur ag-grid sont également disponibles. De plus, les utilisateurs peuvent maintenant personnaliser les icônes de la page de connexion et bénéficier d'une meilleure gestion des paramètres d'URL durant la navigation.

marmelab.com

css