Astuce de valeurs de propriété personnalisée en option soignée

Gestion des valeurs de propriété personnalisées facultatives dans les propriétés CSS multi-valeurs telles que transform nécessite parfois certaines astuces. Supposons que vous ayez un élément dont l'attribut transform contient plusieurs valeurs:

 .el {
  Transformée: traduire (100px) échelle (1,5) skew (5deg);
}

Si vous souhaitez appliquer uniquement certaines valeurs de transformation selon les besoins, vous pouvez utiliser des propriétés personnalisées pour réaliser l'optionnalité:

 .el {
  / * | - par défaut --- | | - Facultatif - |
  Transform: tradlater (100px) var (- transform);
}

Cependant, si --transform n'est pas défini, la propriété transform entière sera invalide. La solution consiste à utiliser une valeur nulle comme valeur de retour:

 .el {
  Transform: tradlater (100px) var (- transform,);
}

Faites attention à la différence? Ici, une valeur nul ( , ) est définie comme un repli. Selon la spécification:

Contrairement à la règle d'omission de virgule habituelle (qui nécessite d'omettre lorsque les virgules ne séparent pas les valeurs), dans var() , une virgule distincte (rien après) doit être considérée comme valide, indiquant une valeur de repli vide.

Ceci est similaire à la technique de commutation de propriété CSS Custom, qui utilise des propriétés personnalisées pour avoir des valeurs d'espace.

Démo

Cette astuce fonctionne avec tout attribut CSS à valeur multiple. En plus de transform , la démonstration suivante utilise également text-shadow , background et filter .

Pour certaines propriétés qui acceptent plusieurs valeurs (telles que text-shadow ), une manipulation spéciale est requise car elles ne s'appliquent qu'aux séparateurs de virgules. Dans ces cas, lors de la définition d'une propriété CSS personnalisée, vous (en tant qu'auteur du code) savez qu'il n'est utilisé que dans le contexte de la valeur définie de la propriété personnalisée. Ensuite, vous devez insérer une virgule directement avant la première valeur dans la propriété personnalisée, comme ainsi:

 --Text-shadow :, 0 0 5px noir;

Bien sûr, cela limite la possibilité d'utiliser cette variable si la valeur d'attribut est unique. Cependant, cela peut être résolu en créant une "couche" de variables, c'est-à-dire que les propriétés personnalisées pointent vers des propriétés personnalisées de niveau inférieur.

Notez le compilateur SASS

En explorant cette astuce, j'ai trouvé qu'il y avait un bug dans le compilateur SASS qui supprime les valeurs de secours vides ( , ), ce qui n'est pas cohérent avec la spécification. J'ai signalé cette erreur et j'espère qu'elle sera bientôt corrigée.

En tant que solution de contournement temporaire, vous pouvez utiliser des valeurs de secours qui ne provoquent pas de rendu, par exemple:

 Transform: traduire (100px) var (- transform, échelle (1));

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!