CSS 2022 — Um guia de novos recursos para você se atualizar
2022 está preparando novidades sobre CSS e não são poucas! Existe uma infinidade de novos recursos vindo aí. Alguns já chegaram aos navegadores, outros provavelmente ganharão suporte esse ano de 2022. Mas, claro, existem aqueles que o processo de adesão pode ser um pouco mais longo. Neste artigo vamos dar uma olhada em alguns deles.
Índice
- Container Queries
- has()
- @when/@else
- accent-color
- Novas funções de cores do CSS
- Cascade Layers
- Subgrid
- Scroll-Timeline
- Nesting
Iniciamos esse texto então dando as boas vindas ao Container Queries CSS. Recentemente, o Google Chrome adicionou um novo recurso CSS, o @container query. Não se assuste se por um acaso se sentiu fora da zona de conforto do CSS, a novidade é semelhante as @media queries usadas para construção de interfaces responsivas. Esse recurso foi proposto pela contribuidora do projeto SASS e especialista convidada no projeto W3C — Miriam Suzanne. Ela se baseou em uma proposta do David Baron.
1 — Container Queries
Os Container Queries permitiram que os desenvolvedores apliquem estilizações em um elemento de acordo com o tamanho do elemento pai e não apenas do viewport como ocorre com @media query. Isso tem sido um problema para o design responsivo, pois muitas vezes queremos que um componente se adapte ao seu contexto. Com isso, é mais vantajoso escrever elementos modulares com base em suas dimensões sem a necessidade de JavaScript, por exemplo, fazendo com que CSS receba duas novas propriedades.
Como usar? Para um Conteiner Query precisamos especificar um elemento como nosso container, usando a propriedade container especificado abaixo:
- container-name: essa propriedade identifica o container, sendo possível isolar as regras de cada elemento. Ela torna o elemento o mais modular possível, porém o seu uso não é obrigatório.
- container-type: essa propriedade define o tipo do container, pode conter os valores lógicos width, height, inline-size ou block-size. inline-size e block-size. Sabemos que esses valores podem produzir resultados diferentes de acordo com o modo de escrita do documento.
ATENTE-SE: A depender do valor da propriedade writing-mode, a opção inline-size poderá utilizar o eixo vertical; e a opção block-size, o eixo horizontal para consulta dimensional. Normalmente fazemos assim:
main, aside {
container: inline-size;
}Em seguida, podemos usar a regra @container de uma maneira semelhante a uma @media query. Observe a maneira diferente como a regra pode ser expressa entre colchetes (inline-size > 30em ao invés de min-width: 30em). Essas especificações são da Syntax improvements in Level 4. Quando o container é maior que 30rem, mudamos para um layout horizontal aplicando a flexbox:
@container (inline-size > 30em) {
.card {
display: flex;
}
}Já posso usar? O Chrome afirmou oferecer suporte ao Container Query por trás de um sinalizador, mas não parece ter consistência ainda. Também existe um polyfill, mas ainda não funciona com essa syntax recente. Diante disso, a gente sabe que precisa aguardar mais um pouco para utilizar essa propriedade em produção, vamos com calma. A boa notícia é que existem muitas pessoas estudando e praticando, então não demorará muito para serem compatíveis com os navegadores.
2 — :has()
Mais conhecido como “seletor pai”, essa pseudoclasse permite selecionar um elemento dependendo de seus elemento filho. Por exemplo, podemos estilizar uma imagem utilizando a tag <figure> independente de estar ou não acompanhada pela tag <figcaption>. Ou podemos segmentar um rótulo (label) em um formulário seguido por entradas inválidas. As possibilidades são infinitas.
Como usar? Para estilizar elementos <section> que contêm um <h2>:
section:has(h2) {
background: blue;
}Em adicional, para estilizar um elemento <img>, somente se o elemento pai <section> também conter um <h2>:
section:has(h2) img {
border: 2px solid pink;
}Já posso usar? Ainda não há suporte para navegadores convencionais, mas você pode pintar e bordar com a propriedade no Safari Technology Preview.
3 — @when/@else
É uma regra para condicionais em CSS, semelhante à lógica if/else nas linguagens de programação. Isso poderia tornar a escrita das @media query complexas muito mais lógica, por exemplo. @when pode ser usada ao invés de @if e evitar conflito com Sass.
Como usar? Podemos consultar várias @media query ou recursos suportados, como se a janela de visualização de um usuário está acima de uma determinada largura e seu navegador suporta subgrid. Ao usar @when/@else, removemos o @ da regra de consulta:
@when media(min-width: 30em) and supports(display: subgrid) {
/* Estilos de viewport acima de 30em em que o navegador também suporta subgrid */
} @else {
/* Estilos para navegadores que não combina com essa condição */
}Já posso usar? Ainda não. Ainda está em discussão. Talvez nem seja lançado ainda esse ano, mas é bom ficar atento.
4 — accent-color
Essa propriedade facilita e agiliza a distribuição de cores padrões para determinadas entradas de formulário, aproveitando estilos. Pense em caixas de seleção, botões de opção, range inputs e barras de progresso. Historicamente são difíceis de estilizar, e todos os navegadores os processam de forma ligeiramente diferente. Como desenvolvedora, a opção principal, na maioria das vezes, é ocultar a entrada padrão e rodar nossa própria propriedade usando pseudo-elementos. A accent-color nos permite manter a entrada padrão do navegador, mas aplicar uma cor para se adequar à nossa marca.
Como usar? É simples e a propriedade é herdada, portanto, podemos configurá-la na raíz para aplicá-la em todos os lugares:
:root {
accent-color: grey;
}Ou em elementos individuais:
form {
accent-color: grey;
}
input[type="checkbox"] {
accent-color: red;
}Já posso usar? Boas notícias! Finalmente uma propriedade nova que já podemos aplicar. A accent-color é compatível com Chrome, Edge, Firefox e Safari. Os navegadores que não suportam simplesmente obterão as cores padrão e as entradas permanecerão perfeitamente utilizáveis.
5 — Novas Funções De Cores CSS
Você já deve estar familiarizado com os formatos de cores Hex, RGB e HSL. Os níveis 4 e 5 do módulo de cores CSS incluem novas funções de cores que nos permitem especificar e manipular cores em CSS como nunca antes que incluem:
- hwb(): Matiz, Luminosidade, Escurecimento.
- ab(): Luminosidade, juntamente com os valores aeb, que determinam a tonalidade.
- lch(): Luminosidade, Croma, Matiz.
- color-mix(): Produz uma cor a partir da mistura de duas cores.
- color-contrast(): Lista de cores, utilize aquela com o maior contraste em comparação com o primeiro argumento.
- color(): Especifique uma cor em um espaço de cores diferente (por exemplo, display-p3).
Como usar? Há muito o que se aprofundar nesse assunto. Há também a sintaxe de cores relativas, que nos permite pegar uma cor e ajustá-la para criar outra.
hwb(), lab() e lch() pode ser usado da mesma forma que as funções rgb() e com hsl() as quais estamos acostumados, com um parâmetro alfa opcional:
.first-element {
background-color: lch(80% 100 50); // cor opaca
}
.first-element {
background-color: lch(80% 100 50 / 0.5); // cor com 50% de transparência
}color-mix() produz uma cor como resultado da mistura de duas outras. Precisamos especificar um método de interpolação de cores como primeiro argumento:
.first-element {
background-color: color-mix(in lch, hotpink, blue);
}color-contrast() requer uma cor base para criar outras. Ele produzirá a cor com o contraste mais alto ou, no caso em que uma palavra-chave adicional for fornecida, a primeira cor na lista que atende à taxa de contraste correspondente:
/* Saída de uma cor com alto contraste *
.first-element {
color: white;
background-color: color-contrast(white vs, navy, green, blue);
}
/* Saída da primeira cor que combine com o AA do contraste */
.first-element {
color: white;
background-color: color-contrast(white vs, navy, green, blue to AA);
}Isso é ótimo para esquemas de cores acessíveis. Por exemplo, podemos deixar nosso CSS selecionar se o preto ou branco é mais adequado (ou seja, fornece o maior contraste) para um botão com uma determinada cor de fundo.
Já posso usar? O Safari está liderando sua compatibilidade entre os navegadores com hwb(), lch(), lab() e color(), suportadas na versão 15. A color-mix() e color-contrast() pode ser ativado com um sinalizador. O Firefox suporta hwb() e também tem suporte sinalizado para color-mix() e color-contrast(). Infelizmente o Chrome ainda não suporta nenhuma dessas propriedades.
6 — Cascade Layers
As Camadas em cascata ou Cascade Layers nos dão mais poder para gerenciamento “em cascata” do CSS. Atualmente, existem vários fatores que determinam quais estilos serão aplicados em seu código CSS, incluindo a especificidade do seletor e a ordem de aparência. Essa propriedade permite agrupar efetivamente nosso CSS em pedaços, em camadas propriamente dito. O código dentro de uma camada inferior na ordem terá precedência sobre o código em uma camada superior, mesmo que um seletor na camada superior tenha maior especificidade. Você pode saber mais detalhes no artigo guia completo para CSS-Tricks da Miriam Suzanne.
Para facilitar, pense nisso como z-index em cascata. Se você entender como z-index funciona, provavelmente entenderá as camadas em cascata rapidamente.
Como usar? Como Bramus explica em seu tutorial, você pode criar camadas consistentes com a metodologia ITCSS.
/* Crie as camadas na ordem desejada */
@layer reset, base, theme;
/* Acrescente CSS em cada camada */
@layer reset {
/* Acrescente uma camada para o 'reset' */
}
@layer base {
/* Acrescente uma camada para a 'base' */
h1.title {
font-size: 5rem;
}
}
@layer theme {
/* Acrescente uma camada para 'theme' */
h1 {
font-size: 3rem;
}
}A declaração CSS font-size para a h1 na camada theme venceria a camada base, apesar desta última ter uma especificidade maior.
Cascade Layers são suportadas na versão mais recente do Firefox e podem ser ativadas com um sinalizador no Chrome e no Edge (com suporte total chegando ao Chrome na versão 99). O suporte amplo é garantido em breve. Portanto, você já pode começar a rodar Cascade Layers, mas poderá levar algum tempo até que possamos usá-las com confiança na produção.
7 — Subgrid
Quando surgiu a CSS Grid anos atrás, muitos desenvolvedores pensaram que isso nos permitiria dispor cada parte da nossa interface em uma única grade, assim como os layouts típicos de 12 colunas que recebemos dos designers. Na prática, isso deveria achatar completamente a marcação, quebrando a semântica, o que não é nem um pouco recomendado! Parte da especificação CSS Grid Layout Module 2, a subgrid permite que um elemento herde a grade do elemento pai, seja no eixo da linha ou da coluna. Em teoria, você poderia aninhar grades do início ao fim, alinhando todos os componentes na mesma grade. Adotando essa novidade tornará o web design mais flexível e intrínseco, priorizando conteúdo, principalmente o UX e acessibilidade ao invés da aderência rígida de uma grade. Mas a subgrid ainda é incrivelmente útil para resolver todos os desafios de interface.
Por exemplo, pegue esta linha de imagens com legendas. As legendas têm comprimentos variados, mas usando a subgrid podemos fazer com que todas se alinhem umas com as outras, sem codificar uma altura fixa.
Como usar? Especifique a grade do elemento pai usando as propriedades de grid que normalmente usamos. Use a palavra-chave subgrid para a propriedade grid-template-columns ou grid-template-rows no item aninhado que você deseja herdar a grade pai:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
}
.grid > figure {
display: grid;
grid-template-rows: subgrid;
}
.grid figcaption {
grid-row: 2;
}Já posso usar? Notavelmente, a subgrid é suportada no Firefox desde 2019, mas nenhum outro navegador seguiu o exemplo há quase três anos. Há indicações de que a equipe do Chromium está finalmente começando a implementá-lo, então podemos ter a sorte de vê-lo no Chrome e no Edge este ano. Safari segue sem notícias. Ainda sim, não há nada que te impeça de usar subgrid na produção, mas é melhor tratá-lo como aprimoramento progressiva por enquanto.
8 — Scroll Timeline
Você provavelmente já viu muitos sites legais que implementam animações sofisticadas com rolagens e tudo mais. Temos muitas bibliotecas JS que ajudam a implementar esse tipo de coisa. Agora imagine se pudéssemos fazer tudo isso dentro do CSS? Com @scroll-timeline nós podemos!
Como usar? Precisamos de algumas coisas:
- uma animação keyframe;
- a regra @scroll-timeline;
- a propriedade animation-timeline no elemento que estamos animando (ou especifique a linha do tempo na propriedade animation abreviada).
/* Configure a keyframe animation */
@keyframes slide {
to { transform: translateX(calc(100vw - 2rem)); }
}
/* Configure nossa scroll timeline. Aqui daremos o nome de `slide-timeline` */
@scroll-timeline slide-timeline {
source: auto; /* o elemento rolável que aciona a animação vinculada a essa rolagem (é document por padrão) */
orientation: vertical; /* a orientação de rolagem (vertical por padrão) */
scroll-offsets: 0%, 100%; /* uma matriz de intervalos de progresso em que a linha do tempo está ativa */
}
/* Especifique a keyframe animation and a scroll timeline */
.animated-element {
animation: 1s linear forwards slide slide-timeline;
}Alternativamente, podemos usar deslocamentos baseados em elementos para a propriedade scroll-offsets, para acionar a linha do tempo quando um determinado elemento rola para a visualização:
@scroll-timeline slide-timeline {
scroll-offsets: selector(#element) end 0, selector(#element) start 1;
}Saiba mais no artigo Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelinesa do Bramus.
Já posso usar? Se você estiver interessado em praticar a @scroll-timeline, pode ser ativado com um sinalizador no Chrome. A especificação está no rascunho do editor, portanto, pode vir aí muito em breve. É provável que haja casos que exijam uma biblioteca JS para animação baseada em rolagem (pense no gerenciamento de cronogramas de animação complexos). Mas para casos relativamente simples, isso pode economizar em muitas importações desnecessárias.
9 — Nesting
Se você estiver familiarizado com o Sass, conhecerá a conveniência de poder aninhar seletores — essencialmente, escrever uma regra do elemento filho dentro do elemento pai. O aninhamento nos ajuda a manter nosso código organizado, mas como qualquer outra coisa se utilizado em excesso, possa ser um obstáculo! Agora parece que o aninhamento está finalmente chegando ao CSS nativo.
Como usar? Sintaticamente, é semelhante ao Sass, então não deve parecer um salto muito grande. A regra aninhada aqui visa um h2 dentro de um elemento com uma classe de card:
.card {
color: red;
& h2 {
color: blue;
}
}Ou podemos usá-lo para pseudo-classes e pseudo-elementos:
.link {
color: red;
&:hover,
&:focus {
color: blue;
}
}O equivalente no CSS de hoje seria:
.link {
color: red;
}
.link:hover,
.link:focus {
color: blue;
}Já posso usar? Não nativamente. Nenhum navegador suporta ainda, mesmo atrás de uma sinalização. Mas se você usa PostCSS, pode testá-lo com o postcss-preset-envplugin.
Conclusão
Não é de hoje que vivemos uma expansão de CSS conforme as tecnologias, responsividade e adaptabilidade avançam. A maioria das utilidades dessas expansões são para formar códigos mais limpos e fáceis de entender, contribuindo também para um aprendizado mais inclusivo futuramente, além da eficiência e flexibilidade no desenvolvimento de interfaces do usuário. Mas também não podemos deixar de mencionar que podem deixar algumas ferramentas e propriedades para trás, tornando-as obsoletas. Essa é a famigerada hora que saímos da zona de conforto para se adaptar à essas mudanças que são sempre necessárias. Elas nos permitem — até nos encorajam — a abraçar a flexibilidade inerente da web e considerar as muitas maneiras diferentes pelas quais nossos usuários podem navegar. E considerando que desenvolvemos e criamos interfaces amigáveis para os usuários de todo o planeta, eles podem estar usando qualquer um dos milhões de dispositivos diferentes disponíveis hoje, e assim como eu, como você, como qualquer outra pessoa, eles podem preferir um contraste mais alto, um esquema de cores mais escuras ou uma animação mais reduzida. Existem usuários com dispositivos de última geração e aqueles com um dispositivo mais antigo. Não podemos esquecer dos usuários com necessidades especiais, que também não deixam de serem navegadores ávidos da web.
Ao invés dos designers quebrarem a cabeça procurando por imagens, ou criando animações que demoram horas e horas para ficarem prontas, podem sugerir a maneira mais rápida e flexível de tornar sua interface impecável dando dicas e sugestões de CSS para deixar o navegador decidir a melhor forma de exibir uma página da web.
CSS está se aprimorando cada vez mais para se adaptar a essas mudanças de telas e adaptação a inclusão digital. Está se tornando cada vez mais importante na criação de interfaces e este é um sinal de que não podemos ignorar essa linguagem.
Fontes:
CSS Container Queries: A First Look + Demo
Say Hello To CSS Container Queries
The CSS :has() selector is way more than a “Parent Selector”
Extending CSS when/else chains: A first look
Simplifying Form Styles With accent-color
Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()
A Complete Guide to CSS Cascade Layers
Cascade Layers and the use of !important
CSS Nesting, specificity and you
Alguns trechos foram utilizados do artigo da autora Michele Barker.
