Share
Lorsque nous parlons de CSS dans les discussions, nous en parlons souvent comme une langue muette. Un langage déclaratif, manquant de logique et de perspicacité; mais ce n'est pas la vraie réalité. Pendant des années, les développeurs ont eu soif de variables en CSS standard, après avoir été gâtés par des pré-processeurs tels que LESS et Sass depuis si longtemps. Les variables CSS sont non seulement une option réelle et tangible pour les développeurs, mais elles peuvent également être utilisées dans des scénarios d'animation. Toujours sceptique? Suivez le long pour en savoir plus!
Les variables CSS sont des valeurs stockées destinées à être réutilisées dans une feuille de style. Ils sont accessibles en utilisant la coutume var () fonction et définition à l'aide de la notation de propriété personnalisée.
: racine - couleur principale: verge d'or; div background-color: var (- couleur principale);
Variables définies dans :racine sont globaux, alors que les variables définies dans un sélecteur sont spécifiques à ce sélecteur.
div --module-color: verge d'or; couleur de fond: var (- couleur de module);
Dans l'exemple ci-dessus, tout div acceptera la variable, mais nous pourrions être plus précis en nommant à l'aide de méthodes de ciblage telles que classe et identifiant par exemple.
le var () la fonction peut également accepter des valeurs de secours aussi.
.nav fond: var (- navbg, bleu);
Cela peut être utile dans les situations où une variable n'est pas encore définie ou lorsque vous travaillez avec des éléments personnalisés et le DOM Shadow..
Les variables CSS ne sont pas tout à fait prêtes pour les heures de grande écoute, mais les perspectives pour l'avenir sont très optimistes, de nombreux principaux navigateurs implémentant déjà les spécifications. Ce n'est qu'une question de temps avant qu'ils puissent être utilisés sans souci et ce temps approche à grands pas.
Il existe de nombreuses options pour combiner des variables CSS avec une animation. Pensez à des contextes tels que des visualisations audio, des scénarios basés sur des événements JavaScript et même des événements basés sur CSS, tels que flotter, concentrer et cible. En théorie, une Apple Watch pourrait être connectée à une API tout en utilisant une animation CSS à base de variables de cœur battant. Nous avons ensuite des accéléromètres, des API d'inclinaison de périphérique et même des API de manette de jeu, mais pourquoi devrions-nous envisager une animation avec des variables CSS? Voici quelques raisons:
Les opérations en CSS sont vraiment la partie clé de tout le puzzle avec des animations. Fonctions CSS telles que calc peut accepter une valeur au moment de l'exécution et exécuter des opérateurs tels que la multiplication, la division, l'addition, la soustraction, la mutation de valeurs dans de nouvelles valeurs. Cela aide à rendre les variables CSS dynamiques.
Maintenant que nous savons à quoi ressemblent les variables CSS et ce qu’elles peuvent faire, il est temps de comprendre comment JavaScript s’intègre dans tout cela..
Accentsconagua
document.documentElement.style.getPropertyValue ('- bgcolor'); document.documentElement.style.setProperty ('- bgcolor', 'red'); document.documentElement.style.removeProperty ('- bgcolor');Les méthodes présentées ci-dessus permettent de définir, d'obtenir et de supprimer des valeurs de propriété. Ils peuvent être utilisés pour nos propriétés CSS typiques (Couleur de fond, taille de police etc.), mais ils peuvent aussi être utilisés pour les variables CSS. Ces options définiront une nouvelle valeur pour la propriété définie globalement, également appelée :racine en CSS.
Elles constituent également le véritable secret de l'animation avec des variables CSS, car nos méthodes JS peuvent obtenir, définir ou supprimer une variable de manière dynamique au moment de l'exécution.!
var element = document.querySelector ('div'); element.style.getPropertyValue ('- bgcolor'); element.style.setProperty ('- bgcolor', 'red'); element.style.removeProperty ('- bgcolor');Vous pouvez également définir une nouvelle valeur pour un élément spécifique si vous le souhaitez. Dans l'exemple ci-dessus, nous manipulons une variable qui est attachée à un div sélecteur versus être attaché globalement.
Il existe de nombreux développeurs géniaux et extrêmement talentueux qui développent et expérimentent ces concepts d'animations réactives et thématiques basées sur des variables CSS. Voici quelques stylos dans lesquels vous pourrez plonger et découvrir ce qui se passe sous le capot..
Par David Khourshid.
Cet exemple montre la puissance des animations de variables CSS utilisées de manière thématique. Généralement, il faudrait deux fois plus de code pour exécuter cette démonstration sans variables CSS et bien plus si vous souhaitiez dépasser deux thèmes..
Par GRAY GHOST.
Voici un autre exemple d'utilisation d'événements de souris en JavaScript qui déterminent l'emplacement d'un cercle.
Chaque fois que vous déplacez votre souris, JavaScript met à jour nos variables déclarées, permettant ainsi au cercle de se déplacer par rapport à votre curseur..
Par David Khourshid.
Voici le même principe démontré ci-dessus, mais utilisé dans un autre contexte.
Remarquez ce qui se passe lorsque vous déplacez votre souris? Assez cool hein?
Par Wes Bos.
Pourquoi ne pas mettre à jour les valeurs des variables d'une autre manière? Jetons un coup d'œil à la démo suivante de Wes Bos qui utilise des curseurs pour mettre à jour les positions d'une image..
Déplacez les curseurs à votre guise. Remarquez la fraîcheur qui s'ensuit? Simple, mais tout simplement magique, il ne fait que mettre à jour les variables de la position de transformation à chaque fois que les curseurs sont ajustés. Suuuuhhhweeet!
Par Dan Wilson.
Que diriez-vous de quelque chose d'un peu différent pour les musiciens? Découvrez cet accordéon hip par Dan Wilson.
Whoa! Regardez ces clés bouger! Cela peut sembler un peu intimidant, mais au fond, il s’agit simplement de mettre à jour des variables CSS en JavaScript. Ni plus ni moins.
Par Dan Wilson.
Dans cette démo, utilisez les plages d’entrée pour modifier chaque propriété de transformation et observez leur souplesse, même si vous modifiez une propriété au cours de la transition..
Comme les variables CSS sont toujours des propriétés pouvant être héritées, elles peuvent provoquer un recalcul du style des enfants, ce qui nuit aux performances du processus. Ce sera quelque chose que vous devez mesurer, plutôt que de deviner en fonction de votre contexte.
Euh, il semble que la modification de variables CSS sur un élément déclenche un recalcul de style pour _all_ de ses enfants. Aie. pic.twitter.com/jvpDT5UB2h
- Joni Korpi (@jonikorpi) 18 mai 2017
Voici une démonstration de Shaw publiée dans le groupe Animation at Work Slack qui a été utilisée pour le test: Test de performance de style de recalage de variables CSS
Au cours des tests (Chrome 58. Mac 10.12), il a été découvert que lorsque le Set CSS Var Le bouton est déclenché jusqu'à ce que le navigateur peint l'arrière-plan: 52,84 ms de temps de calcul et 51,8 ms de rendu. Le passage d'une vitesse à l'autre du test de la propriété CSS permet de découvrir un résultat très différent. A partir du moment où le Définir la propriété CSS bouton est déclenché jusqu'à ce que l'arrière-plan peint il y a environ 0.43ms de rendu et 0.9ms rendu.
Si vous passez Contexte dehors pour Couleur vous aurez des mesures équivalentes depuis couleur courante pourrait ou non exister chez les enfants (crier à David Khourshid). Toute propriété qui est héritable provoquera toujours un style de recalcul pour tous les enfants. La propriété Couleur de fond n’est pas héritable, d’où l’énorme différence avec les variables CSS qui sont toujours héritable. Propriétés CSS par défaut hériter entraînera dans la plupart des cas un large recalcul des styles. Il est toujours important de noter que la modification constante des variables CSS peut entraîner une perte de performances. Une bonne pratique pour éviter cela consiste à animer les variables CSS au niveau le plus spécifique (ou au niveau le plus profond), afin d'éviter qu'une multitude d'enfants ne soit affectée. Pour en savoir plus sur la réduction de la portée et de la complexité des calculs de style, consultez la page Web sur les fondamentaux de Google..
Je vous encourage tous à plonger et à tester cette démo par vous-même et à faire votre propre conclusion / modifications / tests personnalisés et à partager vos résultats dans les commentaires. La principale conclusion à tirer de tout cela est que les variables CSS offrent une grande flexibilité, mais il y aura des implications en termes de performances pour la définition de variables CSS sur un parent avec un grand nombre d'enfants..
Un merci spécial au groupe de la chaîne Animations At Work Slack pour les tests en cours, les commentaires et les discussions (David Khourshid, Joni Korpi, Dan Wilson et Shaw).
