Front-end

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é).

Exemple d’application de Paint API

Actuellement seul Chrome > 65 permet de faire des tests sur le CSS Paint API à la condition d’activer la fonctionnalité « Experimental Web Platform features » via l’url chrome://flags.
Vous aurez besoin d’activer cette fonctionnalité expérimentale de Chrome afin de voir notre démo CodePen.

Sur cet exemple, nous avons voulu ajouter sur des blocs les repères de composition appelés « Règle des tiers » afin de vérifier la composition de nos photographies affichées en arrière-plan.
Pour cela, nous avons à notre disposition la fonction paint(regle-des-tiers) dans laquelle nous passons en paramètre le nom de la fonctionnalité souhaitée, ici « regle-des-tiers ».

Nous avons créé la fonctionnalité « regle-des-tiers » dans un fichier JavaScript, qui lui est chargé au tout début de notre document.

Ainsi, nous pouvons récupérer et manipuler des valeurs d’autres propriétés présentes dans la même règle CSS ou bien créer nos propres propriétés CSS pour ensuite les utiliser via l’interface de dessin CanvasRenderingContext2D pour agir sur notre bloc.

See the Pen Houdini Paint CSS by Cédric Lambert (@Lamby-io) on CodePen.

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

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

Firefox Reality : un navigateur dédié à la AR/VR

Après avoir amélioré les performances de son navigateur phare, la société Mozilla a décidé
de s’imposer sur le marché de la réalité mixte en lançant son navigateur dédié : Firefox
Reality. Que propose-t- il ? Est-ce une révolution ? La réponse dans cet article !

ReactEurope : l’événement européen pour tous les amoureux du framework !

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 conférences et des ateliers à Paris ! Assistez à des speechs sur plusieurs technologies tels que React.js, React Native, GraphQL, Relay, Universal apps, ReasonML, Webpack, inline CSS.

vignette-GreenSock

GreenSock GSAP : animez le HTML de votre site !

Cette fois-ci, nous ne nous intéresserons pas à un nouveau Framework Javascript , mais une bibliothèque d’animation. Grâce à GreenSock, vous pouvez animer n’importe quel élément du DOM grâce à un ensemble d’outils.

Pour en savoir plus sur la dernière mise à jour de la bibliothèque d’animation, n’hésitez pas à lire notre article GSAP 3

Centre de préférences de confidentialité

    Cookies Fonctionnels

    gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

    Advertising

    Cookies Satistiques

    _ga, _gat, _gid

    Cookies externes

    PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
    CONSENT, 1P_JAR