10 novos recursos CSS que você talvez não conheça

A web moderna não seria possível sem CSS. A linguagem de marcação é responsável pelo fato de os sites terem uma boa aparência, terem um design bonito e cada elemento permanecer onde pertence. No entanto, você sabia que novos recursos CSS aparecem o tempo todo?

Com o passar dos anos, o CSS foi muito além das cores de fundo, bordas, estilo de texto, margens e o modelo de caixa. O CSS moderno é capaz de oferecer uma ampla gama de funções para as quais você exigia JavaScript ou soluções alternativas no passado.

Para comemorar o quão longe ele chegou, neste post queremos ver alguns dos novos recursos incríveis que o CSS está exibindo em 2021 que você talvez não conheça. Vamos destacar coisas legais que designers e desenvolvedores da web podem fazer com CSS moderno, falar sobre casos de uso, compatibilidade de navegador e também dar um exemplo rápido.

Vamos.

Novos recursos de CSS: o que o CSS moderno pode fazer

Essas são algumas das coisas incríveis que o CSS é capaz hoje em dia.

Propriedades / variáveis ​​personalizadas

As propriedades personalizadas basicamente permitem que você defina substitutos para as propriedades CSS em um local central para usar em seu design. A melhor maneira de entender por que isso é útil é revisar um exemplo.

Normalmente, ao criar um tema, você escolheria um esquema de cores e, em seguida, declare essas cores sempre que necessário.

a {
	color: #cd2653;
}

.social-icons a {
	background: #cd2653;
}

.wp-block-button.is-style-outline {
	color: #cd2653;
}

O problema com essa abordagem é que, se você quiser fazer alterações em uma das cores, terá que alterar cada instância. Embora os editores de código possam fazer isso facilmente por meio de pesquisa e substituição, ainda é irritante. Principalmente se você quiser apenas fazer um teste rápido e precisar reverter tudo de novo.

Existe uma solução melhor

As propriedades personalizadas eliminam isso. Com sua ajuda, você pode atribuir as cores em questão a uma variável uma vez e, em seguida, apenas inserir essa variável como uma propriedade CSS cada vez que usá-la desta forma:

:root {
	--global--color-primary: #28303d;
}

a {
	color: var(--global--color-primary);
}

.social-icons a {
	background: var(--global--color-primary);
}

Dessa forma, quando você quiser fazer uma alteração, basta fazê-lo em um lugar. Legal certo? No passado, você precisava empregar um pré-processador como o SASS para usar variáveis, agora é uma funcionalidade CSS nativa.

Como você pode ver acima, as propriedades personalizadas também são muito fáceis de usar. Defina suas variáveis ​​no início do documento sob o :root seletor (observe o traço duplo -- na frente das variáveis, é isso que as define como propriedades personalizadas, elas também diferenciam maiúsculas de minúsculas!). Depois disso, você pode usá-los em todo o documento por meio do var() Função.

Se você quiser alterar uma variável, basta alterar a declaração em :root e você está pronto para ir. Um tema que tira grande proveito das propriedades personalizadas é Twenty Twenty-One. Se você quiser vê-los em ação, recomendo que leia nossa análise.

Quanto à questão de quão bem adotada esta função CSS é, suporte de navegador é muito bom:

Suporte para navegador de propriedade personalizada de variável CSS

@apoia

Em seguida, temos uma regra CSS semelhante às consultas de mídia. No entanto, em vez de condicionar as regras CSS no tamanho da tela ou tipo de telefone, @supports permite que você faça o mesmo, dependendo das propriedades e valores CSS que o navegador do usuário suporta.

Isso é bom para quê?

Como você verá ao longo deste post, nem todos os recursos CSS são suportados por todos os navegadores e dispositivos. Embora muitas vezes você possa lidar com isso usando declarações de endosso, em alguns casos, se você não incluir especificamente o suporte para tecnologia mais antiga, poderá danificar seriamente o seu site.

Além disso, você pode usar @supports para adicionar funções ou estilos adicionais para navegadores mais modernos que podem lidar com eles (é por isso que as consultas com @supports eles também são chamados de “consultas de função”).

Como usar consultas de função

Se você estiver familiarizado com as consultas da mídia, usar a verificação de suporte será muito fácil. Veja como usá-lo:

@supports (display: grid) {
	.site-content {
		display: grid;
	}
}

