Houdini CSS : des API pour manipuler le moteur CSS

Partager

Article mis à jour le 13 octobre 2022 | Publié le 6 avril 2018

Manipuler le moteur CSS pour faire fonctionner votre code sur tous les navigateurs du marché ? C’est désormais possible avec le projet Houdini.

Que contient Houdini CSS ?

Ce projet est un ensemble de plusieurs API qui effectuent chacune une ou plusieurs actions sur le moteur CSS. Voici la liste :

Layout API : permet aux développeurs de créer leurs propres algorithmes de mise en pages. Nous avons aujourd’hui le Bloc Flow / Flex / Table. Grâce à cet API, nous pourrions développer un module de mise en pages de type Masonry utilisant le moteur CSS du navigateur.

Parser API : permet de récupérer la valeur d’une propriété CSS de type string la manipuler via un objet. Permet d’étendre les fonctionnalités déjà existantes (exemple : une nouvelle unité de taille)

Paint API : que l’on vous décrira dans le prochain paragraphe

Properties & Values API : permet de définir des propriétés CSS ainsi que les valeurs associées. Cette API utilise Parser API pour définir le type de donnée (couleur, taille, etc)

AnimationWorklet : permet de créer des animations de type scroll ou des animations complexes via le moteur de rendu CSS, ce qui garantit de hautes performances

CSS Typed Object Model : nouvelle interface javascript permettant de manipuler le CSS. Ce modèle d’objet utilise des types, des méthodes et à terme va remplacer l’ancienne interface CSSOM qui est beaucoup moins fiable.

Font Metrics API : permet de récupérer les informations de taille de police du document selon un contexte donné (Quelle taille va prendre mon texte avec une police donnée, une taille donnée, un contexte donné).

 

Cet article vous a plus ? Découvrez tous nos autres articles techniques sur le blog de Numendo !

Vous serez peut-être aussi intéressé par ces articles

Image représentant les actualités

Personnaliser et animer soi-même la graisse d’une police ? C’est désormais possible avec les variables fonts !

Vous souhaitez participer à un événement où tous les développeurs se rencontrent ? Découvrez le Devoxx : déjà présent dans 5 pays, cet...

Qui a dit que les meilleures conférences sur le web se déroulaient aux Etats-Unis ? ReactEurope revient à Paris du 15 au 18 mai pour des...

Ce site web stocke des données telles que les cookies pour activer les fonctionnalités nécessaires du site, y compris l'analyse. Vous pouvez modifier ces paramètres à tout moment ou accepter les paramètres par défaut.
Préférences en matière de dépôt de données

Lorsque vous visitez des sites Web, ils peuvent stocker ou récupérer des données dans votre navigateur. Ce stockage est souvent nécessaire pour la fonctionnalité de base du site Web.
L’analyse peut être utilisée comme stockage. La confidentialité est importante pour nous, vous avez donc la possibilité de désactiver ce type de stockage qui n’est pas être nécessaire pour le fonctionnement de base du site Web. Le blocage de l’analyse peut avoir un impact sur votre expérience sur le site Web.

Nous utilisons des cookies pour personnaliser votre expérience sur Numendo.