{"id":28900,"date":"2017-04-20T09:36:51","date_gmt":"2017-04-20T09:36:51","guid":{"rendered":"https:\/\/codewebbarcelona.com\/propiedades-personalizadas-css-custom-properties\/"},"modified":"2026-04-21T00:53:39","modified_gmt":"2026-04-21T00:53:39","slug":"css-custom-properties","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/","title":{"rendered":"CSS Custom Properties or Variables"},"content":{"rendered":"<p>It\u2019s now a reality. We can finally use <strong>Custom Properties<\/strong> or <strong>CSS Custom Properties<\/strong>!<\/p>\n<p>But first, let\u2019s start with a solid &lt;h2&gt;, followed by a brief &lt;p&gt; summary.<\/p>\n<h2>CSS Custom Properties<\/h2>\n<p>Or, how to work magic in your CSS stylesheet.<\/p>\n<p><strong>CSS Custom Properties<\/strong> introduce a \u201cnew\u201d concept in CSS: <strong>the use of variables natively within your CSS<\/strong>\u2014and even from JavaScript.<\/p>\n<p>Why \u201cnew\u201d in quotes? You\u2019re probably familiar with CSS preprocessors. They\u2019ve been all the rage, but with the arrival of Custom Properties and as browser support grows, preprocessors are on their way out. At the end of this article, you\u2019ll find a browser support table, but spoiler: around 70% of users already have a browser that supports Custom Properties.<\/p>\n<p>&nbsp;<\/p>\n<h2>CSS and Custom Properties<\/h2>\n<p>To see the difference, let\u2019s compare a <strong>standard CSS stylesheet without Custom Properties<\/strong> to the same stylesheet <strong>rewritten using Custom Properties<\/strong>.<\/p>\n<p>Suppose we want a body with a specific background color, which we\u2019ll later use for text color in a layer, and we\u2019ll also use the body\u2019s text color as the background color for that layer.<\/p>\n<p>Layer 1 will have 20px padding\u2014the same value as the margin-top for layer 2.<\/p>\n<pre><code class=\"css\">\r\nbody{\r\n     background-color:#1b1b1b;\r\n     color:#fff;\r\n}\r\n.capa1{\r\n     padding:20px;\r\n     color:#1b1b1b;\r\n     background-color:#fff;\r\n}\r\n.capa2{\r\n     margin-top:20px;\r\n}\r\n\r\n<\/code><\/pre>\n<p>Now, let\u2019s recreate the same example, but this time using Custom Properties.<\/p>\n<pre><code class=\"css\">\r\n:root{\r\n     --color1:#1b1b1b;\r\n     --color2:#fff;\r\n     --mainSpacing:20px;\r\n}\r\nbody{\r\n     background-color:var(--color1);\r\n     color:var(--color2);\r\n}\r\n.capa1{\r\n     padding:var(--mainSpacing);\r\n     color:var(--color1);\r\n     background-color:var(--color2);\r\n}\r\n.capa2{\r\n     margin-top:var(--mainSpacing);\r\n}\r\n<\/code><\/pre>\n<p>With :root, we declare variables that are accessible throughout the entire CSS document. Use a double dash &#8212; to define a variable and its value. Then, to use the variable, simply call var(&#8211;VARIABLE);.<\/p>\n<p>Now imagine the benefits in a stylesheet with over 1,000 lines of code. If you need to update a value, you only have to change it in one place, and it updates everywhere.<\/p>\n<p>&nbsp;<\/p>\n<h2>Taking it further<\/h2>\n<p>Or even two steps further. <strong>CSS Custom Properties let you perform calculations<\/strong>, use <strong>conditional logic<\/strong>, and set default values if a variable isn\u2019t defined. Sounds like JavaScript, right? But you can do all this directly in your CSS.<\/p>\n<p>You can add, multiply, compare values, and apply different values based on conditions.<\/p>\n<pre><code class=\"css\">\r\n.caja{\r\n     \/*If variable1 isn\u2019t set, 10px will be used*\/\r\n     margin-top:var(--variable1, 10px);\r\n\r\n     \/*You can also use another variable as a fallback*\/\r\n     padding-top:var(--variable1,var(--variable2));\r\n\r\n    \/*You can add, subtract, multiply, and divide (*note the spacing for addition and subtraction)*\/\r\n     padding-top:calc(var(--variable1) + 10px);\r\n     height:calc(var(--variable1) - 5px);\r\n     line-height:calc(var(--variable1) * 2);\r\n     width:calc((var(--variable1) - 5px)\/2);\r\n     \r\n}\r\n<\/code><\/pre>\n<p>More examples:<\/p>\n<pre><code class=\"css\">\r\n:root{\r\n     \/*You can create text to be inserted later with :before*\/\r\n     --text:\"Click to view\";\r\n}\r\n.caja:before{\r\n     content:var(--text);\r\n}\r\n.caja2:before{\r\n     \/*You can append more text after your variable (e.g., a project link)*\/\r\n     content:var(--text)' our full project';\r\n}\r\n.caja2:before{\r\n     \/*Or use it for a news link*\/\r\n     content:var(--text)' our news';\r\n}\r\n<\/code><\/pre>\n<p>Conditional example:<\/p>\n<pre><code class=\"css\">\r\n:root{\r\n     \/*Accessible via JavaScript*\/\r\n     --variableCond: if(x &gt; 5) this.width = 10;\r\n}\r\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n<h2>Browser support<\/h2>\n<p>As you can see, virtually all browsers support Custom Properties&#8230; <strong>Except Explorer! What a surprise, I DIDN\u2019T SEE THAT COMING!<\/strong> It\u2019s a reminder of <em><strong>those glorious years<\/strong><\/em> when we had to jump through hoops to make things work in Explorer 6.<\/p>\n<p>Fortunately, unlike back then, now <strong>less than 4% of users are on Explorer<\/strong>. Not a big deal.<\/p>\n<p>Currently, <strong>70.9% of users have browsers that support Custom Properties<\/strong>. That\u2019s a huge number.<\/p>\n<p><a href=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/custom-properties-bs1-1.jpg\"><img decoding=\"async\" class=\"alignnone wp-image-659 size-full\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/custom-properties-bs1-1.jpg\" alt=\"propiedades personalizadas o custom properties\" width=\"999\" height=\"460\" \/><\/a><\/p>\n<p><a href=\"http:\/\/caniuse.com\/#feat=css-variables\" target=\"_blank\" rel=\"nofollow\">http:\/\/caniuse.com\/#feat=css-variables<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s now a reality. We can finally use Custom Properties or CSS Custom Properties! But first, let\u2019s start with a solid &lt;h2&gt;, followed by a brief &lt;p&gt; summary. CSS Custom Properties Or, how to work magic in your CSS stylesheet. CSS Custom Properties introduce a \u201cnew\u201d concept in CSS: the use of variables natively within [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4193,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[208,212],"class_list":["post-28900","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-disseny-desenvolupament-web","category-altres"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Propiedades personalizadas CSS o Custom Properties - Qu\u00e9 y c\u00f3mo<\/title>\n<meta name=\"description\" content=\"Qu\u00e9 son y como utilizar las propiedades personalizadas de CSS o Custom Properties. Con un soporte para el 70% de usuarios, usarlo ya es una realidad.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Propiedades personalizadas CSS o Custom Properties - Qu\u00e9 y c\u00f3mo\" \/>\n<meta property=\"og:description\" content=\"Qu\u00e9 son y como utilizar las propiedades personalizadas de CSS o Custom Properties. Con un soporte para el 70% de usuarios, usarlo ya es una realidad.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-20T09:36:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-21T00:53:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/propiedades-personalizadas-css-o-custom-properties-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"689\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"CSS Custom Properties or Variables\",\"datePublished\":\"2017-04-20T09:36:51+00:00\",\"dateModified\":\"2026-04-21T00:53:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/\"},\"wordCount\":430,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/propiedades-personalizadas-css-o-custom-properties-featured.jpg\",\"articleSection\":[\"Disseny i desenvolupament web\",\"Altres\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/\",\"name\":\"Propiedades personalizadas CSS o Custom Properties - Qu\u00e9 y c\u00f3mo\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/propiedades-personalizadas-css-o-custom-properties-featured.jpg\",\"datePublished\":\"2017-04-20T09:36:51+00:00\",\"dateModified\":\"2026-04-21T00:53:39+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Qu\u00e9 son y como utilizar las propiedades personalizadas de CSS o Custom Properties. Con un soporte para el 70% de usuarios, usarlo ya es una realidad.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/#primaryimage\",\"url\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/propiedades-personalizadas-css-o-custom-properties-featured.jpg\",\"contentUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/propiedades-personalizadas-css-o-custom-properties-featured.jpg\",\"width\":2560,\"height\":689},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\/\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Propiedades personalizadas CSS o Custom Properties - Qu\u00e9 y c\u00f3mo","description":"Qu\u00e9 son y como utilizar las propiedades personalizadas de CSS o Custom Properties. Con un soporte para el 70% de usuarios, usarlo ya es una realidad.","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:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/","og_locale":"en_US","og_type":"article","og_title":"Propiedades personalizadas CSS o Custom Properties - Qu\u00e9 y c\u00f3mo","og_description":"Qu\u00e9 son y como utilizar las propiedades personalizadas de CSS o Custom Properties. Con un soporte para el 70% de usuarios, usarlo ya es una realidad.","og_url":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/","og_site_name":"Code Barcelona","article_published_time":"2017-04-20T09:36:51+00:00","article_modified_time":"2026-04-21T00:53:39+00:00","og_image":[{"width":2560,"height":689,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/propiedades-personalizadas-css-o-custom-properties-featured.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"CSS Custom Properties or Variables","datePublished":"2017-04-20T09:36:51+00:00","dateModified":"2026-04-21T00:53:39+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/"},"wordCount":430,"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/propiedades-personalizadas-css-o-custom-properties-featured.jpg","articleSection":["Disseny i desenvolupament web","Altres"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/","url":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/","name":"Propiedades personalizadas CSS o Custom Properties - Qu\u00e9 y c\u00f3mo","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/propiedades-personalizadas-css-o-custom-properties-featured.jpg","datePublished":"2017-04-20T09:36:51+00:00","dateModified":"2026-04-21T00:53:39+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Qu\u00e9 son y como utilizar las propiedades personalizadas de CSS o Custom Properties. Con un soporte para el 70% de usuarios, usarlo ya es una realidad.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/css-custom-properties\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/propiedades-personalizadas-css-o-custom-properties-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/04\/propiedades-personalizadas-css-o-custom-properties-featured.jpg","width":2560,"height":689},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/en\/#website","url":"https:\/\/codewebbarcelona.com\/en\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/28900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=28900"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/28900\/revisions"}],"predecessor-version":[{"id":28905,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/28900\/revisions\/28905"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media\/4193"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=28900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=28900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}