Como você pode ver, é simplesmente a regra seguida pela propriedade ou par propriedade-valor que você deseja verificar entre parênteses. Depois disso, vem a declaração CSS usual sobre quais regras aplicar se a condição for atendida.

O exemplo acima indica que se o navegador suportar grade CSS (mais sobre isso em um minuto), ele deve ser aplicado display: grid; para o elemento com a classe .site-content.

Também é importante notar que @supports entender operadores not, and, Y or (que também podem ser combinados) para criar regras mais específicas, como backup para navegadores que não oferecem suporte a esse recurso específico:

@supports not (display: grid) {
	.site-content {
		float: left;
	}
}

Para usar @supports corretamente, você precisa saber quais navegadores suportam isso (eu sei, isso é uma espécie de meta). A boa notícia é que todos os navegadores modernos fazem.

suporte a navegador de consulta de função css

No entanto, como o objetivo dessas consultas é habilitar ou desabilitar recursos que os navegadores mais antigos não podem manipular, certifique-se de criá-los corretamente. Isso significa que, se você for usar uma consulta de recurso, crie-a para navegadores que entendam as consultas de recurso. Não adianta dizer a um navegador para ignorar algo de uma forma que ele não consegue entender.

Folgas da caixa flexível

Flexbox é outro módulo de layout CSS que discutimos em profundidade antes. Um de seus pontos fracos tem sido os gaps do flexbox, o que significa a capacidade de definir quebras entre linhas e colunas.

Felizmente, o suporte do navegador para esse recurso CSS está melhorando. Agora você pode começar a usar Gap = Vão, Espaçamento entre linhas, Y espaçamento de coluna para criar espaço em layouts criados com Grid, Flexbox e layouts de várias colunas.

Aqui está um exemplo rápido de como isso ficaria no flexbox:

.flex-gap-test {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 16px;
}

<div class="flex-gap-test">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

E aqui está na página:

exemplo de flexbox gap de novos recursos CSS

Embora seja possível obter o mesmo layout através das margens, você precisa de muito mais marcações e soluções alternativas do que simplesmente declarar o tamanho do espaço.

visibilidade do conteúdo

content-visibility é um novo recurso CSS muito legal para melhorar o desempenho do site. Basicamente, ele funciona como um carregamento lento, não apenas para imagens, mas para qualquer elemento HTML. Você pode usá-lo para evitar que qualquer parte do seu site carregue até que esteja visível.

O uso também é muito fácil. Basta aplicá-lo a um elemento de sua escolha como este:

.content-below-fold {
	content-visibility: auto;
}

content-visibility assume três valores. Por padrão, é definido como visible, caso em que o item é carregado normalmente. Alternativamente, você pode defini-lo como hidden, nesse caso o elemento não é renderizado, independentemente de estar visível ou não. Quando definido para autoPor outro lado, os elementos fora da área visível serão ignorados e renderizados assim que aparecerem na tela.

Coisas bem legais, certo?

Uma coisa que também pode ser importante neste caso é contain-intrinsic-size. Uma vez que os elementos estabelecidos em content-visibility: hidden; eles têm efetivamente tamanho zero, o que permite que você aplique uma altura e largura teóricas aos elementos ocultos para que o navegador possa levá-los em consideração desde o início, e não no momento em que o elemento é renderizado. Dessa forma, você pode evitar mudanças repentinas de design durante a rolagem.

Suporte de navegador para content-visibility ainda está um pouco irregular, mas está chegando. Mesmo para contain-intrinsic-size.

suporte para navegador de visibilidade de conteúdo

Uma vez mais amplamente adotado, prevejo que se tornará uma das ferramentas mais eficazes para acelerar o processo de renderização.

Transições, transformações, animações

Antigamente, se você queria algo para mover em seu site, geralmente tinha que recorrer ao JavaScript (ou GIFs animados, para aqueles da geração MySpace). No entanto, o que você pode não saber é que o CSS também tem a capacidade de fazer as coisas andarem há anos. As três principais ferramentas para realizar esse tipo de coisa são:

  • Transições – Permite que você faça uma mudança de um valor de propriedade para outro (por exemplo, efeitos de rolagem) suave em vez de abrupta.
  • Transformações: permite mover, girar e dimensionar elementos tanto em 2D Y 3D espaço.
  • Animações – Configurar animações simples ou complexas em CSS e configurar como e quando devem ser executadas.

