- La règle
@property est prise en charge par tous les navigateurs modernes et permet de définir explicitement la syntaxe, la valeur initiale et l’héritage des propriétés personnalisées CSS
- Beaucoup de temps s’est écoulé depuis l’introduction initiale de CSS Houdini et de la CSS Properties and Values API
- À travers des démos qui explorent les possibilités de
@property, on peut voir ce que la nouvelle génération de CSS peut offrir
Calls to action (éléments d’incitation à l’action)
- Les CTA qui attirent l’attention sur une page web sont utilisés sur de nombreux sites
- Ce style a été testé directement, et le résultat peut être consulté sur CodePen
- En ouvrant le panneau CSS de la démo, on peut voir la règle
@property liée à la propriété personnalisée qui doit être animée
@property --gradient-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
- La règle
@property indique au navigateur la syntaxe autorisée et définit la valeur initiale à 0deg
- Cela permet au navigateur d’interpoler en douceur de
0deg à 360deg et d’afficher un dégradé en rotation
@keyframes rotate-gradient {
to {
--gradient-angle: 360deg;
}
}
.rotate-gradient {
background: conic-gradient(from var(--gradient-angle), transparent, black);
animation: rotate-gradient 10s linear infinite;
}
- Une simple démo de rotation de dégradé montre les quelques lignes de code nécessaires pour mettre en œuvre ce concept
Transitions de survol fluides
- Quelques éléments particuliers sont nécessaires pour obtenir une transition de dégradé fluide au survol d’un élément
- Chaque propriété personnalisée qui doit être animée déclare sa syntaxe dans une définition
@property, afin que le navigateur puisse faire évoluer les changements de valeur de manière fluide
.shiny-cta {
background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
transparent, var(--shiny-cta-highlight) var(--gradient-percent),
var(--gradient-shine) calc(var(--gradient-percent) * 2),
var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
transparent calc(var(--gradient-percent) * 4)) border-box;
}
- La valeur
--gradient-percent détermine la taille de la zone lumineuse, et au survol la lumière s’allonge grâce à un pourcentage plus élevé
- La valeur
--gradient-angle-offset réajuste l’angle du dégradé pour éviter que la lumière ne reparte en arrière au survol
Ajuster la vitesse de rotation
- Une astuce CSS pour ralentir la rotation au survol est particulièrement utile
- On déclare deux fois la même animation de rotation, la seconde étant inversée puis mise en pause, avec une durée divisée par deux
- Quand l’élément est survolé,
animation-play-state: running remplace l’état en pause et ralentit la rotation à la moitié de sa vitesse
Petits points lumineux
- De petits points lumineux sont ajoutés à l’intérieur du bouton
- Pour cela, un arrière-plan
radial-gradient est créé
.shiny-cta::before {
--position: 2px;
--space: calc(var(--position) * 2);
background: radial-gradient(circle at var(--position) var(--position),
white calc(var(--position) / 4),
transparent 0) padding-box;
background-size: var(--space) var(--space);
background-repeat: space;
}
- La propriété personnalisée
--gradient-angle est utilisée dans un masque conic-gradient afin de révéler en rotation une partie du motif de points
Amélioration des couleurs au survol
- Le style au survol est amélioré pour lui donner plus de profondeur et le rendre plus visible
- Le texte du bouton est enveloppé dans un élément
span, puis une ombre portée floutée est appliquée afin qu’elle s’étende et se rétracte au survol
Adopter de nouveaux styles
- Beaucoup des techniques ci-dessus auraient été presque impossibles il y a encore peu de temps
- Le fait de définir explicitement les propriétés personnalisées ouvre de nombreuses possibilités
- Il sera intéressant de voir comment
@property sera utilisé dans les applications à grande échelle et les design systems
Résumé de GN⁺
- La règle
@property permet de définir explicitement la syntaxe, la valeur initiale et l’héritage des propriétés personnalisées CSS
- Grâce à cette fonctionnalité, les développeurs web peuvent créer des animations et des styles plus complexes et plus sophistiqués
- Elle a notamment un fort potentiel d’usage dans les applications à grande échelle et les design systems
- Parmi les autres projets offrant des fonctionnalités similaires figurent CSS Houdini et la CSS Properties and Values API
1 commentaires
Avis Hacker News
On ressent une sorte de résistance du cerveau lorsqu’on découvre un nouveau concept
@propertysoi-même pour bien le comprendreJe ne suis pas développeur web, mais je sais utiliser des frameworks web de base
Je m’intéresse aux travaux récents autour de CSS, surtout Houdini
Ce n’est pas parce que c’est possible qu’il faut forcément le faire
Ce qu’on peut faire avec les animations CSS donne une impression de magie
flexen CSS me posent aussi difficultéC’est une démo techniquement intéressante, mais il ne faudrait pas animer des boutons de cette façon
Les précédentes soumissions n’ont pas attiré l’attention, mais elles sont intéressantes et pédagogiques
Ce site web me procure de la joie
J’aime travailler avec CSS, mais je vois mes collègues avoir du mal avec ça
Je n’ai pas fait de développement web depuis un moment, et il m’a fallu du temps pour comprendre ce que fait cette fonctionnalité
@property --gradient-angle {...}inherits: false;est claire sur ce qu’elle fait, mais je ne comprends pas pourquoi elle est nécessaire@property@propertyest utilisé