{"id":2759,"date":"2014-09-17T10:02:29","date_gmt":"2014-09-17T13:02:29","guid":{"rendered":"http:\/\/blog.dialhost.com.br\/?p=2759"},"modified":"2014-09-17T10:02:29","modified_gmt":"2014-09-17T13:02:29","slug":"trabalhando-com-propriedades-customizadas-e-variaveis-css","status":"publish","type":"post","link":"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/","title":{"rendered":"Trabalhando com propriedades customizadas e vari\u00e1veis no CSS"},"content":{"rendered":"
\"Web<\/a>
Imagem ilustrativa<\/figcaption><\/figure>\n

O M\u00f3dulo das CSS3, denominado CSS Custom Properties for Cascading Variables Module Level 1 (em tradu\u00e7\u00e3o livre: Propriedades customiz\u00e1veis para vari\u00e1veis CSS M\u00f3dulo 1), encontra-se no est\u00e1gio de \u00faltima chamada para Rascunho de Trabalho do W3C. Portanto, trata-se de uma especifica\u00e7\u00e3o em est\u00e1gio anterior ao de Rascunho de Trabalho e assim sendo, conv\u00e9m alertar que este artigo tem car\u00e1ter meramente informativo e ser\u00e1 atualizado quando julgado necess\u00e1rio. Consulte a especifica\u00e7\u00e3o no site do W3C para informa\u00e7\u00f5es atualizadas.<\/p>\n

Para futura refer\u00eancia, informo que este artigo foi baseado na vers\u00e3o de 06 de maio de 2014, vigente \u00e0 \u00e9poca em que o artigo foi escrito e publicado.<\/p>\n

A finalidade da especifica\u00e7\u00e3o \u00e9 a de apresentar um novo valor CSS primitivo, denominado vari\u00e1vel CSS aplic\u00e1vel a todas as propriedades CSS, bem como a customiza\u00e7\u00e3o de propriedades CSS destinadas a definir o valor das vari\u00e1veis.<\/p>\n

Propriedades CSS customizadas ou vari\u00e1veis CSS<\/strong><\/p>\n

A sintaxe da regra CSS \u00e9 conforme mostrada na figura a seguir:<\/p>\n

\"sintaxe\"<\/a><\/p>\n

Notar que a declara\u00e7\u00e3o CSS compreende uma propriedade e um valor. Propriedades CSS s\u00e3o as caracter\u00edsticas de um elemento da marca\u00e7\u00e3o que podem ser estilizadas, por exemplo: cor, borda, margem, posi\u00e7\u00e3o inicial da imagem de fundo etc, que s\u00e3o as nossas conhecidas propriedades color, border, margin, background-position etc.<\/p>\n

Valores CSS s\u00e3o grandezas ou aspectos que definem quantidades ou caracter\u00edsticas de uma propriedade, por exemplo: red, 2px solid blue, 2.5em, left top, etc.<\/p>\n

Observe a seguir alguns exemplos de declara\u00e7\u00e3o CSS.<\/p>\n

\n\n\n\n
1<\/code><\/td>\n{ <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>color<\/code>: <\/code>red<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>border<\/code>: <\/code>2px<\/code> solid<\/code> blue<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>margin<\/code>: <\/code>2.5em<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n\u00a0\u00a0\u00a0\u00a0<\/code>background-position<\/code>: <\/code>left<\/code> top<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

A sintaxe para se criar uma vari\u00e1vel CSS (as especifica\u00e7\u00f5es as denominam de propriedade CSS customizada) tem o formato geral \u2013*, onde o sinal asterisco (*) \u00e9 um nome de livre escolha do autor, ou seja, o nome da vari\u00e1vel, e no qual alguns caracteres n\u00e3o s\u00e3o permitidos, como por exemplo: ; # } ] ) etc.<\/p>\n

Observe a seguir alguns exemplos para defini\u00e7\u00e3o de valores de vari\u00e1veis CSS. Os valores v\u00e1lidos para as vari\u00e1veis CSS (ou propriedades CSS customizadas como s\u00e3o denominadas nas especifica\u00e7\u00f5es) s\u00e3o todos os valores CSS v\u00e1lidos.<\/p>\n

\n\n\n\n
1<\/code><\/td>\n{ <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\n\u00a0<\/code>--cor-um: <\/code>red<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n\u00a0<\/code>--bordaLegal: <\/code>2px<\/code> solid<\/code> blue<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\n\u00a0<\/code>--margemBlz: <\/code>2.5em<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n\u00a0<\/code>--POSICAOFUNDO: <\/code>left<\/code> top<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n\u00a0<\/code>--maujor: <\/code>uppercase<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
7<\/code><\/td>\n\u00a0<\/code>--maria: <\/code>bold<\/code>; <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
8<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

Uma propriedade CSS customizada nada mais \u00e9 do que uma vari\u00e1vel para ser usada como argumento de uma fun\u00e7\u00e3o CSS var() cujo valor de retorno \u00e9 o valor CSS da vari\u00e1vel. O exemplo a seguir esclarece a sintaxe para defini\u00e7\u00e3o de var\u00e1veis CSS e para o uso da func\u00e3o var().<\/p>\n

\n\n\n\n
1<\/code><\/td>\n:root { <\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\n\u00a0<\/code>--minha-cor-fundo: <\/code>black<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n\u00a0<\/code>--minha-cor: <\/code>red<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\n\u00a0<\/code>--minha-largura: <\/code>40%<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

No c\u00f3digo mostrado, definimos duas vari\u00e1veis CSS denominadas minha-cor-defundo, minha-cor e minha-largura cujos valores s\u00e3o black, red e 40% respectivamente.<\/p>\n

As vari\u00e1veis CSS se aplicam (ou surtem efeito) somente dentro do ESCOPO para o qual foram definidas. No caso do nosso exemplo, o escopo das duas vari\u00e1veis \u00e9 o elemento raiz do documento :root, ou seja as vari\u00e1veis s\u00e3o v\u00e1lidas para qualquer elemento da marca\u00e7\u00e3o constante da p\u00e1gina (ou documento).<\/p>\n

\u00c9 poss\u00edvel definir um container qualquer da p\u00e1gina como escopo para vari\u00e1veis. Por exemplo: o autor define vari\u00e1veis para serem usadas somente nos rodap\u00e9s da p\u00e1gina. Neste caso, o escopo ser\u00e1 o elemento footer.<\/p>\n

\n\n\n\n
1<\/code><\/td>\ndiv {<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
2<\/code><\/td>\n\u00a0<\/code>width<\/code>: var(--minha-largura);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
3<\/code><\/td>\n\u00a0<\/code>height<\/code>: <\/code>200px<\/code>;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
4<\/code><\/td>\n\u00a0<\/code>background-color<\/code>: var(--minha-cor-fundo);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
5<\/code><\/td>\n\u00a0<\/code>color<\/code>: var(--minha-cor);<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n\n\n\n
6<\/code><\/td>\n}<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

No c\u00f3digo mostrado, usamos as duas vari\u00e1veis CSS (o valor das vari\u00e1veis) para definir a largura e a cor de fundo e de frente de todos os elementos div da p\u00e1gina. Alterando o valor da vari\u00e1vel, altera-se a largura e a cor de fundo e de frente de todos os elementos div da p\u00e1gina.<\/p>\n

Exemplo interativo<\/strong><\/p>\n

O exemplo interativo para os c\u00f3digos mostrados anteriormente est\u00e1 hospedado no JSFiddle<\/a> e funciona em navegadores que suportam vari\u00e1veis CSS (at\u00e9 julho de 2014, somente o Firefox 31, lan\u00e7ado em 16\/07\/2014).<\/p>\n

Voc\u00ea identifica alguma semelhan\u00e7a com pr\u00e9-processadores CSS? S\u00f3 isso? N\u00e3ooooooo! A especifica\u00e7\u00e3o prev\u00ea outras funcionalidades mais complexas e flex\u00edveis do que simplesmente definir o valor das vari\u00e1veis, como por exemplo realizar c\u00e1lculos, manipular, definir valores fallback para vari\u00e1vies CSS etc.<\/p>\n

Nesse primeiro momento n\u00e3o vou mostrar todas as funcionalidades constantes das especifica\u00e7\u00f5es, j\u00e1 que o objetivo deste artigo \u00e9 o de informar aos meus leitores da exist\u00eancia das vari\u00e1veis CSS.<\/p>\n

Nota: N\u00e3o me senti confort\u00e1vel com o fato de a especifica\u00e7\u00e3o ter usado o termo propriedade CSS customizada para se referir \u00e0s vari\u00e1veis CSS, pois estas s\u00e3o valores CSS e n\u00e3o propriedades CSS. Ou, existe uma raz\u00e3o que eu n\u00e3o percebi e estou equivocado?<\/p>\n

———<\/p>\n

Texto de Maur\u00edcio Maujor, publicado originalmente no iMasters<\/a>.\t\t\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"

\t\t\t\tA finalidade da especifica\u00e7\u00e3o \u00e9 a de apresentar um novo valor CSS primitivo, denominado vari\u00e1vel CSS aplic\u00e1vel a todas as propriedades CSS, bem como a customiza\u00e7\u00e3o de propriedades CSS destinadas a definir o valor das vari\u00e1veis.\t\t\t\t<\/p>\n","protected":false},"author":1,"featured_media":2821,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,21],"tags":[67,99,103,158,218],"yoast_head":"\nTrabalhando com propriedades customizadas e vari\u00e1veis no CSS - Blog DialHost<\/title>\n<meta name=\"description\" content=\"A finalidade da especifica\u00e7\u00e3o \u00e9 a de apresentar um novo valor CSS primitivo, denominado vari\u00e1vel CSS aplic\u00e1vel a todas as propriedades CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trabalhando com propriedades customizadas e vari\u00e1veis no CSS - Blog DialHost\" \/>\n<meta property=\"og:description\" content=\"A finalidade da especifica\u00e7\u00e3o \u00e9 a de apresentar um novo valor CSS primitivo, denominado vari\u00e1vel CSS aplic\u00e1vel a todas as propriedades CSS.\" \/>\n<meta property=\"og:url\" content=\"\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog DialHost\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/DialHost\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/DialHost\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-17T13:02:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dialhost.com.br\/blog\/wp-content\/uploads\/2019\/04\/og-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dialhost\" \/>\n<meta name=\"twitter:site\" content=\"@dialhost\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\",\"name\":\"DialHost Internet\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/\",\"sameAs\":[\"http:\/\/www.facebook.com\/DialHost\",\"https:\/\/www.instagram.com\/dialhost_oficial\/\",\"https:\/\/www.linkedin.com\/company\/dialhost-internet\",\"https:\/\/www.youtube.com\/channel\/UCAiqiX8IiqTSfA8wQhpzgXQ\",\"https:\/\/twitter.com\/dialhost\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#logo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/wp-content\/uploads\/2019\/03\/marca-dialhost.png\",\"width\":81,\"height\":81,\"caption\":\"DialHost Internet\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/\",\"name\":\"Blog DialHost\",\"description\":\"Os melhores conte\\u00fados sobre Desenvolvimento Web, Marketing e Neg\\u00f3cios\",\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.dialhost.com.br\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/#primaryimage\",\"inLanguage\":\"pt-BR\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/#webpage\",\"url\":\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/\",\"name\":\"Trabalhando com propriedades customizadas e vari\\u00e1veis no CSS - Blog DialHost\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/#primaryimage\"},\"datePublished\":\"2014-09-17T13:02:29+00:00\",\"dateModified\":\"2014-09-17T13:02:29+00:00\",\"description\":\"A finalidade da especifica\\u00e7\\u00e3o \\u00e9 a de apresentar um novo valor CSS primitivo, denominado vari\\u00e1vel CSS aplic\\u00e1vel a todas as propriedades CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"\/blog\/\",\"url\":\"\/blog\/\",\"name\":\"In\\u00edcio\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/\",\"url\":\"\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/\",\"name\":\"Trabalhando com propriedades customizadas e vari\\u00e1veis no CSS\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\"},\"headline\":\"Trabalhando com propriedades customizadas e vari\\u00e1veis no CSS\",\"datePublished\":\"2014-09-17T13:02:29+00:00\",\"dateModified\":\"2014-09-17T13:02:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/trabalhando-com-propriedades-customizadas-e-variaveis-css\/#primaryimage\"},\"keywords\":\"css,feed de parceiros,frontend,noticias,webdesign\",\"articleSection\":\"Dicas e Not\\u00edcias,JavaScript, CSS e HTML\",\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#\/schema\/person\/a0b10cbe35449dea173a06d4664f9fcc\",\"name\":\"DialHost Internet\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.dialhost.com.br\/blog\/#personlogo\",\"inLanguage\":\"pt-BR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/05feec2f99aef1c42b09aeaa637ee66f?s=96&r=g\",\"caption\":\"DialHost Internet\"},\"description\":\"H\\u00e1 mais de 18 anos proporcionando um servi\\u00e7o de hospedagem de sites voltado 100% na Experi\\u00eancia e Sucesso do Cliente, prezando a qualidade, transpar\\u00eancia e seguran\\u00e7a.\",\"sameAs\":[\"https:\/\/www.facebook.com\/DialHost\",\"https:\/\/www.instagram.com\/dialhost_oficial\/\",\"https:\/\/www.linkedin.com\/company\/dialhost-internet\",\"https:\/\/twitter.com\/dialhost\",\"https:\/\/www.youtube.com\/channel\/UCAiqiX8IiqTSfA8wQhpzgXQ\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2759"}],"collection":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=2759"}],"version-history":[{"count":0,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/posts\/2759\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media\/2821"}],"wp:attachment":[{"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=2759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=2759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dialhost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=2759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}