CSS e JavaScript funcionam bem juntos, cada um com seus próprios pontos fortes, mas estou confiante de que quanto mais CSS for usado para controlar a aparência das interfaces, mais resilientes e confiáveis os aplicativos da web serão. O ponto é o seguinte:
- CSS, por sua própria natureza, é uma tecnologia resistente a falhas. Isso significa que quando um analisador CSS encontra uma propriedade que não entende, ele simplesmente a ignora e segue em frente. Em outras palavras, usando CSS, o programador aplica estilos e espera que funcionem.
- JavaScript não é uma tecnologia tolerante a falhas. Um único erro de sintaxe no código JS pode interromper todo o aplicativo. Ou seja, ao gerenciar o estilo de sites usando JS, é absolutamente necessário verificar a funcionalidade das estruturas correspondentes.
Há muitas outras considerações a serem consideradas ao responder à pergunta de quando usar CSS em vez de JS .
CSS nos dá novas maneiras de projetar soluções fantásticas que são muito mais fáceis do que as soluções JS correspondentes e mais fáceis de criar. Isso se refere a muitos dos recursos do CSS: transições, propriedades personalizadas, animações, filtros, matemática.
Neste post, irei cobrir alguns dos recursos legais do CSS (alguns dos quais são muito recentes) que você pode não conhecer ainda. A saber, falaremos sobre rolagem suave, sobre uma propriedade
position: stickye sobre outras possibilidades, para a implementação da qual era necessário escrever muitas linhas de código JS engenhoso.
1. Rolagem suave
No passado, equipar uma página com rolagem suave exigia várias linhas de código JS. E agora essa tarefa pode ser resolvida exclusivamente por meio de CSS. Bem, não é maravilhoso? Agora você pode tirar vantagem da rolagem suave usando a propriedade CSS
scroll-behavior.
Isto é o que parece:
html {
scroll-behavior: smooth;
}
Implementando a rolagem suave
→ Aqui está um exemplo em CodePen
No momento em que estelivro foiescrito, esta propriedade
scroll-behaviorsó era compatível com o Chrome e Firefox. Ainda não é compatível com Edge, IE e Safari (desktop e móvel). Detalhes sobre o suporte para esta propriedade podem ser encontrados em Posso usar .
2. Elementos de fixação
Fixar elementos é um dos meus recursos CSS favoritos. O ponto é que os elementos correspondentes não desaparecem da janela de visualização ao rolar pelas páginas. Agora, para corrigir os elementos da página, não é necessário recorrer a
offsetToe window.scrollYem JS. Hoje em dia, você pode simplesmente aproveitar as vantagens da propriedade CSS position: sticky:
header {
position: sticky;
top: 0;
}
O bloco de navegação "repousa" na borda superior da janela de visualização e não desaparece ao rolar a página
→ Aqui está um projeto CodePen que mostra um exemplo de uso da propriedade.
position: sticky
Para usar esta propriedade corretamente, você precisa levar em consideração as peculiaridades de seu efeito nos elementos. Quando aplicada, a estrutura da página HTML desempenha um papel. Aliás, é justamente pelo fato de que essas características não são levadas em consideração, e a razão é que essa propriedade às vezes não funciona.
Vamos dar uma olhada no seguinte código HTML:
<main class="container">
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="main-content">Main Content</div>
<footer class="footer">Footer</footer>
</main>
O menu (o item
navdeste exemplo) só pode ser fixado na área que é sobreposta por seu item pai ( mainem nosso exemplo). Como resultado, ao usar uma propriedade position: sticky, duas classes principais de elementos podem ser distinguidas:
- Elemento encaixável: este é o elemento ao qual aplicamos a propriedade
position: sticky(navno nosso caso). Este elemento se moverá dentro do elemento pai até atingir a posição fornecida. Por exemplo - pode sertop: 0px. - Recipiente de elemento encaixável: este é o elemento HTML que contém o elemento encaixável. Esta é a área dentro da qual o item encaixado pode se mover. Este "contêiner" define os limites dentro dos quais o item encaixável pode existir.
O uso desse recurso pode melhorar significativamente a usabilidade do site. Isso é especialmente verdadeiro para os projetos cujos usuários precisam rolar as páginas com frequência.
Este recurso tem quase 100% de suporte ao navegador .
3. Cortar texto
CSS nos dá duas propriedades maravilhosas:
text-overflowe line-clamp. Eles permitem que você apare textos, manuseie palavras com cuidado e, ao mesmo tempo, nos poupe da necessidade de usar JavaScript ou alguns outros métodos complexos para resolver esses problemas. Ambas as propriedades não são novas, mas extremamente úteis.
Cortando textos
→ Aqui está um exemplo sobre CodePen
Vamos falar mais sobre propriedades
text-overfloweline-clamp.
▍ Propriedade de estouro de texto
Esta propriedade controla como o texto é exibido em situações em que deve ser truncado se não couber em uma linha. Um exemplo de tal situação é mostrado na figura acima, no cabeçalho do cartão. Aqui você pode usar a construção
text-overflow: ellipsis, o que levará ao fato de que o caractere Unicode ( …) será adicionado ao final do texto recortado .
Para que a propriedade
text-overflow: ellipsisfaça seu trabalho, é necessário usar as mesmas propriedades white-space: nowrape overflow: hidden.
.card-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Este recurso é quase totalmente compatível com todos os navegadores modernos.
▍ A propriedade line-clamp
Esta propriedade vem em nosso auxílio nos casos em que precisamos trabalhar não com texto de linha única, mas com texto de várias linhas (um exemplo desse texto é o conteúdo do cartão da figura acima). Embora faça parte do padrão CSS Overflow Module Nível 3 , que agora tem o status de "Working Draft", essa propriedade já é suportada por cerca de 95% dos navegadores, embora com um prefixo
-webkit-. Antes de usá-lo, é importante levar em consideração que ele não fornece a capacidade de controlar o número de caracteres exibidos. Mas é incrivelmente útil de qualquer maneira.
Para usá-lo, precisamos usar a implementação antiga do flexbox, usando as propriedades
display: -webkit-boxe -webkit-box-orient: vertical. Isto é o que parece:
.card-description {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
4. Propriedades CSS personalizadas: Variáveis CSS
No mundo do JavaScript, os pré-processadores CSS (como Sass, Less e Stylus) são tecnologias muito úteis e populares. Os pré-processadores estendem os recursos do CSS, permitindo que você use, por exemplo, variáveis e funções. Mas os web designers modernos têm acesso a poderosos recursos CSS padrão, conhecidos como propriedades CSS personalizadas ou variáveis CSS.
Variáveis CSS ajudam a manter os aplicativos consistentes e ajudam a implementar o DRY. Eles facilitam o desenvolvimento e manutenção de temas de aplicativos. Esses recursos são um dos principais motivos do sucesso dos pré-processadores. Você pode ler mais sobre isso aqui .
Usar recursos CSS padrão significa que você não precisa mais de pré-processadores para criar variáveis. As variáveis, como outros recursos CSS padrão que amamos, funcionam em cascata.
É muito fácil criar variáveis CSS. Ou seja, para declarar uma variável, basta colocar dois traços (
--) antes de seu nome. Depois disso, onde o valor da variável é necessário, a função é chamada var(), passando-lhe a variável criada anteriormente como argumento. Como você pode ver, tudo é muito simples.
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
-webkit-filter: blur(var(--blur));
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
Variáveis CSS podem ser manipuladas em JavaScript.
Usando variáveis CSS
→ Aqui está um exemplo em CodePen, que mostra o uso de variáveis CSS e gerenciamento do código JS
5. Fornecendo suporte para o tema escuro
Desde que a Apple introduziu o tema escuro para macOS no ano passado, e graças à maneira como o CSS nos deu a capacidade de detectar o uso desse tema usando consulta de mídia, muitos grandes projetos da web (como Twitter e Google Maps) adquiriram esse tema. ( aqui está uma lista de projetos que suportam o tema escuro).
O tema escuro não é apenas uma forma de decorar páginas da web. Pode realmente ajudar algumas pessoas a navegar na Internet.
Aqui estão algumas citações.
E há pessoas que, por razões objetivas, precisam do modo escuro. Eles usam este modo como uma das ferramentas para pessoas com deficiência. Por exemplo, estamos falando de pessoas com baixa visão.
Thomas Steiner, engenheiro de soluções para clientes, Google, Alemanha.
Molly tem síndrome de Usher. Por causa disso, ela não ouve nada, e o campo de visão de um de seus olhos é limitado a 5 graus. (…) Visualizar páginas no modo escuro estará ao seu alcance. Este modo também pode ser útil para outras pessoas, ampliando as possibilidades de navegação na Internet para quem tem dor de cabeça, ou para quem precisa se sentar diante do computador em uma sala mal iluminada. Se, ao desenvolver algo, focar apenas em alguns usuários especiais, será útil não só para eles.
Charles Reynolds , Designer, Governo do Reino Unido.
Também feito de materialThomas Steiner pode aprender que o uso do modo escuro ajuda a economizar energia: “(…) como você sabe, o uso do modo escuro em monitores AMOLED pode economizar muita energia. A pesquisa Android, visando aplicativos populares do Google, como o YouTube, mostrou economia de energia de até 60% em alguns casos. ”
Um novo recurso CSS que nos permite saber se um usuário tem um tema escuro ativado é representado por uma função de mídia
prefers-color-scheme. Já é compatível com Chrome, Firefox, Safari e Opera.
Quando combinadas com as variáveis CSS, é muito fácil para um desenvolvedor da Web tornar mais fácil para seus visitantes aproveitarem os modos dinâmicos claro e escuro.
:root {
--color: #222;
--background: #eee;
--text: 'default';
}
body {
color: var(--color);
background: var(--background);
}
body:after {
content: var(--text);
display: block;
text-align: center;
font-size: 3rem;
}
@media (prefers-color-scheme: light) {
:root {
--color: #222;
--background: #eee;
--text: 'light';
}
}
@media (prefers-color-scheme: dark) {
:root {
--color: #eee;
--background: #222;
--text: 'dark';
}
}
Detecção automática do tema usado pelo dispositivo
→ Neste projeto CodePen, o design da página depende de qual tema o visualizador está usando
6. Diretiva apoia
Por muito tempo, os desenvolvedores da web tiveram que recorrer a soluções de terceiros (como a ferramenta Modernizr JS ) para descobrir se certos recursos CSS são suportados pelo navegador atual. Por exemplo, ao configurar uma propriedade de elemento
-webkit-line-clamp, você pode verificar se a propriedade é compatível com o navegador e, caso contrário, você pode usar algum fallback.
Depois que a diretiva apareceu no CSS
@supports, tornou-se possível verificar as capacidades dos navegadores diretamente do código CSS.
A diretiva é
@supportsmuito semelhante às consultas de mídia. Ele suporta várias expressões combinações construídos usando instruções condicionais AND, ORe NOT:
@supports (-webkit-line-clamp: 2) {
.el {
...
}
}
Isso verifica se o navegador oferece suporte à propriedade
-webkit-line-clamp. Se sim, isto é, se a condição for verdadeira, o estilo declarado na diretiva será aplicado @supports. Todos os navegadores modernos oferecem suporte a
esse recurso .
Resultado
Nesta postagem, abordei alguns dos recursos úteis do CSS. Se você pode fazer algo sem usar JS, mas apenas CSS, faça isso.
O mundo moderno do front-end está mudando rapidamente. Constantemente temos novas oportunidades à nossa disposição que nos ajudam a fazer nossos negócios de maneira mais rápida e melhor. Experimentar CSS e aprender coisas novas não é apenas muito gratificante, mas também extremamente interessante. Aconselho você a experimentar algo novo que aprendeu hoje.
Você conhece algum recurso CSS recente que permite resolver os mesmos problemas que você resolvia anteriormente apenas usando JavaScript?
