Stas Melnikov, o autor do curso HTML HTML Layout, falou sobre as nuances que podem complicar o trabalho com propriedades CSS personalizadas.Regras de sintaxe de nome de propriedade personalizada
Estamos acostumados ao fato de que as propriedades CSS embutidas não diferenciam maiúsculas de minúsculas. Portanto, os seguintes métodos de declarar uma propriedade de
border fornecerão o mesmo resultado:
button { BORDER: 2px solid
As propriedades personalizadas, por outro lado, diferenciam maiúsculas de minúsculas; portanto, o exemplo a seguir cria duas propriedades personalizadas diferentes:
button { --NETOLOGY-BRAND-COLOR:
Agora, o quadro tornou-se # 800080 (roxo) e o texto tornou-se # 27ae60 (verde).
Valores válidos para propriedades personalizadas
Para uma propriedade CSS regular, você pode definir apenas os valores permitidos pelo padrão. De acordo com o padrão de propriedade customizada, qualquer valor CSS válido existente pode ser usado como um valor. Por exemplo, como todas as seguintes propriedades customizadas:
.element::before { --color: rgba(0, 0, 0, 1); --hex:
Por exemplo, vamos definir o quadro com a cor # 800080 para o botão:
button { --netologyBrandColor:
Além dos valores padrão, você pode definir uma propriedade customizada como um valor para outro.
button { --netologyBrandColor:
O resultado não é diferente do anterior e o botão ainda possui um quadro com a cor # 800080.
Se a propriedade personalizada
--netologyBrandColor tiver um valor incorreto para a propriedade
border-color , por exemplo 18px, o quadro ficará preto.
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); }
O fato é que, antes que o navegador aplique o valor da propriedade do usuário para a propriedade interna, ele verificará se está correto. Se o valor estiver disponível para a propriedade embutida, o navegador o aplicará. Caso contrário, ele definirá o valor padrão para a propriedade interna.
No nosso caso, 18px é um valor incorreto para a propriedade de
border-color interna e, portanto, o navegador definirá o valor padrão, ou seja,
currentColor . Isso é muito fácil de verificar, definindo a propriedade de
color como # 800080:
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); color:
Como você pode ver, o navegador aplicou o valor # 800080 para o quadro. Neste exemplo, usei a sintaxe completa para definir o quadro. Mas podemos usar uma pequena, a propriedade da
border .
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border: 2px solid var(--buttonBorderColor); color:
Aqui estamos esperando por outra nuance. Há uma seção separada no padrão que descreve o comportamento das propriedades customizadas em tal situação. Segundo ele, se uma propriedade do usuário tem um valor incorreto para uma propriedade embutida, essa propriedade é inválida, portanto o navegador ignorará a propriedade embutida.
Em nosso exemplo, a propriedade de
border interna possui um dos valores configurados para a propriedade personalizada
--buttonBorderColor com um valor inválido de 18px. De acordo com o algoritmo descrito, o navegador simplesmente ignorou a propriedade
border , de modo que o elemento perdeu a borda.
O valor padrão para propriedades customizadas
Quando analisamos o exemplo da função
var , usamos apenas um parâmetro - o nome da propriedade customizada.
button { --netologyBrandColor:
Mas além disso, a função
var pode aceitar o segundo - o valor padrão. Para declarar um valor padrão, é necessário colocar uma vírgula após o nome da propriedade customizada e escrever o próprio valor.
Quando o navegador percebe que o desenvolvedor não declarou um valor para a propriedade customizada, ele usa o valor padrão. Por exemplo, o valor # 800080 (roxo) para uma propriedade personalizada é
--netologyBrandColor .
button { border: 2px solid var(--netologyBrandColor,
Vemos o quadro e o texto ficarem roxos. Mas se você mover o botão, eles ficarão verdes. Isso indica que o navegador aplicou o valor # 27ae60 à propriedade do usuário, substituindo o valor padrão.
Mas essas não são todas as possibilidades da função
var . No exemplo anterior, a propriedade customizada
--netologyBrandColor usada duas vezes, respectivamente, portanto, defino o valor padrão duas vezes.
Mas isso pode ser feito de maneira diferente. A função
var permite passar outra função
var , para que você possa definir outra propriedade customizada como o valor padrão. Reescreverei o exemplo anterior usando a propriedade customizada
--defaultButtonColor :
button { --defaultButtonColor:
Externamente, o resultado não será alterado. Mas agora para alterar o valor padrão, você precisa fazer isso apenas em um lugar, e não em vários, como antes.
Herança de propriedades customizadas
O CSS possui um mecanismo de herança que permite que os elementos herdem propriedades dos elementos pai. Nesse sentido, as propriedades customizadas não são diferentes delas. Por exemplo, escreverei o código no qual a propriedade customizada
--netologyBrandColor herdada do elemento do
body pai.
body { --netologyBrandColor:
Observando o inspetor, você pode observar a inscrição "Herdado do corpo", que mostra que a propriedade personalizada foi obtida do elemento do
body . Mas se adicionarmos a propriedade customizada
--netologyBrandColor ao elemento
button , ela já substituirá a propriedade do elemento
body .
body { --netologyBrandColor:
O inspetor mostra que a propriedade customizada
--netologyBrandColor elemento
button substitui a propriedade
--netologyBrandColor , especificada para o elemento
body .
Valores globais
No padrão CSS, as Propriedades personalizadas introduziram uma pseudo-
root especial que permite especificar propriedades personalizadas que se aplicam ao elemento raiz do documento. Por exemplo, em um documento HTML para um elemento
html .
:root { --netologyBrandColor:
No inspetor, podemos ver que a propriedade customizada declarada é aplicada ao elemento html. Mas, além do documento HTML, a pseudo-
root funciona em documentos SVG. Por exemplo, declararei propriedades personalizadas na tag
style .
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 28" width="50" height="50"> <style> :root{ --iconColor:
E aqui vemos que a pseudo
root raiz foi adicionada ao elemento raiz SVG. Portanto, isso prova que a pseudo classe raiz se aplica não apenas à tag
html , mas a qualquer elemento raiz.
Conclusão
Neste artigo, nos deparamos com armadilhas de propriedades personalizadas que podem ser confusas. E, portanto, podemos começar a usá-los. Portanto, no próximo artigo, falarei sobre truques práticos que utilizo em meus projetos.
Dos editores
Cursos de netologia sobre o tema: