Les moments où vous avez besoin d’une @property personnalisée au lieu d’une variable CSS –

Nous utilisons généralement une variable CSS comme espace réservé pour une valeur que nous prévoyons de réutiliser – pour éviter de répéter la même valeur et pour mettre facilement à jour cette valeur à tous les niveaux si elle doit être mise à jour.

:root { 
  --mix: color-mix(in srgb, #8A9B0F, #fff 25%);
}

div {
  box-shadow: 0 0 15px 25px var(--mix);
}

Nous pouvons nous inscrire coutume propriétés en CSS en utilisant @property. L’exemple le plus courant que vous trouverez probablement montre comment @property peut animer les couleurs d’un dégradé, ce que nous ne pouvons pas faire autrement puisqu’une variable CSS est reconnue comme une chaîne et ce dont nous avons besoin est un format numérique capable d’interpoler entre deux valeurs numériques. C’est là que @property nous permet de définir non seulement la variable valeur mais c’est syntaxe, valeur initialeet héritagetout comme vous le trouverez documenté dans les spécifications CSS.

Par exemple, voici comment enregistrer une propriété personnalisée appelée --circleSizequi est formaté sous forme de valeur de pourcentage définie sur 10% par défaut et n’est pas hérité par les éléments enfants.

@property --circleSize {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 10%;
}

div { /* red div */
  clip-path: circle(var(--circleSize) at center bottom);
  transition: --circleSize 300ms linear;
}

section:hover div { 
  --circleSize: 125%; 
}

Dans cet exemple, un circle() La fonction est utilisée pour couper le <div> élément dans – vous l’aurez deviné – un cercle. La valeur de taille du circle()le rayon de est défini sur la propriété personnalisée enregistrée, --circleSizequi est ensuite modifié indépendamment au survol à l’aide d’un transition. Le résultat est quelque chose de proche L’effet d’entraînement du Material Designet nous pouvons le faire car nous avons demandé à CSS de traiter la propriété personnalisée comme une valeur en pourcentage plutôt que comme une chaîne :

La liberté de définir et de spécifier nos propres propriétés CSS nous donne de nouveaux super pouvoirs d’animation qui n’étaient autrefois possibles qu’avec JavaScript, comme la transition des couleurs d’un dégradé.

Voici une idée que j’ai qui utilise la même idée de base que l’ondulation, sauf qu’elle enchaîne plusieurs propriétés personnalisées qui sont formatées en couleurs, longueurs et degrés d’angle pour une animation plus complexe où le texte glisse vers le haut du conteneur à mesure que le texte change de couleur.

Utilisons cette démo comme exercice pour en savoir plus sur la définition de propriétés personnalisées avec l’outil @property at-rule, combinant ce que nous venons de voir dans l’ondulation avec le concept d’interpolation des valeurs de gradient.

Le HTML

<div class="scrolling-text">
  <div class="text-container">
    <div class="text">
      <ruby>壹<rt>one</rt></ruby>
      <ruby>蜀<rt>two</rt></ruby>
      <ruby>兩<rt>three</rt></ruby>
    </div>
  </div>
</div>

Le HTML contient des caractères chinois que nous allons animer. Ces caractères chinois sont marqués par <ruby> tags afin que leurs traductions anglaises puissent être fournies dans <rt> Mots clés. L’idée est que .scrolling-text est le conteneur parent du composant et, à l’intérieur, se trouve un élément enfant contenant les caractères de texte coulissants qui permettent aux caractères de glisser dans et hors de la vue.

Coulissement vertical

En CSS, faisons glisser les caractères verticalement au survol. Ce que nous créons est un conteneur avec une hauteur fixe que nous pouvons utiliser pour masquer les personnages lorsqu’ils débordent de l’espace disponible.

.scrolling-text {
  height: 1lh;
  overflow: hidden;
  width: min-content;
}
.text-container:has(:hover, :focus) .text {
  transform: translateY(-2lh) ;
}
.text {
  transition: transform 2.4s ease-in-out;
}

Réglage du .scrolling-text la largeur du conteneur à min-content donne aux caractères un ajustement serré, en les empilant verticalement dans une seule colonne. La hauteur du conteneur est définie 1lh. Et puisque nous avons défini overflow: hidden sur le conteneur, un seul caractère est affiché dans le conteneur à un moment donné.

Conseil: Vous pouvez également utiliser le HTML <pre> élément ou soit l’élément white-space ou text-wrap propriétés pour contrôler la façon dont le texte est renvoyé à la ligne.

Au survol, le texte bouge -2lh, ou doublez la hauteur d’un seul caractère de texte dans la direction opposée ou vers le haut. Donc, fondamentalement, nous faisons glisser les choses de deux caractères vers le haut afin d’animer du premier caractère au troisième caractère lorsque le conteneur contenant le texte est en survol.

Application de dégradés au texte

Voici un style amusant :

.text {
  background: repeating-linear-gradient(
    180deg, 
    rgb(224, 236, 236), 
    rgb(224, 236, 236) 5px, 
    rgb(92, 198, 162) 5px, 
    rgb(92, 198, 162) 6px);
  background-clip: text;
  color: transparent; /* to show the background underneath */
  background-size: 20% 20%;
}

À quelle fréquence utilisez-vous des dégradés répétitifs dans votre travail ? La partie amusante, cependant, c’est ce qui vient après. Vous voyez, nous établissons un transparent couleur sur le texte et cela permet au repeating-linear-gradient() pour le montrer. Mais comme le texte est une boîte comme tout le reste en CSSnous découpons l’arrière-plan au niveau du texte lui-même pour donner l’impression que le texte est découpé dans le dégradé.

Plutôt sympa, non ? Maintenant, il semble que nos caractères de texte aient un motif rayé peint dessus.

Animer le dégradé

C’est ici que nous prenons le même concept de dégradé animé abordé dans d’autres didacticiels et l’intégrons à ce que nous faisons ici. Pour cela, nous allons d’abord enregistrer certains des repeating-linear-gradient() valeurs en tant que propriétés personnalisées. Mais contrairement aux autres implémentations, la nôtre est un peu plus complexe car nous allons animer plusieurs valeurs plutôt que, par exemple, mettre à jour la teinte.

Au lieu de cela, nous animons deux couleurs, une longueur et un angle.

@property --c1 {
  syntax: "<color>";
  inherits: false;
  initial-value: rgb(224, 236, 236);
}
@property --c2 {
  syntax: "<color>";
  inherits: false;
  initial-value: rgb(92, 198, 162);
}
@property --l {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 5px;
}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 180deg;
}

