A propos de l'auteur

Adrian Bece est un développeur Frontend polyvalent avec une vaste expérience du commerce électronique qui travaille actuellement chez PROTOTYP où il crée des interfaces étonnantes avec…
Plus à propos
Adrian

Houdini, terme générique désignant la collecte d'API de navigateur, vise à apporter des améliorations significatives au processus de développement Web et au développement des normes CSS en général. Les développeurs frontend pourront étendre le CSS avec de nouvelles fonctionnalités en utilisant JavaScript, se connecter au moteur de rendu CSS et expliquer au navigateur comment appliquer le CSS pendant un processus de rendu. La prise en charge du navigateur Houdini s'améliore et certaines API sont disponibles pour une utilisation aujourd'hui, c'est donc le bon moment pour se familiariser avec elles et expérimenter. Nous allons jeter un œil à chaque partie de Houdini, son support de navigateur actuel et voir comment ils peuvent être utilisés aujourd'hui en utilisant l'amélioration progressive.

Il faut beaucoup de temps pour qu'une nouvelle fonctionnalité ou amélioration CSS passe d'une ébauche initiale à une fonctionnalité CSS entièrement prise en charge et stable que les développeurs peuvent utiliser. Les polyfills basés sur JavaScript peuvent être utilisés pour remplacer le manque de prise en charge du navigateur afin d'utiliser de nouvelles fonctionnalités CSS avant leur mise en œuvre officielle. Mais ils sont imparfaits dans la plupart des cas. Par exemple, scrollsnap-polyfill est l'un des nombreux polyfills qui peuvent être utilisés pour corriger les incohérences de prise en charge du navigateur pour la spécification CSS Scroll Snap. Mais même cette solution présente des limitations, des bugs et des incohérences.

