1 pièce(s) jointe(s)
Avec sa collection d'API Houdini, Mozilla espère apporter des améliorations au processus de développement web
Avec sa collection d'API Houdini, Mozilla espère apporter des améliorations au processus de développement web
et au développement des normes CSS en général
Houdini, terme générique désignant la collection 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 à l'aide de JavaScript, se connecter au moteur de rendu CSS et indiquer au navigateur comment appliquer CSS pendant un processus de rendu.
Il faut beaucoup de temps pour qu'une nouvelle fonctionnalité ou amélioration CSS passe d'un brouillon initial à 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 les nouvelles fonctionnalités CSS avant leur mise en œuvre officielle. (Un polyfill est un bout de code – généralement en JavaScript sur le web – utilisé pour fournir des fonctionnalités récentes sur d'anciens navigateurs qui ne les supportent pas nativement. Par exemple, un polyfill pourrait être utilisé pour imiter la fonctionnalité d'un élément HTML Canvas sur Microsoft Internet Explorer 7 avec un plugin Silverlight, ou imiter le support des unités de mesure en rem ou ce que vous voulez.) Mais ils sont défectueux 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 bogues et des incohérences.
L'inconvénient potentiel de l'utilisation des 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 (Document Object Model) à partir du balisage HTML et, de la même manière, il a créé CSSOM (CSS Object Model) à 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'après la fin du cycle de rendu initial, c'est-à-dire lorsque DOM et CSSOM ont été créés et que le document a fini de charger. Une fois que le polyfill a apporté des modifications aux styles dans le DOM (en les insérant), le processus de rendu s'exécute à 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 la méthode requestAnimationFrame ou dépendent des interactions de l'utilisateur comme les événements de défilement.
Un autre obstacle au développement web peut être vu dans les diverses contraintes imposées par les standards CSS. Par exemple, il n'y a qu'un nombre limité de propriétés CSS qui peuvent être animées nativement. CSS sait animer les couleurs de manière native, mais ne sait pas animer des dégradés. Il a toujours été nécessaire d'innover et de créer des expériences Web impressionnantes malgré les limites technologiques. C'est pourquoi les développeurs ont souvent tendance à s'orienter vers l'utilisation de solutions de contournement moins qu'idéales ou de JavaScript pour implémenter un style et des effets plus avancés qui ne sont actuellement pas pris en charge par CSS tels que les effets 3D avancés, l'animation avancée, la typographie fluide, les dégradés animés, les éléments de sélection stylisés, etc.
Il semble impossible pour les spécifications CSS de suivre les diverses demandes de fonctionnalités de l'industrie telles que plus de contrôle sur les animations, une meilleure troncature du texte, une meilleure option de style pour les éléments d'entrée et de sélection, plus d'options d'affichage, plus d'options de filtre, etc.
Quelle pourrait être la solution potentielle ? Offrir aux développeurs un moyen natif d'étendre CSS à l'aide de diverses API. C'est ici qu'intervient Houdini de Mozilla.
Houdini
Houdini désigne un ensemble d'API de bas niveau qui donnent aux développeurs la possibilité d'étendre le CSS, offrant la possibilité de se connecter au processus de style et de mise en page du moteur de rendu d'un navigateur. Houdini donne aux développeurs l'accès au modèle d'objet CSS (CSSOM), permettant aux développeurs d'écrire du code que le navigateur peut analyser en CSS. L'avantage de Houdini est que les développeurs peuvent créer des fonctionnalités CSS sans attendre les spécifications des normes Web pour les définir et sans attendre que chaque navigateur implémente complètement les fonctionnalités.
Bien que de nombreuses fonctionnalités activées par Houdini puissent être créées avec JavaScript, l'interaction directe avec le CSSOM avant l'activation de JavaScript permet des temps d'analyse plus rapides que l'utilisation du style JavaScript pour les changements de style. Les navigateurs créent le CSSOM – y compris les processus de mise en page, de peinture et de composition – avant d'appliquer les mises à jour de style trouvées dans les scripts: les processus de mise en page, de peinture et de composition sont répétés pour que les styles JavaScript mis à jour soient implémentés. Le code Houdini n'attend pas la fin de ce premier cycle de rendu. Il est plutôt inclus dans ce premier cycle, créant des styles rendables et compréhensibles.
Une fonctionnalité de CSS Houdini est le Worklet. Avec les worklets, vous pouvez créer des CSS modulaires, nécessitant une seule ligne de JavaScript pour importer des composants configurables: aucun préprocesseur, postprocesseur ou framework JavaScript n'est nécessaire.
Code:
1
2
3
| <script>
CSS.paintWorklet.addModule('csscomponent.js');
</script> |
Ce module ajouté contient des fonctions registerPaint(), qui enregistrent des worklets entièrement configurables.
Les paramètres de la fonction CSS paint() incluent le nom du worklet, ainsi que des paramètres facultatifs. Le worklet a également accès aux propriétés personnalisées de l'élément: elles n'ont pas besoin d'être passées en tant qu'arguments de fonction.
Code:
1
2
3
4
5
| li {
background-image: paint(myComponent, stroke, 10px);
--highlights: blue;
--lowlights: green;
} |
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. Cela signifie-t-il 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 normalisé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.
Les API Houdini permettront aux développeurs de garder le code JavaScript utilisé pour la manipulation et la décoration de style plus près du pipeline de rendu du navigateur, ce qui se traduira par de meilleures performances et une meilleure 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, potentiellement, 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, ce qui se traduira par de nouvelles expériences Web agréables.
Les fonctionnalités CSS Houdini peuvent être ajoutées aux projets aujourd'hui, mais strictement avec une amélioration progressive à l'esprit. 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.
Source : Mozilla
Et vous ?
:fleche: Êtes-vous un développeur web (professionnel, amateur, etc.) ? Plutôt tourné vers le front-end, back-end ou fullstack ?
:fleche: Que pensez-vous de la solution Houdini de Mozilla ?
