Usando propriedades personalizadas CSS para melhor UX
Publicados: 2019-11-29
Última atualização - 8 de julho de 2021
CSS3 trouxe consigo uma das maiores adições que a especificação CSS teve por um longo tempo. Gerou muito burburinho porque abordou um problema-chave que atormentou os desenvolvedores por anos e foi a principal causa das pessoas preferirem o uso de pré-processadores como SASS: a capacidade de usar variáveis.
Com a adição de variáveis CSS, muito do código que precisava ser escrito para dar suporte a recursos básicos, como temas, não é mais necessário. É um recurso útil que pode ser usado para evitar repetições e permitir ainda mais casos de uso, como tamanhos de fonte dinâmicos e simplicidade na adição de capacidade de resposta em um aplicativo da web.
Livrando-se da desordem com variáveis CSS
Um recurso comum da maioria dos aplicativos são as cores da marca que precisam permanecer as mesmas e consistentes em todo o aplicativo. Ninguém tem a intenção de armazenar dez valores hexadecimais diferentes em suas cabeças para referência futura, e ir e voltar entre arquivos para copiar valores não é apenas complicado, mas também prejudicial para a produtividade. Agora, imagine a quantidade de trabalho que precisa ser feito se essas cores precisarem mudar.
Usar pré-processadores CSS com o WordPress é a maneira mais comum de lidar com o problema. Eles oferecem suporte para uma série de recursos como mixins, declarações aninhadas e, claro, variáveis, que são um grande impulso para a produtividade.
Tudo o que você precisa fazer é escrever seu código uma vez e ele será compilado em CSS, que você pode acessar e alterar livremente, se desejar. No entanto, a incapacidade de encontrar e alterar esses valores em tempo de execução, para, digamos, adicionar um tema escuro ao seu aplicativo da Web, é sua maior desvantagem. É um grande problema não apenas porque o SASS não o suporta, mas provavelmente nunca o fará.
A adição de variáveis embutidas personalizadas para aberturas de CSS teve um grande efeito em como escrevemos aplicativos, especialmente no que diz respeito a temas e design responsivo.
Como é o suporte do navegador para variáveis CSS?
Esta é a pergunta mais comum que surge quando as variáveis CSS são trazidas para uma discussão. De acordo com Caniuse , o suporte do navegador para variáveis CSS é de 93,16%. É compatível com todos os navegadores modernos (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ e Edge 16+). Como sempre, o IE está ausente da feira e tem uma participação de mercado surpreendente de 6,47% . Para os desenvolvedores pobres que precisam suportar navegadores antigos, não se preocupe. Polyfills , ou mais corretamente, ponyfills, estão aqui para salvar o dia.
Uma introdução formal às variáveis CSS
Se você está familiarizado com variáveis CSS, você não deve ter nenhum problema com variáveis CSS.
As variáveis SASS são declaradas assim:
<pré>
$facebook-azul: #4267B2;
</pre>
Enquanto as variáveis CSS são declaradas de forma um pouco diferente:
<pré>
:raiz {
–cor da marca: #4267B2;
}
.brand-navbar {
fundo: var(- -cor da marca);
}
</pre>
Observe algumas diferenças entre as duas sintaxes:
- As variáveis CSS precisam ser precedidas por dois traços
- As variáveis CSS são normalmente declaradas dentro de ':root', mas podem ser redeclaradas a qualquer momento.
- As propriedades CSS são recuperadas usando a função 'var()'.
As variáveis CSS também oferecem acesso a vários recursos adicionais.
Valores em cascata
As propriedades CSS são cascateadas seguindo as regras normais de cascata. Em outras palavras, as redeclarações abaixo não afetam as acima.
<pré>
:raiz { –cor: amarelo; }
div { –cor: azul; }
#grande { –cor: verde; }
* { cor: var(–cor); }
<p>Vou ser amarelo, herdado da raiz!</p>
<div>Estou azul!</div>
<div id=”ótimo”>
Funcionou! eu sou verde!
<p>Eu também sou verde! Herdado de cima!</p>
</div>
</pre>
Valores substitutos
A função 'var()' aceita vários parâmetros. O segundo pode ser usado como um valor de fallback caso a propriedade CSS personalizada não esteja definida. Este é um recurso útil para qualquer pessoa que precise acessar as variáveis CSS via JavaScript.
Sua assinatura se parece com 'var(<custom-property-name> [, <declaration-value> ]?)' e pode ser usada da seguinte maneira
<pré>
.brand-navbar {
background: var(–brand-color, “#4267B2”);
}
</pre>
Se '–brand-color' não estiver definido, “#4267B2” será usado,
Acesso por JavaScript
Uma das melhores razões para usar variáveis CSS em um pré-processador é a capacidade de acessar variáveis personalizadas via JavaScript. As variáveis do pré-processador não residem no navegador. Eles são avaliados quando o código é compilado. Dessa forma, as variáveis do pré-processador não podem ser acessadas no navegador. Com variáveis CSS, a propriedade fica no navegador, concedendo a capacidade de editar valores em tempo real.
Considere um painel que permite ao usuário selecionar cores personalizadas por meio de um pop-up ou algo semelhante.
<pré>
.brand-navbar {
background: var(–brand-color, “#4267B2”);
}
//Para obter o valor atual
getComputedStyle(document.documentElement).getPropertyValue('–brand-color');
//Para definir o valor
document.documentElement.style.setProperty('–brand-color', 'red');
//Você pode até atribuir uma propriedade CSS a outra
document.documentElement.style.setProperty('–brand-color','var(–secondary-color)');
</pre>
Escopo global e local
Se você estiver familiarizado com JavaScript (ou qualquer linguagem de programação, na verdade), provavelmente entenderá o conceito de escopo. Normalmente, as variáveis podem ser definidas de forma que sejam acessíveis apenas a determinadas partes do código, chamadas de escopo local, ou disponibilizadas para uso em todo o aplicativo, chamadas de escopo global.
As variáveis CSS funcionam de forma semelhante. Algumas variáveis devem ter escopo global para referência mais fácil, por exemplo, cores da marca e espaçamento vertical. Eles geralmente permanecem os mesmos em todo o aplicativo e, em caso de alteração, devem ser refletidos em todos os lugares. Por outro lado, as variáveis que podem exigir escopo local incluem botões com diferentes variantes grandes e pequenas. Se você quiser alterar o preenchimento em um botão específico, não deseja que as alterações percorram todo o DOM. Ele precisa ser alterado em apenas um único ponto no aplicativo.
Por padrão, as propriedades CSS têm escopo local. E se você trabalhou com JavaScript ou qualquer outra linguagem de programação, o escopo tem seu próprio conjunto de problemas. Como eles podem ser herdados, eles também agem como variáveis locais, o que pode ter algumas repercussões interessantes se você não tomar cuidado com a forma como são usados. Como os valores são em cascata, você precisa estar atento a como alterá-los, especialmente quando se trata de JavaScript.
Usando propriedades personalizadas com consultas de mídia
Assim como com os pré-processadores, uma grande desvantagem do uso de propriedades CSS é que elas não podem ser usadas em consultas de mídia. Por exemplo, isso não vai funcionar.
<pré>
@media (min-width: var(–breakpoint)){
preenchimento: 1rem;
}
</pre>
O que você pode fazer é redefinir as propriedades personalizadas nas consultas de mídia. Se você precisar alterar o tamanho da fonte quando o navegador diminuir, você está com sorte. Com as variáveis CSS, você pode ouvir as alterações do navegador usando JavaScript e alterar os tamanhos que precisam ser reduzidos apenas uma vez.
Quais são algumas aplicações práticas de propriedades CSS personalizadas?
“Hoje, além de usar serviços de CDN para melhorar o desempenho do site , usar propriedades personalizadas de CSS é uma das maneiras mais rápidas de melhorar a produtividade”, aconselha Colby Stuart, um web designer de serviço de escrita de papel personalizado .
Além dos benefícios bem destacados, aumenta a produtividade, existem exemplos do mundo real de como eles podem ser usados em um aplicativo da web?
Adicionando o modo escuro
Uma nova tendência que conquistou o mercado consumidor é a demanda pelo modo escuro em todos os softwares modernos – isso inclui aplicativos da web. Pode ser um pouco mais complicado do que adicionar uma cor de fundo escura. Outras coisas que precisam ser consideradas incluem como as cores do texto serão alteradas e como as imagens com fundos brancos serão afetadas.
Tudo isso é possível declarando primeiro as variáveis em todo o seu aplicativo. Quando o usuário aciona a opção para escurecer o tema do site, acione uma função JavaScript que altera as variáveis CSS. Se o seu aplicativo da Web for mais complicado, isso também pode incluir a substituição das imagens atuais por outras compatíveis com o modo escuro.
Adicionando o modo escuro no WordPress
As variáveis CSS têm sido tão influentes que chegaram ao mundo do WordPress. Hoje, criar um modo escuro (ou, mais geralmente, um tema) um aplicativo WordPress é bastante trivial.
A maioria dos desenvolvedores do WordPress confia no Personalizador para alterar a aparência e a funcionalidade de seus sites. Ele fornece acesso a coisas como cores, fontes, imagens de fundo e assim por diante, acessando o CSS do seu site. O maior problema com isso é que alterar o CSS dessa maneira força o PHP a renderizar novamente seu HTML e, ao fazer isso, faz com que o servidor reenvie o arquivo inteiro para o navegador. Seu aplicativo faz uma solicitação desnecessária, consumindo mais dados do que o necessário.
“Se um aplicativo desse tipo fosse voltado para o consumidor, você provavelmente receberia muitas reclamações. Se você não tiver arquivos CSS dedicados para as variáveis que deseja alterar, as coisas ficam muito piores.” Helena Newman, desenvolvedora sênior da paperowl review e editora de serviços de redação de currículos, considera uma adição necessária à especificação CSS.
Usando variáveis CSS, todas as cores são alteradas no navegador usando JavaScript. A única solicitação que será feita é persistir o tema atual no servidor, se necessário. E mesmo assim, essa variável pode ser salva no navegador.
Adicionando design responsivo a um site
Com mais telefones celulares na internet do que nunca, a necessidade de sites responsivos nunca foi tão aparente. O aspecto mais crucial do design responsivo que surpreende os desenvolvedores é alterar os tamanhos das fontes. Para um aplicativo que usa várias fontes ou fontes dinâmicas, acompanhá-las e alterá-las para diferentes navegadores é uma tarefa árdua.
Em vez disso, as propriedades CSS personalizadas permitem que você defina um tamanho de fonte universal que pode ser usado e reutilizado em todo o site. Caso precise mudar, tudo que você precisa fazer é chamar uma função JavaScript e tudo funciona.
Se você não precisa oferecer suporte a navegadores antigos, variáveis CSS personalizadas podem ser usadas em conjunto com o (relativamente) novo sistema CSS de grade para eliminar completamente a necessidade de consultas de mídia.
Por outro lado, as consultas de mídia ainda podem ser necessárias se você precisar ouvir as alterações de largura no próprio CSS. Essa é a única maneira de oferecer suporte a navegadores que não permitem a execução de JavaScript.
Conclusão
Variáveis CSS personalizadas são algumas das adições mais significativas à especificação em um bom tempo. Eles podem simplificar seu processo de design removendo a desordem de seus arquivos CSS e eliminando a necessidade de fazer solicitações adicionais desnecessárias.