Quelles sont les propriétés personnalisées CSS (variables) et comment les utiliser?

Les attributs personnalisés CSS (c'est-à-dire les variables CSS) améliorent l'efficacité de développement en stockant et en réutilisant les valeurs de style. Les méthodes d'utilisation du noyau incluent: 1. Utilisez la syntaxe de nom -variable pour définir dans: racine ou sélecteurs spécifiques; 2. Variables de référence via la fonction var (- nom variable, valeur par défaut); 3. Peut mettre à jour dynamiquement les valeurs des variables, prendre en charge la commutation de sujets, la conception réactive et d'autres scénarios. Leurs règles d'héritage et de cascade sont cohérentes avec les propriétés CSS ordinaires et peuvent être modifiées via JavaScript Runtime pour réaliser des préférences utilisateur ou des ajustements de style dynamique.

Les propriétés personnalisées CSS, souvent appelées variables CSS, sont un moyen de stocker et de réutiliser les valeurs sur votre feuille de style. Ils facilitent la gestion des thèmes, maintiennent la cohérence et réduisent la répétition. Contrairement aux CSS traditionnels, où vous avez dû répéter la même couleur ou la même valeur de police plusieurs fois, les propriétés personnalisées vous permettent de les définir une fois et de les utiliser n'importe où.

Comment définir les propriétés personnalisées CSS

Vous définissez des propriétés personnalisées à l'aide d'une syntaxe spéciale: elles commencent toujours par deux tirets ( -- ) suivis d'un nom de votre choix. Ces propriétés sont portée, ce qui signifie que où vous les définissez affecte où ils peuvent être utilisés.

Par exemple:

 :racine {
  - primaire-couleur: # 007BFF;
  --Font-Size: 16px;
}

Ici, nous définissons deux variables à l'intérieur :root , ce qui les rend mondialement disponibles dans tout le document. Vous pouvez également définir des variables sur des sélecteurs plus spécifiques si vous souhaitez qu'ils ne s'appliquent que dans certaines parties de la page.

Quelques choses à garder à l'esprit:

• Les noms de variables sont sensibles à la casse, donc --color et --Color sont différents.
• Vous pouvez mettre à jour leurs valeurs dynamiquement via JavaScript ou des requêtes multimédias.
• Ils cascade et héritent comme les propriétés CSS ordinaires.

Comment utiliser les variables CSS

Une fois défini, vous pouvez utiliser une propriété personnalisée en la faisant référence avec la fonction var() . Cette fonction prend le nom de la variable et une valeur de secours facultative si la variable n'est pas définie.

Exemple d'utilisation:

 bouton {
  Color d'arrière-plan: var (- couleur primaire);
  taille de police: var (- taille de police, 14px);
}

Dans cet extrait:

• La couleur d'arrière-plan du bouton utilise notre --primary-color .
• Si --font-size n'est pas réglé quelque part, il retombe à 14px .

Ceci est particulièrement utile pour créer des thèmes ou permettre les préférences des utilisateurs (comme le mode sombre) sans dupliquer de gros morceaux de CSS.

N'oubliez pas non plus que les variables fonctionnent n'importe où dans CSS - pas seulement dans des endroits communs comme les couleurs ou les tailles. Vous pouvez même les utiliser pour la synchronisation de transition, les paramètres de mise en page de la grille ou les effets d'ombre complexes.

Cas d'utilisation pratiques

Les propriétés personnalisées brillent vraiment lors de la gestion des styles ou des thèmes dynamiques. Voici quelques applications pratiques:

• Commutation de thème : Définissez les variables de thème clair et sombre et basculez entre elles.
• Ajustements de conception réactifs : ajustez les tailles d'espacement ou de police en fonction de la taille de l'écran en mettant à jour les variables à l'intérieur des requêtes multimédias.
• Styleling basé sur les composants : Définissez les variables dans les conteneurs de composants afin que les éléments enfants puissent hériter des styles spécifiques au contexte.

Disons que vous avez un composant de carte. Au lieu de rembourrer de codage dur ou de rayon de bordure, vous pouvez faire quelque chose comme:

 .carte {
  --Card-padding: 1rem;
  --Card-Radius: 8px;

  rembourrage: var (- card-padding);
  Border-Radius: var (- Card-Radius);
}

Maintenant, si vous avez besoin d'une variation de la carte avec un espacement différent ou un rayon d'angle, vous pouvez simplement remplacer ces variables dans une sous-classe:

 .card.Férué {
  --Card-padding: 2rem;
}

Cela maintient vos styles de base propres et réutilisables tout en facilitant les remplacements.

Mise à jour des variables avec JavaScript

L'un des plus grands avantages des variables CSS est qu'ils peuvent être modifiés à l'exécution à l'aide de JavaScript. Cela ouvre des possibilités pour les changements de style axés sur l'utilisateur ou le thème dynamique.

Pour mettre à jour une variable à partir de JavaScript:

 document.documentElement.style.setproperty ('- primaire-couleur', '# ff5722');

Cela changerait la variable --primary-color dans le monde. Si vous souhaitez cibler un élément spécifique au lieu de la racine, sélectionnez d'abord cet élément.

Vous pouvez l'utiliser pour:

• Laissez les utilisateurs choisir une couleur de thème dans un cueilleur.
• Passez en mode à contraste élevé pour l'accessibilité.
• Animer les valeurs au fil du temps (par exemple, pour les éléments d'interface utilisateur interactifs).

N'oubliez pas que la modification d'une variable met à jour tous les endroits où il est utilisé - pas besoin de mettre à jour manuellement chaque règle CSS.

Fondamentalement, c'est tout.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!