Dans ce tutoriel consacré au CSS, nous allons explorer deux propriétés CSS : @property et :focus-visible. La première, @property, permet de définir des propriétés CSS personnalisées avec des comportements spécifiques. La deuxième, :focus-visible, est une pseudo-classe expérimentale mais déjà largement supportée, qui améliore l'accessibilité en différenciant le focus au clavier et à la souris.
Introduction à @property
Syntaxe de @property
La propriété @property permet de définir des variables CSS avec des comportements spécifiques. Elle comprend trois sous-propriétés :
- syntax : Définit le type de valeur que la propriété peut prendre.
- inherits : Indique si la propriété hérite de la valeur de son parent.
- initial-value : Définit la valeur par défaut de la propriété.
Types de Données
Les types de données que vous pouvez utiliser dans @property sont variés :
- Couleur
- Longueur
- Pourcentage
- Liste de valeurs séparées par un espace ou une virgule
- Mots-clés
- etc.
Voici un exemple de syntaxe pour une couleur :
@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: blue;
}Exemple Pratique
Pour illustrer l'utilisation de @property, nous allons créer une structure HTML simple avec un parent et un enfant :
<div class="parent">
<div class="child"></div>
</div>Ensuite, nous allons définir une variable CSS classique et une propriété personnalisée avec @property :
:root {
--box-color: green;
}
.parent {
background-color: var(--box-color);
}
.child {
background-color: var(--box-color);
}Avec cette configuration, l'enfant hérite de la couleur du parent. Pour contrôler cet héritage, nous utilisons @property :
@property --box-color {
syntax: '<color>';
inherits: true;
initial-value: blue;
}En modifiant la propriété inherits à false, l'enfant n'héritera plus de la couleur du parent :
@property --box-color {
syntax: '<color>';
inherits: false;
initial-value: blue;
}Avantages de @property
- Encapsulation : Contrôle précis de l'héritage des propriétés.
- Héritage Fin : Permet de forcer l'héritage là où ce n'est pas naturel.
- Support : Compatible avec tous les navigateurs depuis 2024.
Introduction à :focus-visible
Syntaxe de :focus-visible
La pseudo-classe :focus-visible est utilisée pour différencier le focus au clavier du focus à la souris, améliorant ainsi l'accessibilité.
Exemple Pratique
Pour illustrer l'utilisation de :focus-visible, nous allons créer un bouton et un champ de texte :
<button>Bouton</button>
<input type="text" placeholder="Texte">Ensuite, nous allons styliser le focus par défaut et le focus visible :
button:focus {
border: 5px solid red;
}
button:focus-visible {
border: 5px dashed blue;
}Avec cette configuration, le bouton aura une bordure rouge continue lorsqu'il est focusé avec la souris, et une bordure bleue en pointillés lorsqu'il est focusé avec le clavier.
Avantages de :focus-visible
- Accessibilité : Améliore la navigation au clavier pour les utilisateurs ayant des besoins spécifiques.
- Différenciation : Permet de différencier visuellement le focus au clavier et à la souris.
- Support : Bien que marquée comme expérimentale, elle est largement supportée depuis mars 2022.
Conclusion
Les propriétés @property et :focus-visible sont des outils puissants et méconnus du CSS. @property permet un contrôle fin des variables CSS, tandis que :focus-visible améliore l'accessibilité en différenciant le focus au clavier et à la souris. N'hésitez pas à expérimenter avec ces propriétés pour améliorer vos projets web.
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
