@propriété

Le @property AT-Rule, un nouvel ajout à Chrome (et potentiellement Safari et Firefox), permet la déclaration de propriétés personnalisées CSS avec un contrôle et des capacités améliorés. Actuellement, CSS n'a pas la capacité de transition directement certaines propriétés au sein des gradients, une limitation @property vise à aborder.

Un projet de spécification et un document "l'intention d'expédier" décrivent ses fonctionnalités. La règle @property , déclarée en dehors des blocs de sélecteur (similaires aux requêtes @media ), enregistre les caractéristiques d'une propriété personnalisée avant son utilisation. Cet enregistrement spécifie la syntax de la propriété (par exemple,<color></color> ), initial-value et inherits du drapeau.

L'équivalent JavaScript, CSS.registerProperty() , réalise le même enregistrement dans le cadre de l'initiative Houdini. L'avantage clé est de permettre des transitions sur les propriétés auparavant impossibles à animer directement. Par exemple, la transition en douceur de la couleur de départ d'un gradient linéaire, nécessitant auparavant des solutions de contournement comme les pseudo-éléments, devient simple:

 @property --gradient-start {
  Syntaxe: "<color> "
  valeur initiale: blanc;
  hérite: faux;
}

.el {
  - Starter de gradient: blanc;
  CONTEXTE: Gradient linéaire (var (- démarrage de gradient), noir);
  Transition: - Start-start 1s;
}

.el: Hover {
  - Starter de gradient: rouge;
}</color>

Cela fonctionne parce que @property définit --gradient-start comme un<color></color> , permettant à CSS de gérer correctement son animation. Cela contraste avec la limitation actuelle de la fonction attr() , qui renvoie les valeurs de chaîne au lieu de types CSS directement utilisables comme<length></length> . Bien que la date de sortie exacte reste inconnue, la mise en œuvre planifiée de Chrome et les signaux positifs des autres navigateurs suggèrent que l'adoption généralisée est probable.

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!