Naturalmente, não temos espaço para examinar todos os três em detalhes aqui. Certifique-se de verificar os links acima para obter mais informações. No entanto, vamos fazer alguns exemplos rápidos para cada um para dar uma ideia do que é possível.

Transição CSS

Aqui está um exemplo rápido de uma transição CSS:

div {
	width: 100px;
	height: 100px;
	transition: height 3s;
}

div:hover {
	height: 500px;
}

A marcação anterior desacelerará o aumento de div altura para três segundos quando alguém passa o mouse sobre o item.

Transformação CSS

Abaixo está um exemplo de uma transformação CSS. Ele girará o item 30 graus no sentido horário quando alguém passar o mouse sobre ele:

div:hover {
	transform: rotate(30deg);
}

Animação CSS

E, finalmente, um pequeno snippet mostrando uma animação CSS:

@keyframes color-change {
	from {background-color: blue;}
	to {background-color: yellow;}
}

div:hover {
	animation-name: color-change;
	animation-duration: 3s;
}

Veja como você usa @keyframes para nomear a animação e definir o que ela faz e, em seguida, aplicá-la a um elemento usando animation-name. animation-duration controla o tempo que leva para ser concluído. Existem outras propriedades como esta.

Se você quiser experimentar tudo isso, a boa notícia é que a compatibilidade do navegador é ótima (veja aqui, aqui, aqui Y aqui) Portanto, nada atrapalha a torção nas transições, transformações e animações CSS.

Configuração de rolagem

A configuração de rolagem oferece a opção de bloquear a janela do usuário em certas partes ou elementos do seu site. É muito útil para criar transições interessantes e ajudar os usuários a se concentrarem nos elementos mais importantes da página ao rolar para baixo. Você pode encontrar uma demonstração simples aqui.

Este efeito é altamente visível em aplicativos móveis, no entanto, com a configuração de rolagem, você também pode trazê-lo para sites.

O uso também é relativamente simples no nível mais básico. Você apenas aplica o tipo de ajuste de deslocamento a um contêiner e define onde seus filhos devem se encaixar.

.container {
	scroll-snap-type: y mandatory;
}

.container div {
	scroll-snap-align: start;
}

Claro, há mais. Se você quiser mais informações, o CSS Tricks tem uma ótima escrever.

Isso apenas deixa uma olhada na compatibilidade do navegador, que é bastante bom.

suporte para navegador de rolagem rápida

No entanto, observe que o suporte é um pouco desigual em todos scroll-snap propriedades. Portanto, certifique-se de verificar seu caso de uso específico.

: é e: onde

As últimas entradas em nossa lista de novos recursos CSS que você pode não estar ciente são os :is Y :where pseudoclasses. Eles permitem que você reduza a repetição na marcação CSS encurtando as listas de seletor CSS.

Por exemplo, compare isto:

.main a:hover,
.sidebar a:hover,
.site-footer a:hover {
	/* markup goes here */
}

A isto:

:is(.main, .sidebar, .site-footer) a:hover {
	/* markup goes here */
}

O mesmo funciona com :where:

:where(.main, .sidebar, .site-footer) a:hover {
	/* markup goes here */
}

Se a marcação é a mesma, qual é a diferença? A diferença é que :is é muito mais específico. Pegue o nível de especificidade do item mais específico entre parênteses. Em contraste com isso, a especificidade de :where é sempre zero. Conseqüentemente, é muito mais fácil anular mais adiante na linha.

A adoção do navegador ainda é um pouco irregular, mas devagar recebendo . Portanto, sinta-se à vontade para começar a testá-los.

Qualquer outro novo recurso CSS que valha a pena conferir?

Como todas as outras tecnologias da web, a marcação de folha de estilo em cascata está em constante evolução. Isso significa que sempre há novos recursos CSS para descobrir e coisas para tentar e experimentar.

Acima, vimos alguns exemplos de coisas que o CSS já é capaz de fazer hoje e que você pode ter perdido. Há mais de onde isso veio. Teremos o maior prazer em ouvir o que mais você tem a compartilhar. Fora isso, boa codificação!

Qual é o seu recurso favorito do CSS moderno? Compartilhe na seção de comentários abaixo!

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: