{"id":18345,"date":"2024-05-09T11:29:00","date_gmt":"2024-05-09T14:29:00","guid":{"rendered":"https:\/\/king.host\/blog\/?p=18345"},"modified":"2024-09-12T22:10:24","modified_gmt":"2024-09-13T01:10:24","slug":"css-variables","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tecnologia\/css-variables\/","title":{"rendered":"Utilizando CSS Variables (Custom Properties)"},"content":{"rendered":"<p><em>Entenda o conceito de CSS Variables e seus recursos avan\u00e7ados.<\/em><br \/>\nAs CSS Variables, tamb\u00e9m conhecidas como propriedades customizadas ou, em ingl\u00eas, Custom Properties, s\u00e3o uma poderosa ferramenta no CSS que permite uma maior flexibilidade e reutiliza\u00e7\u00e3o de c\u00f3digo.<br \/>\nIsso faz com que elas sejam essenciais para manter estilos din\u00e2micos e facilitar a manuten\u00e7\u00e3o de grandes projetos de web design.<br \/>\nQuer saber mais sobre o assunto? Continue a leitura e confira:<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\">o que s\u00e3o CSS Variables;<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">qual \u00e9 a configura\u00e7\u00e3o b\u00e1sica dos CSS Variables;<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">como usar CSS Variables na pr\u00e1tica;<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">como utilizar os recursos avan\u00e7ados do CSS Variables;<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">por que usar CSS Variables;<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">suporte oferecido aos CSS Variables.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/king.host\/?utm_source=lab&amp;utm_medium=banner-artigo&amp;utm_campaign=banner-artigo-awareness-css-variables\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-39602 size-full\" src=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2023\/06\/banner_1.png\" alt=\"banner-kinghost\" width=\"798\" height=\"250\" title=\"\" srcset=\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2023\/06\/banner_1.png 798w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2023\/06\/banner_1-300x94.png 300w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2023\/06\/banner_1-780x244.png 780w, https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2023\/06\/banner_1-768x241.png 768w\" sizes=\"(max-width: 798px) 100vw, 798px\" \/><\/a><\/p>\n<h2><b>O que s\u00e3o CSS Variables?<\/b><\/h2>\n<p>Se voc\u00ea j\u00e1 trabalhou com alguma <a href=\"https:\/\/king.host\/blog\/tecnologia\/melhores-linguagens-de-programacao\/\">linguagem de programa\u00e7\u00e3o<\/a>, sabe que as vari\u00e1veis permitem definir valores que podem ser reutilizados e modificados em tempo de execu\u00e7\u00e3o. Por outro lado, se tamb\u00e9m j\u00e1 usou pr\u00e9-processadores de CSS (LESS, SASS ou similares), sabe como utilizar as vari\u00e1veis pode ser divertido e proveitoso!<br \/>\nIsso acontece porque elas permitem que voc\u00ea defina um valor simb\u00f3lico que pode ser recuperado e utilizado em qualquer regra de estilo. Mas voc\u00ea sabe o que s\u00e3o as CSS Variables?<br \/>\nTamb\u00e9m chamadas de Custom Properties, elas representam valores simb\u00f3licos que podem ser definidos dentro do CSS e reutilizados em uma p\u00e1gina web. No entanto, diferentemente do LESS\/SASS, elas podem ser modificadas em tempo de execu\u00e7\u00e3o (com a p\u00e1gina j\u00e1 sendo exibida), e qualquer mudan\u00e7a efetuada pode ser observada imediatamente.<\/p>\n<h2><b>Qual \u00e9 a configura\u00e7\u00e3o b\u00e1sica das CSS Variables?<\/b><\/h2>\n<p>CSS Variables s\u00e3o definidas por um nome que come\u00e7a com dois tra\u00e7os (por exemplo, &#8211;blah: &#8220;blah&#8221;) e podem ser aplicadas em qualquer lugar onde se utilizaria um valor CSS. Elas s\u00e3o acessadas atrav\u00e9s da fun\u00e7\u00e3o:<br \/>\nvar()<br \/>\nSendo assim, o objetivo do CSS Variable \u00e9 facilitar a vida do desenvolvedor, diminuindo a repeti\u00e7\u00e3o de c\u00f3digo. Elas tamb\u00e9m podem ser manipuladas por <a href=\"https:\/\/king.host\/blog\/tecnologia\/javascript-para-iniciantes\/\">JavaScript<\/a> ou pela importa\u00e7\u00e3o de outra folha de estilos, o que permite oferecer temas personalizados.<\/p>\n<h2><b>Como usar CSS Variables na pr\u00e1tica?<\/b><\/h2>\n<p>Como vimos anteriormente, a declara\u00e7\u00e3o de propriedades customizadas em CSS deve ser iniciada com dois h\u00edfens (&#8211;). \u00c9 importante notar que essa declara\u00e7\u00e3o \u00e9 sens\u00edvel a mai\u00fasculas e min\u00fasculas, ou seja, &#8211;cor \u00e9 diferente de &#8211;COR.<br \/>\nVamos ter como exemplo:<br \/>\n\/* declarando uma vari\u00e1vel *\/<br \/>\n:root {<br \/>\n&#8211;corzinha-bacana: #39F;<br \/>\n}<br \/>\n\/* utilizando a vari\u00e1vel para definir a cor de um elemento *\/<br \/>\n.meu-elemento-loko {<br \/>\ncolor: var(&#8211;corzinha-bacana);<br \/>\n}<br \/>\nNo exemplo acima, :root \u00e9 um seletor CSS que acessa o elemento raiz do documento, ou seja, que define o escopo global da vari\u00e1vel, tornando-a acess\u00edvel em todo o documento HTML. \u00c9 como usar o seletor HTML, mas \u00e9 mais espec\u00edfico, ou mais dif\u00edcil de ser sobrescrito.<\/p>\n<h2><b>Como utilizar os recursos avan\u00e7ados do CSS Variables?<\/b><\/h2>\n<p>Quer saber como utilizar os recursos avan\u00e7ados das CSS Variables? \u00c9 poss\u00edvel definir um valor de fallback (valor de seguran\u00e7a) para as vari\u00e1veis, ideal para situa\u00e7\u00f5es em que elas n\u00e3o s\u00e3o definidas ou t\u00eam valores inv\u00e1lidos.<br \/>\nAcompanhe o exemplo:<br \/>\n.elemento {<br \/>\nwidth: var(&#8211;largura-maxima, 100px);<br \/>\n}<br \/>\nNeste caso, se &#8211;largura-maxima n\u00e3o existir ou contiver um valor inv\u00e1lido, o elemento assumir\u00e1 100px de largura. Isso \u00e9 poss\u00edvel porque as CSS Variables s\u00e3o din\u00e2micas e se integram ao modelo cascata do CSS, permitindo defini\u00e7\u00f5es em diferentes n\u00edveis de escopo.<br \/>\nElas tamb\u00e9m podem ser manipuladas via JavaScript para leitura e modifica\u00e7\u00e3o, proporcionando grande flexibilidade. Confira um exemplo do seu uso em cascata:<br \/>\n\/* definindo (padrao) *\/<br \/>\n:root { &#8211;color: red; }<br \/>\n\/* definindo (apenas em uma classe) *\/<br \/>\n.opaa { &#8211;color: green; }<br \/>\n\/* definindo (apenas um elemento especifico) *\/<br \/>\n#opaa { &#8211;color: blue; }<br \/>\n\/* aplicando para todo mundo *\/<br \/>\n* { color: var(&#8211;color); }<br \/>\n&lt;p&gt;Eu sou vermelho (herdei do &lt;code&gt;:root&lt;\/code&gt;)&lt;\/p&gt;<br \/>\n&lt;p&gt;Eu sou verde&lt;\/p&gt;<br \/>\n&lt;p id=&#8221;opaa&#8221;&gt;<br \/>\nEu sou azul<br \/>\n(&lt;span&gt;E eu sou azul tb (j\u00e1 que meu _parent_ \u00e9 azul)&lt;\/span&gt;)<br \/>\n&lt;\/p&gt;<br \/>\nAl\u00e9m disso, as vari\u00e1veis podem ser acessadas atrav\u00e9s de JavaScript e modificadas de acordo com as suas necessidades. Confira um exemplo de como manipular o valor de uma propriedade:<br \/>\nvar elem = document.getElementById(&#8216;meuElemento&#8217;);<br \/>\n\/\/ para ler uma vari\u00e1vel<br \/>\nvar v1 = elem.style.getPropertyValue(&#8220;&#8211;variavel-loka&#8221;);<br \/>\n\/\/ e para modificar o valor de uma vari\u00e1vel<br \/>\nelem.style.setProperty(&#8220;&#8211;variavel-loka&#8221;, v1);<br \/>\nO valor de uma propriedade pode ser utilizado dentro de outra propriedade, por meio do comando var(). Dessa forma:<br \/>\nelem.style.setProperty(&#8220;&#8211;color&#8221;, &#8220;var(&#8211;outra-propriedade)&#8221;);<\/p>\n<h2><b>Por que usar CSS Variables?<\/b><\/h2>\n<p>Usar CSS Variables oferece v\u00e1rias vantagens significativas para o <a href=\"https:\/\/king.host\/blog\/tecnologia\/desenvolvimento-web-baseado-em-componentes\/\">desenvolvimento web<\/a>. A primeira delas \u00e9 que simplifica o gerenciamento de estilos, permitindo que voc\u00ea altere valores em um \u00fanico lugar. Isso afeta de uma vez s\u00f3 todas as propriedades que usam essa vari\u00e1vel.<br \/>\nOs Custom Properties tamb\u00e9m conferem mais flexibilidade ao permitir ajustes din\u00e2micos de temas e estilos diretamente via CSS ou JavaScript, o que \u00e9 ideal para respostas r\u00e1pidas a intera\u00e7\u00f5es do usu\u00e1rio ou mudan\u00e7as de tema.<br \/>\nAl\u00e9m disso, o uso de CSS Variables melhora a manuten\u00e7\u00e3o do c\u00f3digo, tornando-o mais limpo e f\u00e1cil de entender. Tudo isso sem prejudicar a performance, j\u00e1 que o navegador lida bem com essa abordagem moderna.<\/p>\n<h2><b>E o suporte oferecido a CSS Variables?<\/b><\/h2>\n<p>A maioria dos navegadores modernos suporta as Custom Properties, ou Propriedades CSS Customizadas, com exce\u00e7\u00e3o do IE11 e Opera Mini. Antigas vers\u00f5es do MS Edge apresentavam problemas, mas esses j\u00e1 foram resolvidos.<br \/>\nSe voc\u00ea tiver interesse em aprender mais sobre CSS Variables, pode consultar a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/--*\" target=\"_blank\" rel=\"noopener\">Mozilla Developer Network<\/a>. Eles oferecem diversos conte\u00fados educacionais em ingl\u00eas.<br \/>\n<b><i>Leia tamb\u00e9m: <\/i><\/b><a href=\"https:\/\/king.host\/blog\/tecnologia\/o-que-e-pwa\/\"><b><i>PWA \u2014 O Que S\u00e3o E Como Revolucionam A Experi\u00eancia Do Usu\u00e1rio<\/i><\/b><\/a><br \/>\nAgora voc\u00ea j\u00e1 sabe que as CSS Variables revolucionam a forma como gerenciamos estilos em CSS, trazendo flexibilidade, escalabilidade e efici\u00eancia. Essa \u00e9 uma oportunidade de experiment\u00e1-las em seus projetos para ver como podem simplificar seu trabalho e elevar a qualidade de seus designs.<br \/>\nAproveite para aprofundar seus conhecimentos e <a href=\"https:\/\/king.host\/blog\/tecnologia\/css-modules-usando-css-de-maneira-eficaz-em-escala\/\">confira como usar CSS Modules em escala<\/a>, e o melhor: de maneira eficaz!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>J\u00e1 ouviu falar em CSS Variables? Leia o artigo para saber mais sobre o assunto e descobrir como declarar, modificar e aplicar propriedades customizadas de maneira eficiente.<\/p>\n","protected":false},"author":319,"featured_media":38209,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1179,8],"tags":[1368],"class_list":["post-18345","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-tecnologia","tag-css"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/18345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/319"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=18345"}],"version-history":[{"count":11,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/18345\/revisions"}],"predecessor-version":[{"id":39664,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/18345\/revisions\/39664"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/38209"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=18345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=18345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=18345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}