Custom Properties CSS: Uma das características mais poderosas do CSS moderno são as propriedades personalizadas, também conhecidas como variáveis CSS.
Neste artigo, vamos explorar em detalhes como as propriedades personalizadas funcionam no CSS.
O Básico de Usar Variáveis
As variáveis CSS permitem que você defina valores que podem ser reutilizados em todo o seu arquivo CSS. Para definir uma variável, você usa duas hifens (–) seguidos pelo nome da variável e o valor que você deseja atribuir.
:root {
--cor-principal: #f0f0f0;
}Neste exemplo, estamos definindo uma variável chamada cor-principal com o valor #f0f0f0. Para usar a variável, você usa a função var().
body {
background-color: var(--cor-principal);
}Criar Variáveis Dentro de Qualquer Elemento
As variáveis CSS podem ser definidas dentro de qualquer seletor CSS. Isso significa que você pode definir variáveis que só estão disponíveis dentro de um determinado elemento.
#elemento {
--cor-de-fundo: #ffffff;
}Neste exemplo, a variável cor-de-fundo só está disponível dentro do elemento com o id elemento.
Escopo de Variáveis
O escopo de uma variável CSS é determinado pelo seletor onde ela é definida. Se uma variável é definida em um seletor de id, ela só está disponível dentro desse seletor. Se é definida no seletor :root, ela está disponível globalmente.
Lidando com Valores Inválidos
Se você tentar usar uma variável que não foi definida, o CSS irá ignorar a declaração. No entanto, você pode fornecer um valor de fallback usando a função var().
body {
background-color: var(--cor-de-fundo, #ffffff);
}Neste exemplo, se a variável cor-de-fundo não estiver definida, o CSS usará #ffffff como a cor de fundo.
Suporte do Navegador
A maioria dos navegadores modernos suporta variáveis CSS, incluindo Chrome, Firefox, Safari e Edge. No entanto, atente-se ao fato de que o Internet Explorer não suporta variáveis CSS.
Variáveis CSS São Case Sensitive
Os nomes das variáveis CSS são sensíveis a maiúsculas e minúsculas, ou seja, são case sensitive. Isso significa que --cor-principal e --Cor-Principal são consideradas duas variáveis diferentes.
Matemática em Variáveis CSS
Você pode usar a função calc() para realizar cálculos com variáveis CSS.
:root {
--margem-padrao: 16px;
}
.elemento {
margin: calc(var(--margem-padrao) * 2);
}Neste exemplo, a margem do elemento será o dobro do valor da variável margem-padrao.
Media Queries com Variáveis CSS
Você pode usar variáveis CSS em consultas de mídia para criar designs responsivos.
:root {
--ponto-de-quebra: 600px;
}
@media (max-width: var(--ponto-de-quebra)) {
body {
background-color: #ffffff;
}
}Neste exemplo, a cor de fundo do corpo mudará para #ffffff quando a largura da janela do navegador for menor que o valor da variável ponto-de-quebra.
Conclusão
Custom Properties CSS: As propriedades personalizadas, ou variáveis CSS, são uma ferramenta poderosa que permite aos desenvolvedores criar código CSS mais eficiente e manutenível.
Compreender e utilizar variáveis CSS pode melhorar significativamente a qualidade do seu código e a eficiência do seu processo de desenvolvimento. Lembre-se, a prática leva à perfeição. Portanto, não hesite em usar variáveis CSS em seus próprios projetos.
E para você validar seus códigos, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger!!!
