Olá Habr! Apresento a você a tradução do artigo
"Minhas 5 principais razões pelas quais eu gosto de propriedades personalizadas de CSS" por Stas Melnikov
A especificação da propriedade customizada do CSS mudou para sempre minha visão do desenvolvimento da web. É por isso que quero escrever por que gosto de propriedades CSS personalizadas.
O que são propriedades CSS personalizadas?
Em resumo, as propriedades personalizadas do CSS são propriedades criadas pelo desenvolvedor. O navegador não sabe nada sobre eles até que o desenvolvedor os determine.
A declaração de qualquer propriedade customizada começa com dois traços, após o qual você deve adicionar o nome da propriedade. Então você adiciona cor e define o valor da propriedade.
Por exemplo, eu criei a propriedade melnik909BrandColor, com um valor
roxo para o elemento
button :
button { --melnik909BrandColor: purple; }
Função Var
O primeiro recurso das propriedades CSS personalizadas é a função
var . Com essa função, posso dizer ao navegador para pegar o valor da propriedade customizada e adicioná-lo a qualquer propriedade CSS.
Para fazer isso, devo definir a propriedade CSS e adicionar o valor dessa propriedade. No mesmo local, defina a função
var com uma propriedade customizada como argumento.
Por exemplo, adicionei a propriedade --melnik909BrandColor para as propriedades de borda e cor.
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); }
Propriedades personalizadas podem ser alteradas diretamente no navegador
Um leitor experiente que conhece ferramentas como Sass ou LESS pode dizer:
“Stas, por que devo estudar propriedades personalizadas de CSS? Conheço as variáveis Sass e isso é suficiente para mim .
"Atenção! As variáveis Sass e LESS ajudam a organizar o CSS para que seja mais fácil para os desenvolvedores manterem o código. Por exemplo, criei uma variável $ melnik909BrandColor na qual salvei a cor:
$melnik909BrandColor: purple; button { color: $melnik909BrandColor; border: 2px solid $melnik909BrandColor; }
Após a compilação, vou ver o seguinte código no navegador:
button { color: purple; border: 2px solid purple; }
Este exemplo mostra que as variáveis Sass e LESS não estão no navegador.
O segundo recurso das propriedades CSS personalizadas é que elas estão no navegador. Dessa forma, eu posso mudar os valores ali. Por exemplo, eu posso alterar o valor da propriedade —melnik909BrandColor para o estado de seleção do elemento
button :
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); } button:hover { --melnik909BrandColor: #27ae60; }
Você pode usar propriedades CSS personalizadas e consultas de mídia juntas
O terceiro recurso das propriedades CSS personalizadas é que seus valores podem ser alterados usando consultas de mídia. Por exemplo, defino a propriedade melnik909BrandColor para alterar a cor do texto do elemento
body em diferentes dispositivos.
body { color: var(--melnik909BrandColor); } @media (max-width: 768px) { body { --melnik909BrandColor: purple; } } @media (min-width: 769px) { body { --melnik909BrandColor: tomato; } }
Função Calc e propriedades customizadas de CSS
Há momentos em que precisamos usar a função
calc . Por exemplo, eu gosto de usar esta função quando preciso contar o número de elementos em uma linha:
.child { width: calc(100% / 4); } .child { width: calc(100% / 3); }
No entanto, esse código é difícil de reutilizar, e aqui as propriedades CSS personalizadas nos ajudarão. Podemos criar uma variável que lerá o número de elementos. Por exemplo, adicionarei a propriedade –-itemsNumber ao exemplo anterior:
.child { width: calc(100% / var(--itemsNumber)); }
E vou definir os valores no elemento
pai :
.parent { --itemsNumber: 5; } .parent { --itemsNumber: 7; }
Personalização de gráficos vetoriais
Existem 2 maneiras de personalizar gráficos vetoriais usando propriedades CSS personalizadas.
No primeiro método, definimos os atributos
preenchimento, traçado e largura do traçado e adicionamos propriedades CSS personalizadas a eles como seus valores.
Além disso, podemos adicionar valores de atributo definindo os valores das propriedades personalizadas:
<svg class="svg-with-attr" viewBox="0 0 55.867 55.867"> <path stroke="var(--iconStroke)" stroke-width="var(--iconStrokeWidth)" fill="var(--iconFill)" d="..."> </svg>
Agora podemos adicionar valores de atributo definindo o valor das propriedades customizadas:
.svg-with-attr { --iconFill: #eeeeee; --iconStroke: #000000; --iconStrokeWidth: 1px; }
À esquerda está o ícone padrão sem estilos e à direita está o ícone com estilos.
No segundo método, definimos propriedades CSS personalizadas para propriedades de
traço, largura de traço e preenchimento usando regras CSS.
body { --iconFill: #ffcc00; --iconStroke: #000000; --iconStrokeWidth: 2px; } .svg-with-props { stroke: var(--iconStroke); stroke-width: var(--iconStrokeWidth); fill: var(--iconFill); }