🌟 Maîtrisez les Propriétés CSS et le Focus-Visible : Tutoriel CSS 🌟

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 :

1. syntax : Définit le type de valeur que la propriété peut prendre.
2. inherits : Indique si la propriété hérite de la valeur de son parent.
3. 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.