{"id":83623,"date":"2022-09-14T05:27:36","date_gmt":"2022-09-14T03:27:36","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/"},"modified":"2020-09-17T00:52:51","modified_gmt":"2020-09-17T03:52:51","slug":"propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/","title":{"rendered":"Propri\u00e9t\u00e9s personnalis\u00e9es plus intelligentes avec la nouvelle API Houdini"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table des mati\u00e8res<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/#%C2%BFQue-es-Houdini\" >Qu&#039;est-ce que Houdini?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/#API-de-valores-y-propiedades-de-CSS-nivel-1\" >Propri\u00e9t\u00e9 et valeurs CSS API niveau 1<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/#Anatomia-de-una-propiedad-registrada\" >Anatomie d&#039;une propri\u00e9t\u00e9 enregistr\u00e9e<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/#name-string\" >nom: cha\u00eene<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/#syntax-string\" >syntaxe: cha\u00eene<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/#inherits-boolean\" >h\u00e9rite: bool\u00e9en<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/#initialValue-string\" >initialValue: cha\u00eene<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/#Gotchas\" >Gotchas<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/#Animando-propiedades-personalizadas\" >Animation des propri\u00e9t\u00e9s personnalis\u00e9es<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/propiedades-personalizadas-mas-inteligentes-con-la-nueva-api-de-houdini\/#Conclusion\" >conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Transitions et protection des donn\u00e9es en CSS\n        <\/p>\n<p>\n          <time>19 sept. 2019<\/time><\/p>\n<\/header>\n<p>Propri\u00e9t\u00e9s personnalis\u00e9es CSS, \u00e9galement appel\u00e9es <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2016\/02\/css-variables-why-should-you-care\">Variables CSS<\/a>, vous permet de d\u00e9finir vos propres propri\u00e9t\u00e9s en CSS et d&#039;utiliser leurs valeurs dans tout votre CSS. Bien qu&#039;ils soient incroyablement utiles aujourd&#039;hui, ils ont des lacunes qui peuvent rendre difficile de travailler avec eux: ils peuvent prendre n&#039;importe quelle valeur, de sorte qu&#039;ils peuvent \u00eatre accidentellement remplac\u00e9s par quelque chose d&#039;inattendu, ils h\u00e9ritent toujours de leurs valeurs de leurs parents, et vous ne peut pas faire la transition. Avec Houdini&#039;s <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/drafts.css-houdini.org\/css-properties-values-api\/\">Propri\u00e9t\u00e9 et valeurs CSS API niveau 1<\/a>, d\u00e9sormais disponible dans Chrome 78, ces lacunes sont surmont\u00e9es, ce qui rend les propri\u00e9t\u00e9s personnalis\u00e9es CSS incroyablement puissantes!<\/p>\n<h2 id=\"what-is-houdini\"><span class=\"ez-toc-section\" id=\"%C2%BFQue-es-Houdini\"><\/span>Qu&#039;est-ce que Houdini? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Avant de parler de la nouvelle API, parlons rapidement de Houdini. Le groupe de travail CSS-TAG Houdini, mieux connu sous le nom de CSS Houdini ou simplement Houdini, existe pour \u00abd\u00e9velopper des fonctions qui expliquent la\u00ab magie \u00bbdu style et du design sur le Web\u00bb. La collection de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/drafts.css-houdini.org\/\">Sp\u00e9cifications Houdini<\/a> Ils sont con\u00e7us pour lib\u00e9rer la puissance du moteur de rendu du navigateur, permettant une meilleure compr\u00e9hension de nos styles et la possibilit\u00e9 d&#039;\u00e9tendre notre moteur de rendu. Avec cela, il est enfin possible d&#039;\u00e9crire des valeurs CSS en JavaScript et de polyfilling ou d&#039;inventer un nouveau CSS sans impact sur les performances. Houdini a le potentiel d&#039;autonomiser la cr\u00e9ativit\u00e9 sur le Web.<\/p>\n<h2 id=\"css-properties-and-values-api-level-1\"><span class=\"ez-toc-section\" id=\"API-de-valores-y-propiedades-de-CSS-nivel-1\"><\/span>Propri\u00e9t\u00e9 et valeurs CSS API niveau 1 <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Les <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/drafts.css-houdini.org\/css-properties-values-api\/\">Propri\u00e9t\u00e9 et valeurs CSS API niveau 1<\/a> (Houdini Props and Vals) nous permet de structurer nos propri\u00e9t\u00e9s personnalis\u00e9es. Voici la situation actuelle lors de l&#039;utilisation de propri\u00e9t\u00e9s personnalis\u00e9es:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.thing<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">--ma-couleur<\/span><span class=\"token punctuation\">:<\/span> green<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\u00c9tant donn\u00e9 que les propri\u00e9t\u00e9s personnalis\u00e9es n&#039;ont pas de types, elles peuvent \u00eatre remplac\u00e9es de mani\u00e8re inattendue. Par exemple, consid\u00e9rez ce qui se passe si vous d\u00e9finissez <code>--ma-couleur<\/code> avec une URL.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.thing<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">--ma-couleur<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token url\"><span class=\"token function\">URL<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string url\">'not-a-color'<\/span><span class=\"token punctuation\">)<\/span><\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Couleur<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">var<\/span><span class=\"token punctuation\">(<\/span>--ma-couleur<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Ici parce que <code>--ma-couleur<\/code> il n&#039;est pas \u00e9crit, il ne sait pas qu&#039;une URL n&#039;est pas une valeur de couleur valide. Lorsque nous l&#039;utilisons, il revient aux valeurs par d\u00e9faut (noir pour <code>Couleur<\/code>, transparent \u00e0 <code>Contexte<\/code>). Avec Houdini Props and Vals, les propri\u00e9t\u00e9s personnalis\u00e9es peuvent \u00eatre <em>inscrit<\/em> pour que le navigateur sache quoi <em>devrait<\/em> \u00eatre!<\/p>\n<p>Maintenant la propri\u00e9t\u00e9 personnalis\u00e9e <code>--ma-couleur<\/code> est enregistr\u00e9 comme couleur! Cela indique au navigateur quels types de valeurs sont autoris\u00e9s et comment il peut \u00e9crire et g\u00e9rer cette propri\u00e9t\u00e9!<\/p>\n<h3 id=\"anatomy-of-a-registered-property\"><span class=\"ez-toc-section\" id=\"Anatomia-de-una-propiedad-registrada\"><\/span>Anatomie d&#039;une propri\u00e9t\u00e9 enregistr\u00e9e <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>L&#039;enregistrement d&#039;une propri\u00e9t\u00e9 ressemble \u00e0 ceci:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">la fen\u00eatre<span class=\"token punctuation\">.<\/span><span class=\"token constant\">CSS<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">registerProperty<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>patate douce<span class=\"token operator\">:<\/span> <span class=\"token string\">'--my-color'<\/span><span class=\"token punctuation\">,<\/span><br>syntaxe<span class=\"token operator\">:<\/span> <span class=\"token string\">'&lt;color&gt;'<\/span><span class=\"token punctuation\">,<\/span><br>inherits<span class=\"token operator\">:<\/span> <span class=\"token boolean\">faux<\/span><span class=\"token punctuation\">,<\/span><br>initialValue<span class=\"token operator\">:<\/span> <span class=\"token string\">'black'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Prend en charge les options suivantes:<\/p>\n<h4 id=\"name:-string\"><span class=\"ez-toc-section\" id=\"name-string\"><\/span><code>nom: cha\u00eene<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Le nom de la propri\u00e9t\u00e9 personnalis\u00e9e.<\/p>\n<h4 id=\"syntax:-string\"><span class=\"ez-toc-section\" id=\"syntax-string\"><\/span><code>syntaxe: cha\u00eene<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Comment analyser la propri\u00e9t\u00e9 personnalis\u00e9e. Vous pouvez trouver une liste compl\u00e8te des valeurs possibles dans le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/drafts.csswg.org\/css-values-3\/\">Valeurs et unit\u00e9s CSS<\/a> sp\u00e9cification. Par d\u00e9faut \u00e0 <code>*<\/code>.<\/p>\n<h4 id=\"inherits:-boolean\"><span class=\"ez-toc-section\" id=\"inherits-boolean\"><\/span><code>h\u00e9rite: bool\u00e9en<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>S&#039;il h\u00e9rite de la valeur de son p\u00e8re. Par d\u00e9faut \u00e0 <code>vrai<\/code>.<\/p>\n<h4 id=\"initialvalue:-string\"><span class=\"ez-toc-section\" id=\"initialValue-string\"><\/span><code>initialValue: cha\u00eene<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Valeur initiale de la propri\u00e9t\u00e9 personnalis\u00e9e.<\/p>\n<p>Regardant de plus pr\u00e8s <code>syntaxe<\/code>. Il existe un certain nombre de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/drafts.css-houdini.org\/css-properties-values-api\/#supported-names\">options valides<\/a><br \/>\nallant des nombres aux couleurs en passant par<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/custom-ident\"><code><\/code><\/a><\/p>\n<p>les types. Cette syntaxe peut \u00e9galement \u00eatre modifi\u00e9e \u00e0 l&#039;aide des valeurs suivantes<\/p>\n<ul>\n<li>Ajout <code>+<\/code> signifie qu&#039;il accepte une liste de valeurs s\u00e9par\u00e9es par des espaces \u00e0 partir de cette syntaxe. Par exemple,  <code>+<\/code> serait une liste de longueurs s\u00e9par\u00e9es par des espaces<\/li>\n<li>Ajout<code>#<\/code> signifie qu&#039;il accepte une liste de valeurs s\u00e9par\u00e9es par des virgules de cette syntaxe. Par exemple,  <code>#<\/code> ce serait une liste de couleurs s\u00e9par\u00e9es par des virgules<\/li>\n<li>Ajouter <code>|<\/code> entre la syntaxe ou les identificateurs signifie que l&#039;une des options fournies est valide. Par exemple, <code># | | la magie<\/code> autoriserait une liste de couleurs s\u00e9par\u00e9es par des virgules, une URL ou le mot <code>la magie<\/code>.<\/li>\n<\/ul>\n<h3 id=\"gotchas\"><span class=\"ez-toc-section\" id=\"Gotchas\"><\/span>Gotchas <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Il y a deux pi\u00e8ges avec Houdini Props et Waltz. La premi\u00e8re est qu&#039;une fois d\u00e9finie, il n&#039;y a aucun moyen de mettre \u00e0 jour une propri\u00e9t\u00e9 enregistr\u00e9e existante, et toute tentative de r\u00e9enregistrer une propri\u00e9t\u00e9 renverra une erreur indiquant qu&#039;elle a d\u00e9j\u00e0 \u00e9t\u00e9 d\u00e9finie.<\/p>\n<p>Deuxi\u00e8mement, contrairement aux propri\u00e9t\u00e9s standard, les propri\u00e9t\u00e9s enregistr\u00e9es ne sont pas valid\u00e9es lorsqu&#039;elles sont analys\u00e9es. Au contraire, ils sont valid\u00e9s lorsqu&#039;ils sont calcul\u00e9s. Cela signifie que les valeurs non valides n&#039;appara\u00eetront pas comme non valides lors de l&#039;inspection des propri\u00e9t\u00e9s de l&#039;\u00e9l\u00e9ment et que l&#039;inclusion d&#039;une propri\u00e9t\u00e9 non valide apr\u00e8s une propri\u00e9t\u00e9 valide ne reviendra pas \u00e0 une propri\u00e9t\u00e9 valide; une propri\u00e9t\u00e9 non valide, cependant, reviendra \u00e0 la valeur par d\u00e9faut de la propri\u00e9t\u00e9 enregistr\u00e9e.<\/p>\n<h2 id=\"animating-custom-properties\"><span class=\"ez-toc-section\" id=\"Animando-propiedades-personalizadas\"><\/span>Animation des propri\u00e9t\u00e9s personnalis\u00e9es <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Une propri\u00e9t\u00e9 personnalis\u00e9e enregistr\u00e9e offre un bonus amusant au-del\u00e0 de la v\u00e9rification de type - la possibilit\u00e9 de l&#039;animer! Un exemple d&#039;animation de base ressemble \u00e0 ceci:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>sc\u00e9nario<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script\"><span class=\"token language-javascript\"><br><span class=\"token constant\">CSS<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">registerProperty<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>patate douce<span class=\"token operator\">:<\/span> <span class=\"token string\">'--stop-color'<\/span><span class=\"token punctuation\">,<\/span><br>syntaxe<span class=\"token operator\">:<\/span> <span class=\"token string\">'&lt;color&gt;'<\/span><span class=\"token punctuation\">,<\/span><br>inherits<span class=\"token operator\">:<\/span> <span class=\"token boolean\">faux<\/span><span class=\"token punctuation\">,<\/span><br>initialValue<span class=\"token operator\">:<\/span> <span class=\"token string\">'blue'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>sc\u00e9nario<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><p><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>style<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token style\"><span class=\"token language-css\"><br><span class=\"token selector\">bouton<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">--stop-color<\/span><span class=\"token punctuation\">:<\/span> rapporter<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token property\">--stop-color<\/span><span class=\"token punctuation\">:<\/span> 1s<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/span><\/span><\/p><p><span class=\"token selector\">button:hover<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">--stop-color<\/span><span class=\"token punctuation\">:<\/span> green<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>style<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Lorsque vous survolez le bouton, il s&#039;animera du rouge au vert! Sans enregistrer la propri\u00e9t\u00e9, elle passera d&#039;une couleur \u00e0 une autre car, sans \u00eatre enregistr\u00e9, le navigateur ne sait pas \u00e0 quoi s&#039;attendre entre une valeur et la suivante et ne peut donc pas garantir la possibilit\u00e9 de transition. Cependant, cet exemple peut \u00eatre pouss\u00e9 plus loin pour animer des d\u00e9grad\u00e9s CSS. Le CSS suivant peut \u00eatre \u00e9crit avec la m\u00eame propri\u00e9t\u00e9 enregistr\u00e9e:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">bouton<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">--stop-color<\/span><span class=\"token punctuation\">:<\/span> rapporter<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Contexte<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">gradient lin\u00e9aire<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">var<\/span><span class=\"token punctuation\">(<\/span>--stop-color<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> black<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> --stop-color 1s<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><p><span class=\"token selector\">button:hover<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">--stop-color<\/span><span class=\"token punctuation\">:<\/span> green<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Cela animera notre propri\u00e9t\u00e9 personnalis\u00e9e qui fait partie de la <code>gradient lin\u00e9aire<\/code>, animant ainsi notre d\u00e9grad\u00e9 lin\u00e9aire. Jetez un \u0153il au Glitch ci-dessous pour voir le code complet en action et jouer avec vous-m\u00eame.<\/p>\n<p><!-- Copy and Paste Me --><\/p>\n<p>\n  <iframe allow=\"camera; clipboard; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi; vr\" loading=\"lazy\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/houdini-props-and-vals?attributionHidden=true&amp;sidebarCollapsed=true&amp;path=style.css&amp;previewSize=40\" style=\"height: 100%; width: 100%; border: 0;\" title=\"houdini-accessoires-et-valse sur Glitch\"><\/iframe>\n<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>conclusion <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Houdini <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/ishoudinireadyyet.com\/\">est en route<\/a> aux navigateurs et avec lui des fa\u00e7ons compl\u00e8tement nouvelles de travailler et d&#039;\u00e9tendre CSS. Avec lui <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/01\/paintapi\">API Paint<\/a> D\u00e9j\u00e0 livr\u00e9 et maintenant Custom Props and Waltz, notre bo\u00eete \u00e0 outils cr\u00e9ative s&#039;agrandit, nous permettant de d\u00e9finir des propri\u00e9t\u00e9s CSS \u00e9crites et de les utiliser pour cr\u00e9er et animer de nouveaux designs passionnants. D&#039;autres sont en route aussi, dans le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/w3c\/css-houdini-drafts\/issues\">La file d&#039;attente des probl\u00e8mes de Houdini<\/a> o\u00f9 vous pouvez donner votre avis et voir la suite pour Houdini. Houdini existe pour d\u00e9velopper des fonctionnalit\u00e9s qui expliquent la \u00abmagie\u00bb du style et du design sur le Web, alors sortez et profitez de ces fonctionnalit\u00e9s magiques.<\/p>\n<p><!--lint disable no-literal-urls--><\/p>\n<p><em>photo par<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@der_maik_?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Maik Jonietz<\/a><br \/>\nau<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/search\/photos\/code?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/em><\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Transiciones y protecci\u00f3n de datos en CSS 19 de sep de 2019 Propiedades personalizadas de CSS, tambi\u00e9n conocidas como Variables CSS, le permite definir sus propias propiedades en CSS y&#8230;<\/p>","protected":false},"author":1,"featured_media":83624,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83623","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Propiedades personalizadas m\u00e1s inteligentes con la nueva API de Houdini - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Transiciones y protecci\u00f3n de datos en CSS 19 de sep de 2019 Propiedades personalizadas de CSS, tambi\u00e9n conocidas como Variables CSS, le permite definir\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/smarter-custom-properties-with-new-houdini-api\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Propiedades personalizadas m\u00e1s inteligentes con la nueva API de Houdini\" \/>\n<meta property=\"og:description\" content=\"Transiciones y protecci\u00f3n de datos en CSS 19 de sep de 2019 Propiedades personalizadas de CSS, tambi\u00e9n conocidas como Variables CSS, le permite definir\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/smarter-custom-properties-with-new-houdini-api\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-14T03:27:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4021556.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/smarter-custom-properties-with-new-houdini-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/smarter-custom-properties-with-new-houdini-api\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Propiedades personalizadas m\u00e1s inteligentes con la nueva API de Houdini\",\"datePublished\":\"2022-09-14T03:27:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/smarter-custom-properties-with-new-houdini-api\\\/\"},\"wordCount\":966,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/smarter-custom-properties-with-new-houdini-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4021556.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/smarter-custom-properties-with-new-houdini-api\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/smarter-custom-properties-with-new-houdini-api\\\/\",\"name\":\"Propiedades personalizadas m\u00e1s inteligentes con la nueva API de Houdini - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/smarter-custom-properties-with-new-houdini-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/smarter-custom-properties-with-new-houdini-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4021556.jpg\",\"datePublished\":\"2022-09-14T03:27:36+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Transiciones y protecci\u00f3n de datos en CSS 19 de sep de 2019 Propiedades personalizadas de CSS, tambi\u00e9n conocidas como Variables CSS, le permite definir\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/smarter-custom-properties-with-new-houdini-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/smarter-custom-properties-with-new-houdini-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4021556.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-4021556.jpg\",\"width\":1200,\"height\":800,\"caption\":\"hero-4021556-4873693-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Propiedades personalizadas m\u00e1s inteligentes con la nueva API de Houdini - R Marketing Digital","description":"Transitions et protection des donn\u00e9es dans CSS 19 sept. 2019 Les propri\u00e9t\u00e9s personnalis\u00e9es CSS, \u00e9galement appel\u00e9es variables CSS, vous permettent de d\u00e9finir","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/dev\/smarter-custom-properties-with-new-houdini-api\/","og_locale":"fr_FR","og_type":"article","og_title":"Propiedades personalizadas m\u00e1s inteligentes con la nueva API de Houdini","og_description":"Transiciones y protecci\u00f3n de datos en CSS 19 de sep de 2019 Propiedades personalizadas de CSS, tambi\u00e9n conocidas como Variables CSS, le permite definir","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/smarter-custom-properties-with-new-houdini-api\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-14T03:27:36+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4021556.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/smarter-custom-properties-with-new-houdini-api\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/smarter-custom-properties-with-new-houdini-api\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Propiedades personalizadas m\u00e1s inteligentes con la nueva API de Houdini","datePublished":"2022-09-14T03:27:36+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/smarter-custom-properties-with-new-houdini-api\/"},"wordCount":966,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/smarter-custom-properties-with-new-houdini-api\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4021556.jpg","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/smarter-custom-properties-with-new-houdini-api\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/smarter-custom-properties-with-new-houdini-api\/","name":"Propiedades personalizadas m\u00e1s inteligentes con la nueva API de Houdini - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/smarter-custom-properties-with-new-houdini-api\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/smarter-custom-properties-with-new-houdini-api\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4021556.jpg","datePublished":"2022-09-14T03:27:36+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Transitions et protection des donn\u00e9es dans CSS 19 sept. 2019 Les propri\u00e9t\u00e9s personnalis\u00e9es CSS, \u00e9galement appel\u00e9es variables CSS, vous permettent de d\u00e9finir","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/smarter-custom-properties-with-new-houdini-api\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/smarter-custom-properties-with-new-houdini-api\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4021556.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-4021556.jpg","width":1200,"height":800,"caption":"hero-4021556-4873693-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83623"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83623\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/83624"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}