L'inconvénient potentiel de l'utilisation de polyfills est qu'ils peuvent avoir un impact négatif sur les performances et sont difficiles à mettre en œuvre correctement. Cet inconvénient est lié au DOM et au CSSOM du navigateur. Le navigateur crée un DOM (modèle d'objet de document) à partir du balisage HTML et, de même, il a créé CSSOM (modèle d'objet CSS) à partir du balisage CSS. Ces deux arbres d'objets sont indépendants l'un de l'autre. JavaScript fonctionne sur DOM et a un accès très limité à CSSOM.

Les solutions JavaScript Polyfill ne s'exécutent qu'une fois le cycle de rendu initial terminé, c'est-à-dire lorsque DOM et CSSOM ont été créés et que le document a fini de se charger. Une fois que Polyfill a apporté des modifications aux styles dans le DOM (en les insérant), il provoque le processus de rendu à s'exécuter à nouveau et la page entière est à nouveau rendue. L'impact négatif sur les performances devient encore plus apparent s'ils s'appuient sur requestAnimationFrame ou dépendent des interactions de l'utilisateur comme les événements de défilement.

Un autre obstacle au développement Web est contraintes imposées par les normes CSS. Par exemple, il n'y a qu'un nombre limité de propriétés CSS pouvant être animées en mode natif. CSS sait comment animer nativement les couleurs, mais ne sait pas comment animer les dégradés. Il y a toujours eu un besoin d'innover et de créer des expériences Web impressionnantes en repoussant les limites malgré les limitations technologiques. C'est pourquoi les développeurs ont souvent tendance à utiliser des solutions de contournement moins qu'idéales ou JavaScript pour implémenter un style et des effets plus avancés qui ne sont actuellement pas pris en charge par CSS tels que la disposition de maçonnerie, les effets 3D avancés, l'animation avancée, la typographie fluide, les dégradés animés stylé sélectionner éléments, etc.

Il semble impossible pour les spécifications CSS de suivre avec les différents présenter les demandes de l'industrie tels que plus de contrôle sur les animations, une troncature de texte améliorée, une meilleure option de style pour contribution et sélectionner éléments, plus afficher options, plus filtre options, etc.

Quelle pourrait être la solution potentielle? Donnez aux développeurs un façon native d'étendre CSS à l'aide de diverses API. Dans cet article, nous allons voir comment les développeurs frontend peuvent le faire en utilisant les API Houdini, JavaScript et CSS. Dans chaque section, nous allons examiner chaque API individuellement, vérifier la prise en charge de son navigateur et l'état actuel des spécifications, et voir comment elles peuvent être mises en œuvre aujourd'hui à l'aide de l'amélioration progressive.

Qu'est-ce que Houdini?

Houdini, terme générique désignant la collecte d'API de navigateur, vise à apporter des améliorations significatives au processus de développement Web et au développement des normes CSS en général. Les développeurs pourront étendre le CSS avec de nouvelles fonctionnalités en utilisant JavaScript, se connecter au moteur de rendu CSS et expliquer au navigateur comment appliquer le CSS pendant un processus de rendu. Cela se traduira par des performances et une stabilité nettement meilleures que l'utilisation de polyfills ordinaires.

La spécification Houdini se compose de deux groupes d'API – API de haut niveau et API de bas niveau.

API de haut niveau sont étroitement liés au processus de rendu du navigateur (style → mise en page → peinture → composite). Ceci comprend:

  • API Paint
    Un point d'extension pour l'étape de rendu de peinture du navigateur où les propriétés visuelles (couleur, arrière-plan, bordure, etc.) sont déterminées.
  • API de mise en page
    Un point d'extension pour l'étape de rendu de mise en page du navigateur où les dimensions, la position et l'alignement des éléments sont déterminés.
  • API d'animation
    Un point d'extension pour l'étape de rendu composite du navigateur où les calques sont dessinés à l'écran et animés.

API de bas niveaus constituent une base pour les API de haut niveau. Ceci comprend:

  • API de modèle d'objet typé
  • API Propriétés et valeurs personnalisées
  • API de mesure des polices
  • Worklets

Certaines API Houdini sont déjà disponibles pour une utilisation dans certains navigateurs avec d'autres API pour suivre le mouvement lorsqu'elles sont prêtes à être publiées.

L'avenir du CSS

Contrairement aux spécifications de fonctionnalités CSS classiques qui ont été introduites jusqu'à présent, Houdini se démarque en permettant aux développeurs d'étendre le CSS de manière plus native. Est-ce à dire que les spécifications CSS cesseront d'évoluer et qu'aucune nouvelle implémentation officielle des fonctionnalités CSS ne sera publiée? Eh bien, ce n'est pas le cas. L’objectif de Houdini est d’aider le processus de développement des fonctionnalités CSS en permettant aux développeurs de créer des prototypes fonctionnels qui peuvent être facilement standardisés.

De plus, les développeurs pourront partager les worklets CSS open source plus facilement et avec moins de corrections de bogues spécifiques au navigateur.

API de modèle d'objet typé

Avant l'introduction de Houdini, le seul moyen pour JavaScript d'interagir avec CSS était d'analyser le CSS représenté sous forme de valeurs de chaîne et de les modifier. L'analyse et la substitution manuelle des styles peuvent être difficiles et sujettes aux erreurs car le type de valeur doit être changé d'avant en arrière et l'unité de valeur doit être ajoutée manuellement lors de l'attribution d'une nouvelle valeur.

selectedElement.style.fontSize = newFontSize + "px"; // newFontSize = 20
console.log (selectedElement.style.fontSize); // "20px"

Modèle d'objet typé (OM typé) L'API ajoute plus de sens sémantique aux valeurs CSS en les exposant en tant qu'objets JavaScript typés. Il améliore considérablement le code associé et le rend plus performant, stable et maintenable. Les valeurs CSS sont représentées par le CSSUnitValue interface qui se compose d'une valeur et d'une propriété d'unité.

{
  valeur: 20,
  unité: "px"
}

Cette nouvelle interface peut être utilisée avec les nouvelles propriétés suivantes:

  • computedStyleMap (): pour analyser les styles calculés (non en ligne). Il s'agit d'une méthode de l'élément sélectionné qui doit être invoquée avant l'analyse ou l'utilisation d'autres méthodes.
  • attributeStyleMap: pour analyser et modifier les styles en ligne. Il s'agit d'une propriété disponible sur un élément sélectionné.
// Récupère les styles calculés à partir de la feuille de style (valeur initiale)
selectedElement.computedStyleMap (). get ("font-size"); // {valeur: 20, unité: "px"}

// Définir des styles en ligne
selectedElement.attributeStyleMap.set ("taille de police", CSS.em (2)); // Définit le style en ligne
selectedElement.attributeStyleMap.set ("couleur", "bleu"); // Définit le style en ligne

// Le style calculé reste le même (valeur initiale)
selectedElement.computedStyleMap (). get ("font-size"); // {valeur: 20, unité: "px"}

// Obtenez un nouveau style en ligne
selectedElement.attributeStyleMap.get ("font-size"); // {valeur: 2, unité: "em"}

Remarquez comment des types CSS spécifiques sont utilisés lors de la définition d'une nouvelle valeur numérique. En utilisant cette syntaxe, de nombreux problèmes potentiels liés au type peuvent être évités et le code résultant est plus fiable et sans bogue.

le avoir et ensemble Les méthodes ne sont qu'un petit sous-ensemble de toutes les méthodes disponibles définies par l'API Typed OM. Certains d'entre eux comprennent:

  • clair: supprime tous les styles en ligne
  • supprimer: supprime une propriété CSS spécifiée et sa valeur des styles en ligne
  • a: retourne un booléen si une propriété CSS spécifiée est définie
  • ajouter: ajoute une valeur supplémentaire à une propriété qui prend en charge plusieurs valeurs
  • etc.

Détection des fonctionnalités

var selectedElement = document.getElementById ("exemple");

if (selectedElement.attributeStyleMap) {
  / * ... * /
}

if (selectedElement.computedStyleMap) {
  / * ... * /
}

Statut de spécification W3C

Prise en charge du navigateur

Google ChromeMicrosoft EdgeNavigateur OperaFirefoxSafari
Prise en chargePrise en chargePrise en chargeNon supportéSupport partiel (*)

*pris en charge avec les «fonctionnalités de la plateforme Web expérimentale» ou tout autre indicateur de fonctionnalité activé.

Source de données: Houdini est-il déjà prêt?

API Propriétés et valeurs personnalisées

le Propriétés et valeurs CSS L'API permet aux développeurs d'étendre les variables CSS en ajoutant un type, une valeur initiale et de définir l'héritage. Les développeurs peuvent définir des propriétés personnalisées CSS en les enregistrant à l'aide du registerProperty méthode qui indique aux navigateurs comment effectuer la transition et gérer le repli en cas d'erreur.

CSS.registerProperty ({
  nom: "--colorPrimary",
  syntaxe: "",
  hérite: faux,
  initialValue: "blue",
});

Cette méthode accepte un argument d'entrée qui est un objet avec les propriétés suivantes:

  • Nom: le nom de la propriété personnalisée
  • syntaxe: indique au navigateur comment analyser une propriété personnalisée. Ce sont des valeurs prédéfinies comme , , , , , etc.
  • hérite: indique au navigateur si la propriété personnalisée hérite de la valeur de son parent.
  • valeur initiale: indique la valeur initiale utilisée jusqu'à ce qu'elle soit remplacée et utilisée comme solution de rechange en cas d'erreur.

Dans l'exemple suivant, le la propriété personnalisée de type est en cours de définition. Cette propriété personnalisée va être utilisée dans la transition de dégradé. Vous pensez peut-être que le CSS actuel ne prend pas en charge les transitions pour les dégradés d'arrière-plan et vous auriez raison. Remarquez comment la propriété personnalisée elle-même est utilisée dans transition, au lieu d'un Contexte propriété qui serait utilisée pour Couleur de l'arrière plan transitions.

.gradientBox {
  fond: gradient linéaire (45deg, rgba (255,255,255,1) 0%, var (- colorPrimary) 60%);
  transition: --colorPrimary 0.5s facilité;
  / * ... * /
}

.gradientBox: hover {
  - couleur Primaire: rouge
  / * ... * /
}

Le navigateur ne sait pas comment gérer la transition de dégradé, mais il sait comment gérer les transitions de couleur car la propriété personnalisée est spécifiée comme type. Sur un navigateur qui prend en charge Houdini, une transition de dégradé se produit lorsque l'élément est survolé. Le pourcentage de position du dégradé peut également être remplacé par une propriété personnalisée CSS (enregistrée en tant que et ajouté à une transition de la même manière que dans l'exemple.

Si registerProperty est supprimé et une propriété personnalisée CSS régulière est enregistrée dans un :racine sélecteur, la transition de dégradé ne fonctionnera pas. Il faut que registerProperty est utilisé pour que le navigateur sache qu'il doit le traiter comme une couleur.

Dans la future implémentation de cette API, il serait possible d'enregistrer une propriété personnalisée directement en CSS.

@property --colorPrimary {
  syntaxe: "";
  hérite: faux;
  valeur initiale: bleu;
}

Exemple

Cet exemple simple présente la couleur du dégradé et la transition de position lors d'un survol en utilisant respectivement des propriétés personnalisées CSS enregistrées pour la couleur et la position. Le code source complet est disponible sur l'exemple de référentiel.

Couleur et position du dégradé animé à l'aide de l'API Propriétés et valeurs personnalisées. Délai pour chaque propriété ajoutée pour effet dans la propriété de transition CSS. (Grand aperçu)

Détection des fonctionnalités

if (CSS.registerProperty) {
  / * ... * /
}

Statut de spécification W3C

Prise en charge du navigateur

Google ChromeMicrosoft EdgeNavigateur OperaFirefoxSafari
Prise en chargePrise en chargePrise en chargeNon supportéNon supporté

Source de données: Houdini est-il déjà prêt?

API de mesure des polices

le Mesures de police L'API est encore à un stade très précoce de développement, de sorte que ses spécifications peuvent changer à l'avenir. Dans son projet actuel, API de mesure des polices fournira des méthodes pour mesurer les dimensions des éléments de texte qui sont rendus à l'écran afin de permettre aux développeurs d'affecter la façon dont les éléments de texte sont rendus à l'écran. Ces valeurs sont difficiles ou impossibles à mesurer avec les fonctionnalités actuelles, donc cette API permettra aux développeurs de créer plus facilement des fonctionnalités CSS liées au texte et aux polices. La troncature de texte dynamique sur plusieurs lignes est un exemple de l'une de ces fonctionnalités.

Statut de spécification W3C

Prise en charge du navigateur

Google ChromeMicrosoft EdgeNavigateur OperaFirefoxSafari
Non supportéNon supportéNon supportéNon supportéNon supporté

Source de données: Houdini est-il déjà prêt?

Worklets

Avant de passer aux autres API, il est important d'expliquer le concept Worklets. Worklets sont des scripts qui s'exécutent pendant le rendu et sont indépendants de l'environnement JavaScript principal. Ils sont un point d'extension pour les moteurs de rendu. Ils sont conçus pour le parallélisme (avec 2 instances ou plus) et agnostiques aux threads, ont un accès réduit à la portée globale et sont appelés par le moteur de rendu en cas de besoin. Les worklets peuvent être exécutés uniquement sur HTTPS (sur l'environnement de production) ou sur l'hôte local (à des fins de développement).

Houdini présente les Worklets suivants pour étendre le moteur de rendu du navigateur:

  • Paint Worklet – Paint API
  • Worklet d'animation – API d'animation
  • Layout Worklet – Layout API

API Paint

L'API Paint permet aux développeurs d'utiliser des fonctions JavaScript pour dessiner directement dans l'arrière-plan, la bordure ou le contenu d'un élément à l'aide du contexte de rendu 2D, qui est un sous-ensemble de l'API HTML5 Canvas. L'API Paint utilise Paint Worklet pour dessiner une image qui répond dynamiquement aux changements dans CSS (changements dans les variables CSS, par exemple). Quiconque connaît l'API Canvas se sentira comme chez lui avec l'API Paint de Houdini.

La définition d'un worklet de peinture nécessite plusieurs étapes:

  1. Écrivez et enregistrez un Worklet de peinture à l'aide du s'inscrirePeindre une fonction
  2. Appelez le Worklet dans un fichier HTML ou un fichier JavaScript principal à l'aide de CSS.paintWorklet.addModule une fonction
  3. Utilisez le peindre() fonction en CSS avec un nom de Worklet et des arguments d'entrée facultatifs.

Jetons un œil à la s'inscrirePeindre fonction utilisée pour enregistrer un Worklet de peinture et définir sa fonctionnalité.

registerPaint ("paintWorketExample", classe {
  static get inputProperties () {return ["--myVariable"]; }
  static get inputArguments () {return["[""]; }
  static get contextOptions () {return {alpha: true}; }

  peinture (ctx, taille, propriétés, args) {
    / * ... * /
  }
});

le s'inscrirePeindre La fonction se compose de plusieurs parties:

  • inputProperties:
    Un tableau de propriétés personnalisées CSS dont le Worklet gardera trace. Ce tableau représente les dépendances d'un worklet de peinture.
  • inputArguments:
    Un tableau d'arguments d'entrée pouvant être transmis depuis peindre fonction de l'intérieur du CSS.
  • contextOptions: autorise ou interdit l'opacité des couleurs. S'il est défini sur faux, toutes les couleurs seront affichées en pleine opacité.
  • peindre: la fonction principale qui fournit les arguments suivants:
    • ctx: Contexte de dessin 2D, presque identique au contexte de dessin 2D de l'API Canvas.
    • Taille: un objet contenant la largeur et la hauteur de l'élément. Les valeurs sont déterminées par le processus de rendu de mise en page. La taille du canevas est identique à la taille réelle de l'élément.
    • Propriétés: variables d'entrée définies dans inputProperties
    • args: un tableau d'arguments d'entrée transmis peindre fonction en CSS

Une fois le Worklet enregistré, il doit être appelé dans le fichier HTML en fournissant simplement un chemin d'accès au fichier.

CSS.paintWorklet.addModule ("chemin / vers / worklet / fichier.js");

Tout Worklet peut également être ajouté à partir d'une URL externe (à partir d'un réseau de diffusion de contenu, par exemple), ce qui les rend modulaires et réutilisables.

CSS.paintWorklet.addModule ("https: //url/to/worklet/file.js");

Une fois le Worklet appelé, il peut être utilisé dans CSS à l'aide du peindre une fonction. Cette fonction accepte le nom enregistré du Worklet comme premier argument d'entrée et chaque argument d'entrée qui le suit est un argument personnalisé qui peut être transmis à un Worklet (défini dans Worklet's inputArguments ). À partir de ce moment, le navigateur détermine le moment d'appeler le Worklet et les actions utilisateur et les valeurs de propriétés personnalisées CSS à modifier.

.exampleElement {
  / * paintWorkletExample - nom du worklet
     bleu - argument passé à un Worklet * /
  image de fond: peinture (paintWorketExample, bleu);
}

Exemple

L'exemple suivant présente l'API Paint et la réutilisabilité et la modularité générales du Worklet. Il utilise le Worklet Ripple directement à partir du référentiel Google Chrome Labs et s'exécute sur un élément différent avec des styles différents. Le code source complet est disponible sur l'exemple de référentiel.

Exemple d'effet d'entraînement (utilise Ripple Worklet par Google Chrome Labs) (Grand aperçu)

Détection des fonctionnalités

if ("paintWorklet" en CSS) {
  / * ... * /
}


@supports (arrière-plan: paint (paintWorketExample)) {
  / * ... * /
}

Statut de spécification W3C

Prise en charge du navigateur

Google ChromeMicrosoft EdgeNavigateur OperaFirefoxSafari
Prise en chargePrise en chargePrise en chargeNon supportéNon supporté

Source de données: Houdini est-il déjà prêt?

API d'animation

le Animation L'API étend les animations Web avec des options pour écouter divers événements (défilement, survol, clic, etc.) et améliore les performances en exécutant des animations sur leur propre fil dédié à l'aide d'un worklet d'animation. Il permet à l'utilisateur de contrôler le flux d'animation qui s'exécute de manière performante et non bloquante.

Comme tout Worklet, Animation Worklet doit d'abord être enregistré.

registerAnimator ("animationWorkletExample", classe {
  constructeur (options) {
    / * ... * /
  }
  animate (currentTime, effect) {
    / * ... * /
  }
});

Cette classe comprend deux fonctions:

  • constructeur: appelé lorsqu'une nouvelle instance est créée. Utilisé pour la configuration générale.
  • animer: la fonction principale qui contient la logique d'animation. Fournit les arguments d'entrée suivants:
    • heure actuelle: la valeur de l'heure actuelle de la chronologie définie
    • effet: un tableau d'effets que cette animation utilise

Une fois le Worklet d’animation enregistré, il doit être inclus dans le fichier JavaScript principal, l'animation (élément, images clés, options) doit être définie et l'animation est instanciée avec la chronologie sélectionnée. Les concepts de chronologie et les bases de l'animation Web seront expliqués dans la section suivante.

/ * Inclure le worklet d'animation * /
attendre CSS.animationWorklet.addModule ("chemin / vers / worklet / fichier.js") ;;

/ * Sélectionnez l'élément qui va être animé * /
const elementExample = document.getElementById ("elementExample");

/ * Définir l'animation (effet) * /
const effectExample = new KeyframeEffect (
  elementExample, / * Élément sélectionné qui va être animé * /
  [ /* ... */ ], / * Images clés d'animation * /
  {/ * ... * /}, / * Options d'animation - durée, délai, itérations, etc. * /
);

/ * Créez une nouvelle instance de WorkletAnimation et exécutez-la * /
nouvelle WorkletAnimation (
  "animationWorkletExample" / * Nom du worklet * /
  effectExample, / * Chronologie d'animation (effet) * /
  document.timeline, / * Chronologie d'entrée * /
  {}, / * Options passées au constructeur * /
).jouer(); / * Lire l'animation * /

Cartographie chronologique

L'animation Web est basée sur des délais et mise en correspondance de l'heure actuelle avec une chronologie de l'heure locale d'un effet. Par exemple, examinons une animation linéaire répétitive avec 3 images clés (début, milieu, dernière) qui s'exécute 1 seconde après le chargement d'une page (délai) et avec une durée de 4 secondes.

La chronologie des effets de l'exemple ressemblerait à ceci (avec une durée de 4 secondes sans délai):

Chronologie des effets (durée de 4 s)Image clé
0 msPremière image clé – l'animation démarre
2000msImage clé du milieu – animation en cours
4000msDernière image clé – l'animation se termine ou se réinitialise sur la première image clé

Afin de mieux comprendre effect.localTime, en définissant sa valeur sur 3000 ms (en tenant compte du délai de 1000 ms), l'animation résultante va être verrouillée sur une image clé du milieu dans la chronologie d'effet (délai de 1000 ms + 2000 ms pour une image clé du milieu). Le même effet va se produire en définissant la valeur sur 7000ms et 11000ms car l'animation se répète à 4000ms d'intervalle (durée de l'animation).

animate (currentTime, effect) {
  effect.localTime = 3000; // Délai de 1000 ms + image clé du milieu de 2000 ms
}

Aucune animation ne se produit lorsque vous avez une constante effect.localTime parce que l'animation est verrouillée dans une image clé spécifique. Afin d'animer correctement un élément, son effect.localTime doit être dynamique. Il est nécessaire que la valeur soit une fonction qui dépend de la heure actuelle argument d'entrée ou une autre variable.

Le code suivant montre une représentation fonctionnelle du mappage 1: 1 (fonction linéaire) d'une chronologie pour affecter l'heure locale.

animate (currentTime, effect) {
  effect.localTime = currentTime; // y = x fonction linéaire
}
Chronologie (document.timeline)Heure locale à effet cartographiéImage clé
Heure de début + 0 ms (temps écoulé)Heure de début + 0msPremier
Heure de début + 1000 ms (temps écoulé)Heure de début + 1000 ms (retard) + 0 msPremier
Heure de début + 3000ms (temps écoulé)Heure de début + 1000ms (retard) + 2000msMilieu
Heure de début + 5000ms (temps écoulé)Heure de début + 1000ms (retard) + 4000msDerniers seront les premiers
Heure de début + 7000ms (temps écoulé)Heure de début + 1000ms (retard) + 6000msMilieu
Heure de début + 9000 ms (temps écoulé)Heure de début + 1000ms (retard) + 8000msDerniers seront les premiers

La chronologie n'est pas limitée au mappage 1: 1 pour effectuer l'heure locale. L'API d'animation permet aux développeurs de manipuler le mappage de la chronologie dans animer fonction en utilisant des fonctions JavaScript standard pour créer des chronologies complexes. L'animation n'a pas non plus à se comporter de la même manière à chaque itération (si l'animation est répétée).

L'animation ne doit pas dépendre de la chronologie du document qui ne commence à compter les millisecondes qu'à partir du moment où il est chargé. Les actions de l'utilisateur comme les événements de défilement peuvent être utilisées comme chronologie pour l'animation à l'aide d'un ScrollTimeline objet. Par exemple, une animation peut démarrer lorsqu'un utilisateur a fait défiler jusqu'à 200 pixels et peut se terminer lorsqu'un utilisateur a fait défiler jusqu'à 800 pixels sur un écran.

const scrollTimelineExample = new ScrollTimeline ({
  scrollSource: scrollElement, / * élément DOM dont l'action de défilement est suivie * /
  orientation: "vertical", / * Sens de défilement * /
  startScrollOffset: "200px", / * Début de la chronologie de défilement * /
  endScrollOffset: "800px", / * Fin de la chronologie de défilement * /
  timeRange: 1200, / * Durée à mapper pour faire défiler les valeurs * /
  fill: "forwards" / * Mode de remplissage d'animation * /
});

...

L'animation s'adaptera automatiquement à la vitesse de défilement de l'utilisateur et restera fluide et réactive. Étant donné que les worklets d'animation fonctionnent à partir du thread principal et sont connectés au moteur de rendu d'un navigateur, l'animation qui dépend du défilement de l'utilisateur peut fonctionner sans problème et être très performante.

Exemple

L'exemple suivant montre comment une implémentation de chronologie non linéaire. Il utilise une fonction gaussienne modifiée et applique une animation de translation et de rotation avec la même chronologie. Le code source complet est disponible sur l'exemple de référentiel.

Animation créée avec l'API d'animation qui utilise le mappage temporel de la fonction gaussienne modifiée (Grand aperçu)

Détection des fonctionnalités

if (CSS.animationWorklet) {
  / * ... * /
}

Statut de spécification W3C

Prise en charge du navigateur

Google ChromeMicrosoft EdgeNavigateur OperaFirefoxSafari
Support partiel (*)Support partiel (*)Support partiel (*)Non supportéNon supporté

*pris en charge avec l'indicateur «Fonctionnalités de la plateforme Web expérimentale» activé.

Source de données: Houdini est-il déjà prêt?

API de mise en page

le Disposition L'API permet aux développeurs d'étendre le processus de rendu de mise en page du navigateur en définissant de nouveaux modes de mise en page pouvant être utilisés dans afficher Propriété CSS. L'API de mise en page présente de nouveaux concepts, est très complexe et offre de nombreuses options pour développer des algorithmes de mise en page personnalisés.

Comme pour les autres Worklets, le Worklet de mise en page doit d'abord être enregistré et défini.

registerLayout ('exampleLayout', classe {
  static get inputProperties () {return ['--exampleVariable']; }

  statique get childrenInputProperties () {return ['--exampleChildVariable']; }

  statique get layoutOptions () {
    revenir {
      childDisplay: 'normal',
      dimensionnement: "en bloc"
    };
  }

  intrinsicSizes (enfants, bords, styleMap) {
    / * ... * /
  }

  layout (enfants, arêtes, contraintes, styleMap, breakToken) {
    / * ... * /
  }
});

Le registre de worklet contient les méthodes suivantes:

  • inputProperties:
    Un tableau de propriétés personnalisées CSS dont le Worklet gardera trace appartient à un élément de disposition parent, c'est-à-dire l'élément qui appelle cette disposition. Ce tableau représente les dépendances d'un Worklet de mise en page.
  • childrenInputProperties:
    Un tableau de propriétés CSS personnalisées dont le Worklet gardera trace et qui appartiennent aux éléments enfants d'un élément de disposition parent, c'est-à-dire les enfants des éléments qui définissent cette disposition.
  • layoutOptions: définit les propriétés de mise en page suivantes:
    • childDisplay: peut avoir une valeur prédéfinie de bloquer ou Ordinaire. Détermine si les cases seront affichées sous forme de blocs ou en ligne.
    • dimensionnement: peut avoir une valeur prédéfinie de en forme de bloc ou Manuel. Il indique au navigateur de pré-calculer la taille ou de ne pas pré-calculer (sauf si une taille est explicitement définie), respectivement.
  • intrinsicSizes: définit comment une boîte ou son contenu s'intègre dans un contexte de mise en page.
    • les enfants: éléments enfants d'un élément Parent Layout, c'est-à-dire les enfants de l'élément qui appellent cette disposition.
    • bords: Bords de disposition d'une boîte
    • styleMap: styles OM tapés d'une boîte
  • disposition: la fonction principale qui effectue une mise en page.
    • les enfants: éléments enfants d'un élément Parent Layout, c'est-à-dire les enfants de l'élément qui appellent cette disposition.
    • bords: Bords de disposition d'une boîte
    • contraintes: contraintes d'une disposition parent
    • styleMap: styles OM tapés d'une boîte
    • breakToken: jeton de rupture utilisé pour reprendre une mise en page en cas de pagination ou d'impression.

Comme dans le cas d'une API Paint, le moteur de rendu du navigateur détermine quand le Worklet Paint est appelé. Il suffit de l'ajouter à un fichier HTML ou JavaScript principal.

CSS.layoutWorklet.addModule ('chemin / vers / worklet / fichier.js');

Et, enfin, il doit être référencé dans un fichier CSS

.exampleElement {
  affichage: mise en page (exampleLayout);
}

Comment l'API de mise en page effectue la mise en page

Dans l'exemple précédent, exampleLayout a été défini à l'aide de l'API Layout.

.exampleElement {
  affichage: mise en page (exampleLayout);
}

Cet élément est appelé Disposition des parents qui est joint à Bords de disposition qui se compose de rembourrages, de bordures et de barres de défilement. La disposition parent consiste en des éléments enfants appelés Présentations actuelles. Les présentations actuelles sont les éléments cibles réels dont la présentation peut être personnalisée à l'aide de l'API de présentation. Par exemple, lors de l'utilisation affichage: flex; sur un élément, ses enfants sont repositionnés pour former la disposition flexible. Ceci est similaire à ce qui est fait avec l'API Layout.

Chaque Disposition actuelle consiste en Disposition enfant qui est un algorithme de mise en page pour l'élément LayoutChild (élément, ::avant et ::après pseudo-éléments) et LayoutChild est une boîte générée par CSS qui ne contient que des données de style (pas de données de mise en page). Les éléments LayoutChild sont automatiquement créés par le moteur de rendu du navigateur à l'étape du style. Layout Child peut générer un Fragment qui effectue en fait des actions de rendu de mise en page.

Exemple

Comme pour l'exemple de l'API Paint, cet exemple importe un Worklet de disposition de maçonnerie directement à partir du référentiel Google Chrome Labs, mais dans cet exemple, il est utilisé avec du contenu d'image au lieu de texte. Le code source complet est disponible sur l'exemple de référentiel.

Exemple de disposition de maçonnerie (utilise Masonry Worklet par Google Chrome Labs (Grand aperçu)

Détection des fonctionnalités

if (CSS.layoutWorklet) {
  / * ... * /
}

Statut de spécification W3C

Prise en charge du navigateur

Google ChromeMicrosoft EdgeNavigateur OperaFirefoxSafari
Support partiel (*)Support partiel (*)Support partiel (*)Non supportéNon supporté

*pris en charge avec l'indicateur «Fonctionnalités de la plateforme Web expérimentale» activé.

Source de données: Houdini est-il déjà prêt?

Houdini et amélioration progressive

Même si CSS Houdini ne dispose pas encore d'une prise en charge optimale du navigateur, il peut être utilisé aujourd'hui avec une amélioration progressive à l'esprit. Si vous n'êtes pas familier avec l'amélioration progressive, il vaudrait la peine de consulter cet article pratique qui l'explique très bien. Si vous décidez d'implémenter Houdini dans votre projet aujourd'hui, il y a peu de choses à garder à l'esprit:

  • Utilisez la détection des fonctionnalités pour éviter les erreurs.
    Chaque API et Worklet Houdini offre un moyen simple de vérifier s'ils sont disponibles dans le navigateur. Utilisez la détection des fonctionnalités pour appliquer les améliorations Houdini uniquement aux navigateurs qui la prennent en charge et éviter les erreurs.
  • Utilisez-le uniquement pour la présentation et l'amélioration visuelle.
    Les utilisateurs qui naviguent sur un site Web sur un navigateur qui ne prend pas encore en charge Houdini doivent avoir accès au contenu et aux fonctionnalités de base du site Web. L'expérience utilisateur et la présentation du contenu ne devraient pas dépendre des fonctionnalités Houdini et devraient avoir un repli fiable.
  • Utilisez une solution de secours CSS standard.
    Par exemple, les propriétés personnalisées CSS standard peuvent être utilisées comme solution de remplacement pour les styles définis à l'aide de l'API Propriétés et valeurs personnalisées.

Concentrez-vous sur le développement d'une expérience utilisateur de site Web performante et fiable, puis utilisez les fonctionnalités Houdini à des fins décoratives comme une amélioration progressive.

Conclusion

Les API Houdini permettront enfin aux développeurs de garder le code JavaScript utilisé pour la manipulation de style et la décoration plus proche du pipeline de rendu du navigateur, ce qui améliore les performances et la stabilité. En permettant aux développeurs de se connecter au processus de rendu du navigateur, ils pourront développer divers polyfills CSS qui peuvent être facilement partagés, implémentés et, éventuellement, ajoutés à la spécification CSS elle-même. Houdini rendra également les développeurs et les concepteurs moins contraints par les limitations CSS lorsqu'ils travaillent sur le style, les mises en page et les animations, résultant en de nouvelles expériences Web agréables.

Les fonctionnalités CSS Houdini peuvent être ajoutées aux projets aujourd'hui, mais strictement dans l'optique d'une amélioration progressive. Cela permettra aux navigateurs qui ne prennent pas en charge les fonctionnalités Houdini de rendre le site Web sans erreur et d'offrir une expérience utilisateur optimale.

Il sera passionnant de voir ce que la communauté des développeurs proposera à mesure que Houdini gagne en popularité et prend en charge un meilleur navigateur. Voici quelques exemples impressionnants d'expériences d'API Houdini de la communauté:

Les références

Smashing Editorial(rail)