.text {
  background: repeating-linear-gradient(
    var(--angle), 
    var(--c1), 
    var(--c1) 5px, 
    var(--c2) var(--l), 
    var(--c2) 6px);
}

Nous souhaitons mettre à jour les valeurs de nos propriétés personnalisées enregistrées lorsque le conteneur qui contient le texte est survolé ou mis au point. Il suffit de re-déclarer les propriétés avec les valeurs mises à jour.

.text-container:has(:hover, :focus) .text {
  --c1: pink;
  --c2: transparent;  
  --l: 100%;
  --angle: 90deg;

  background-size: 50% 100%;
  transform:  translateY(-2lh);
}

Pour être très clair sur ce qui se passe, voici les propriétés et valeurs personnalisées qui se mettent à jour au survol :

• --c1: Commence avec une valeur de couleur de rgb(224, 236, 236) et mises à jour de pink.
• --c2: Commence avec une valeur de couleur de rgb(92, 198, 162) et mises à jour de transparent.
• --l: Commence par la valeur de longueur 5px et mises à jour de 100%.
• --a: Commence avec une valeur d’angle de 180deg et mises à jour de 90deg.

Ainsi, les deux couleurs utilisées dans le dégradé se transforment en d’autres couleurs tandis que la taille globale du dégradé augmente et pivote. C’est comme si nous chorégraphions une courte routine de danse pour le dégradé.

Affiner la transition

Pendant tout ce temps, le .text L’élément contenant les personnages glisse vers le haut pour révéler un personnage à la fois. La seule chose est que nous devons dire au CSS ce qui va se passer. transition en survol, ce que nous faisons directement sur le .text élément:

.text {
  transition: --l, --angle, --c1, --c2, background-size, transform 2.4s ease-in-out;
  transition-duration: 2s; 
}

Oui, j’aurais tout aussi bien pu utiliser le all mot-clé pour sélectionner toutes les propriétés de transition. Mais je préfère franchir une étape supplémentaire en déclarant chacun individuellement. C’est une petite habitude d’empêcher le navigateur d’avoir à surveiller trop de choses, ce qui pourrait ralentir les choses, même un peu.

Démo finale

Voici encore une fois le résultat final :

J’espère que ce petit exercice démontrera non seulement le genre de choses sophistiquées que nous pouvons réaliser avec les propriétés personnalisées CSS, mais aidera également à clarifier les différences entre les propriétés personnalisées et les variables standard. Les variables standard sont d’excellents espaces réservés pour un code plus maintenable (et quelques leurs propres astuces), mais lorsque vous devez mettre à jour une valeur dans une propriété qui prend en charge plusieurs valeurs, telles que les couleurs d’un dégradé, le @property at-rule est là où il en est car il nous permet de définir des variables avec une spécification personnalisée qui définit la syntaxe, la valeur initiale et le comportement d’héritage de la variable.

Lorsque nous parvenons à modifier les valeurs individuellement et indépendamment avec une promesse d’animation, cela contribue à la fois à rationaliser le code et ouvre de nouvelles possibilités pour concevoir des animations élaborées avec un code relativement agile.

C’est pourquoi @property est une norme CSS utile à garder à l’esprit et à garder prête à l’emploi lorsque vous réfléchissez à des animations impliquant des changements de valeurs isolés.

Lectures complémentaires sur SmashingMag

(gg, ouais)