{"id":81486,"date":"2022-10-22T19:07:44","date_gmt":"2022-10-22T17:07:44","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/dando-superpoderes-a-las-variables-css\/"},"modified":"2020-09-16T15:05:55","modified_gmt":"2020-09-16T18:05:55","slug":"dando-superpoderes-a-las-variables-css","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/dando-superpoderes-a-las-variables-css\/","title":{"rendered":"Donner des super pouvoirs aux variables CSS"},"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\/dando-superpoderes-a-las-variables-css\/#Escribir-propiedades-personalizadas-de-Houdini\" >\u00c9crire des propri\u00e9t\u00e9s personnalis\u00e9es 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\/dando-superpoderes-a-las-variables-css\/#Valores-alternativos\" >Valeurs alternatives<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/dando-superpoderes-a-las-variables-css\/#Sintaxis\" >Syntaxe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/dando-superpoderes-a-las-variables-css\/#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>          L&#039;API Houdini Properties and Values arrivera dans votre fichier CSS dans Chromium 85.\n        <\/p>\n<p>\n          <time>21 juillet 2020<\/time><\/p>\n<\/header>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ishoudinireadyyet.com\">CSS Houdini<\/a> est un terme g\u00e9n\u00e9rique qui couvre un ensemble d&#039;API de bas niveau qui exposent des parties du moteur de rendu CSS et permettent aux d\u00e9veloppeurs d&#039;acc\u00e9der au mod\u00e8le d&#039;objet CSS. Il s&#039;agit d&#039;un \u00e9norme changement pour l&#039;\u00e9cosyst\u00e8me CSS car il permet aux d\u00e9veloppeurs d&#039;indiquer au navigateur comment lire et analyser le CSS personnalis\u00e9 sans attendre que les fournisseurs de navigateurs impl\u00e9mentent ces fonctionnalit\u00e9s de mani\u00e8re native. Que c&#039;est \u00e9mouvant!<\/p>\n<p>L&#039;un des ajouts les plus int\u00e9ressants au CSS dans le cadre de Houdini est le<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CSS_Properties_and_Values_API\">API Propri\u00e9t\u00e9s et Valeurs<\/a>. Cette API suralimente vos propri\u00e9t\u00e9s CSS personnalis\u00e9es (\u00e9galement connues sous le nom de variables CSS) en leur donnant une signification s\u00e9mantique (d\u00e9finie par une syntaxe) et m\u00eame des valeurs alternatives, permettant des tests CSS.<\/p>\n<h2 id=\"writing-houdini-custom-properties\"><span class=\"ez-toc-section\" id=\"Escribir-propiedades-personalizadas-de-Houdini\"><\/span>\u00c9crire des propri\u00e9t\u00e9s personnalis\u00e9es Houdini <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Voici un exemple de d\u00e9finition d&#039;une propri\u00e9t\u00e9 personnalis\u00e9e (pensez: variable CSS), mais maintenant avec une syntaxe (type), une valeur initiale (support) et un bool\u00e9en d&#039;h\u00e9ritage (h\u00e9rite-t-il de la valeur de son parent ou non?). La fa\u00e7on actuelle de le faire est de <code>CSS.registerProperty ()<\/code> en JavaScript, mais dans Chromium 85 et versions ult\u00e9rieures, le<br \/>\n<code>@propri\u00e9t\u00e9<\/code> la syntaxe sera compatible avec vos fichiers CSS:<\/p>\n<div class=\"w-columns\">\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--worse\">\n<p>    Fichier JavaScript autonome (Chromium 78)\n  <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><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\">'--colorPrimary'<\/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>initialValue<span class=\"token operator\">:<\/span> <span class=\"token string\">'magenta'<\/span><span class=\"token punctuation\">,<\/span><br>inherits<span class=\"token operator\">:<\/span> <span class=\"token boolean\">faux<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/figure>\n<figure class=\"w-compare\">\n<p class=\"w-compare__label w-compare__label--better\">\n<p>    Inclus dans le fichier CSS (Chromium 85)\n  <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token atrule\"><span class=\"token rule\">@propri\u00e9t\u00e9<\/span> --couleurPrimaire<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">syntaxe<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'&lt;color&gt;'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">valeur initiale<\/span><span class=\"token punctuation\">:<\/span> magenta<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">inherits<\/span><span class=\"token punctuation\">:<\/span> faux<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/figure>\n<\/div>\n<p>Maintenant, vous pouvez acc\u00e9der <code>--couleurPrimaire<\/code> comme toute autre propri\u00e9t\u00e9 personnalis\u00e9e CSS, via<br \/>\n<code>var (- colorPrimary)<\/code>. Cependant, la diff\u00e9rence ici est que <code>--couleurPrimaire<\/code> il n&#039;est pas lu uniquement comme une cha\u00eene. Vous avez des donn\u00e9es!<\/p>\n<div class=\"w-aside w-aside--gotchas\">\n<strong>Gotchas!<\/strong> <\/p>\n<p>Lors de l&#039;\u00e9criture d&#039;une propri\u00e9t\u00e9 personnalis\u00e9e enregistr\u00e9e avec un <code>syntaxe<\/code>, votre <em>devrait<\/em> comprend \u00e9galement un <code>valeur initiale<\/code>.<\/p>\n<\/div>\n<h2 id=\"fallback-values\"><span class=\"ez-toc-section\" id=\"Valores-alternativos\"><\/span>Valeurs alternatives <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Comme pour toute autre propri\u00e9t\u00e9 personnalis\u00e9e, vous pouvez obtenir (en utilisant var) ou d\u00e9finir (\u00e9crire \/ r\u00e9\u00e9crire) des valeurs, mais avec les propri\u00e9t\u00e9s personnalis\u00e9es Houdini, si vous d\u00e9finissez une valeur fausse lors de la substitution, le moteur de rendu CSS enverra la valeur initiale (son valeur de r\u00e9serve) au lieu d&#039;ignorer la ligne.<\/p>\n<p>Prenons l&#039;exemple suivant. Les <code>--couleurPrimaire<\/code> variable a un<br \/>\n<code>valeur initiale<\/code> de <code>magenta<\/code>. Mais le d\u00e9veloppeur lui a donn\u00e9 la valeur invalide &quot;23&quot;. Sans <code>@propri\u00e9t\u00e9<\/code>, l&#039;analyseur CSS ignorerait le code invalide. Maintenant, l&#039;analyseur revient \u00e0 <code>magenta<\/code>. Cela permet de v\u00e9ritables sauvegardes et tests dans CSS. Organiser!<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.card<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">Couleur de l&#039;arri\u00e8re plan<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">var<\/span><span class=\"token punctuation\">(<\/span>--couleurPrimaire<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <br><span class=\"token punctuation\">}<\/span><p><span class=\"token selector\">.highlight-card<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">--couleurPrimaire<\/span><span class=\"token punctuation\">:<\/span> yellow<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Couleur de l&#039;arri\u00e8re plan<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">var<\/span><span class=\"token punctuation\">(<\/span>--couleurPrimaire<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <br><span class=\"token punctuation\">}<\/span><\/p><p><span class=\"token selector\">.another-card<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">--couleurPrimaire<\/span><span class=\"token punctuation\">:<\/span> 23<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">Couleur de l&#039;arri\u00e8re plan<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">var<\/span><span class=\"token punctuation\">(<\/span>--couleurPrimaire<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"syntax\"><span class=\"ez-toc-section\" id=\"Sintaxis\"><\/span>Syntaxe <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Avec la fonction de syntaxe, vous pouvez maintenant \u00e9crire du CSS s\u00e9mantique en sp\u00e9cifiant un type. Les types actuels autoris\u00e9s comprennent:<\/p>\n<ul>\n<li><code>longueur<\/code><\/li>\n<li><code>num\u00e9ro<\/code><\/li>\n<li><code>pourcentage<\/code><\/li>\n<li><code>pourcentage de longueur<\/code><\/li>\n<li><code>Couleur<\/code><\/li>\n<li><code>image<\/code><\/li>\n<li><code>URL<\/code><\/li>\n<li><code>entier<\/code><\/li>\n<li><code>angle<\/code><\/li>\n<li><code>temps<\/code><\/li>\n<li><code>r\u00e9solution<\/code><\/li>\n<li><code>liste de transformation<\/code><\/li>\n<li><code>fonction de transformation<\/code><\/li>\n<li><code>identifiant-personnalis\u00e9<\/code>  (une cha\u00eene d&#039;identification personnalis\u00e9e)<\/li>\n<\/ul>\n<p>La d\u00e9finition d&#039;une syntaxe permet au navigateur de v\u00e9rifier les propri\u00e9t\u00e9s personnalis\u00e9es. Cela pr\u00e9sente de nombreux avantages.<\/p>\n<p>Pour illustrer ce point, je vais vous montrer comment animer un d\u00e9grad\u00e9. Actuellement, il n&#039;existe aucun moyen d&#039;animer (ou d&#039;interpoler) de mani\u00e8re transparente entre les valeurs de d\u00e9grad\u00e9, car chaque d\u00e9claration de d\u00e9grad\u00e9 est analys\u00e9e comme une cha\u00eene.<\/p>\n<figure class=\"w-figure\">\n  <img alt='soutien1-3683783' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/support1-3683783.gif'><figcaption class=\"w-figcaption\">\n<p>    En utilisant une propri\u00e9t\u00e9 personnalis\u00e9e avec une syntaxe \u00abnombre\u00bb, le d\u00e9grad\u00e9 sur la gauche montre une transition en douceur entre les valeurs d&#039;arr\u00eat. Le d\u00e9grad\u00e9 de droite utilise une propri\u00e9t\u00e9 personnalis\u00e9e par d\u00e9faut (aucune syntaxe d\u00e9finie) et montre une transition nette.<br \/>\n  <\/figcaption><\/figure>\n<p><!-- \n\n<figure class=\"w-figure\">\n  <video controls autoplay loop muted playsinline class=\"w-screenshot\">\n<source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/at-property\/support1.mp4\" type=\"video\/mp4\">\n<\/video>\n  \n \n<figcaption class=\"w-figcaption\">\n    Using a custom property with a \"number\" syntax, the gradient on the left shows a smooth \n    transition between stop values. The gradient on the right uses a default custom property \n    (no syntax defined) and shows an abrupt transition.\n  <\/figcaption>\n \n\n<\/figure>\n\n\n--><\/p>\n<p>Dans cet exemple, le pourcentage d&#039;arr\u00eat du d\u00e9grad\u00e9 est anim\u00e9 d&#039;une valeur de d\u00e9part de 40% \u00e0 une valeur de fin de 100% \u00e0 l&#039;aide d&#039;une interaction de d\u00e9calage. Vous devriez voir une transition en douceur de cette couleur de d\u00e9grad\u00e9 sup\u00e9rieure vers le bas.<\/p>\n<p>Le navigateur sur la gauche prend en charge l&#039;API Propri\u00e9t\u00e9s et valeurs Houdini, permettant une transition d&#039;arr\u00eat de d\u00e9grad\u00e9 en douceur. Le navigateur de droite ne le fait pas. Le navigateur non pris en charge ne peut comprendre ce changement que comme une cha\u00eene allant du point A au point B. Il n&#039;y a aucune possibilit\u00e9 d&#039;interpoler les valeurs et par cons\u00e9quent, aucune transition en douceur n&#039;est observ\u00e9e.<\/p>\n<p>Cependant, si vous d\u00e9clarez le type de syntaxe lors de l&#039;\u00e9criture de propri\u00e9t\u00e9s personnalis\u00e9es et que vous utilisez ensuite ces propri\u00e9t\u00e9s personnalis\u00e9es pour activer l&#039;animation, vous verrez la transition. Vous pouvez instancier la propri\u00e9t\u00e9 personnalis\u00e9e <code>--gradPoint<\/code> aimer:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><br><span class=\"token atrule\"><span class=\"token rule\">@supports<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">Contexte<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">paint<\/span><span class=\"token punctuation\">(<\/span>something<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token atrule\"><span class=\"token rule\">@propri\u00e9t\u00e9<\/span> --gradPoint<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">syntaxe<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token string\">'&lt;percentage&gt;'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">inherits<\/span><span class=\"token punctuation\">:<\/span> faux<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">valeur initiale<\/span><span class=\"token punctuation\">:<\/span> 40%<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Et puis quand il est temps de l&#039;animer, vous pouvez mettre \u00e0 jour la valeur de l&#039;initiale <code>40%<\/code> \u00e0 <code>100%<\/code>:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token atrule\"><span class=\"token rule\">@supports<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">Contexte<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">paint<\/span><span class=\"token punctuation\">(<\/span>something<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token selector\">.post:hover,<br>.post:focus<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">--gradPoint<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Cela permettra d\u00e9sormais cette transition de d\u00e9grad\u00e9 en douceur.<\/p>\n<figure class=\"w-figure\">\n  <img alt='d\u00e9mo-9540335' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/demo-9540335.gif'><figcaption class=\"w-figcaption\">\n<p>    Bords d\u00e9grad\u00e9s de transition lisses. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/~houdini-gradient-borders\">Voir la d\u00e9mo dans Glitch<\/a><br \/>\n  <\/figcaption><\/figure>\n<p><!--\n\n\n<figure class=\"w-figure\">\n  <video controls autoplay loop muted playsinline class=\"w-screenshot\">\n<source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/at-property\/demo.mp4\" type=\"video\/mp4\">\n<\/video>\n  \n \n<figcaption class=\"w-figcaption\">\n    Smoothly transitioning gradient borders. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/~houdini-gradient-borders\">See Demo on Glitch<\/a>\n  <\/figcaption>\n \n\n<\/figure>\n\n\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>Les <code>@propri\u00e9t\u00e9<\/code> rule rend une technologie passionnante encore plus accessible en vous permettant d&#039;\u00e9crire du CSS s\u00e9mantiquement significatif dans le CSS lui-m\u00eame. Pour plus d&#039;informations sur CSS Houdini et l&#039;API Properties and Values, consultez ces ressources:<\/p>\n<p>photo par <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@cristian1\">Christian Escobar<\/a> sur Unsplash.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>La API de propiedades y valores de Houdini llegar\u00e1 a su archivo CSS en Chromium 85. 21 de julio de 2020 CSS Houdini es un t\u00e9rmino general que cubre un&#8230;<\/p>","protected":false},"author":1,"featured_media":81385,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-81486","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>Dando superpoderes a las variables CSS - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"La API de propiedades y valores de Houdini llegar\u00e1 a su archivo CSS en Chromium 85. 21 de julio de 2020 CSS Houdini es un t\u00e9rmino general que cubre un\" \/>\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\/geben-von-superkraften-an-css-variablen\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dando superpoderes a las variables CSS\" \/>\n<meta property=\"og:description\" content=\"La API de propiedades y valores de Houdini llegar\u00e1 a su archivo CSS en Chromium 85. 21 de julio de 2020 CSS Houdini es un t\u00e9rmino general que cubre un\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/geben-von-superkraften-an-css-variablen\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-22T17:07:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7923897.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\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\\\/geben-von-superkraften-an-css-variablen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/geben-von-superkraften-an-css-variablen\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Dando superpoderes a las variables CSS\",\"datePublished\":\"2022-10-22T17:07:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/geben-von-superkraften-an-css-variablen\\\/\"},\"wordCount\":748,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/geben-von-superkraften-an-css-variablen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7923897.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/geben-von-superkraften-an-css-variablen\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/geben-von-superkraften-an-css-variablen\\\/\",\"name\":\"Dando superpoderes a las variables CSS - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/geben-von-superkraften-an-css-variablen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/geben-von-superkraften-an-css-variablen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7923897.jpg\",\"datePublished\":\"2022-10-22T17:07:44+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"La API de propiedades y valores de Houdini llegar\u00e1 a su archivo CSS en Chromium 85. 21 de julio de 2020 CSS Houdini es un t\u00e9rmino general que cubre un\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/geben-von-superkraften-an-css-variablen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/geben-von-superkraften-an-css-variablen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7923897.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7923897.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-7923897-5622351-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":"Dando superpoderes a las variables CSS - R Marketing Digital","description":"L&#039;API Houdini Properties and Values arrive dans votre fichier CSS dans Chromium 85. 21 juillet 2020 Houdini CSS est un terme g\u00e9n\u00e9ral qui couvre un","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\/geben-von-superkraften-an-css-variablen\/","og_locale":"fr_FR","og_type":"article","og_title":"Dando superpoderes a las variables CSS","og_description":"La API de propiedades y valores de Houdini llegar\u00e1 a su archivo CSS en Chromium 85. 21 de julio de 2020 CSS Houdini es un t\u00e9rmino general que cubre un","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/geben-von-superkraften-an-css-variablen\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-22T17:07:44+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7923897.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\/geben-von-superkraften-an-css-variablen\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/geben-von-superkraften-an-css-variablen\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Dando superpoderes a las variables CSS","datePublished":"2022-10-22T17:07:44+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/geben-von-superkraften-an-css-variablen\/"},"wordCount":748,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/geben-von-superkraften-an-css-variablen\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7923897.jpg","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/geben-von-superkraften-an-css-variablen\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/geben-von-superkraften-an-css-variablen\/","name":"Dando superpoderes a las variables CSS - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/geben-von-superkraften-an-css-variablen\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/geben-von-superkraften-an-css-variablen\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7923897.jpg","datePublished":"2022-10-22T17:07:44+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"L&#039;API Houdini Properties and Values arrive dans votre fichier CSS dans Chromium 85. 21 juillet 2020 Houdini CSS est un terme g\u00e9n\u00e9ral qui couvre un","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/geben-von-superkraften-an-css-variablen\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/geben-von-superkraften-an-css-variablen\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7923897.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7923897.jpg","width":1200,"height":360,"caption":"hero-7923897-5622351-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\/81486","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=81486"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/81486\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/81385"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=81486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=81486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=81486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}