Novidades no CSS e na IU: edição do I/O 2023

Una Kravets

Bramus

Adam Argyle

Os últimos meses marcaram uma era de ouro para a interface da Web. Novos recursos da plataforma foram lançados com uma adoção entre navegadores que oferece suporte a mais recursos da Web e opções de personalização do que nunca.

Confira 20 dos recursos mais interessantes e impactantes que foram lançados recentemente ou serão lançados em breve:

• Consultas de contêiner
• Consultas de estilo
• Seletor :has()
• Microssintaxe nth-of
• text-wrap: balance
• initial-letter
• Unidades de viewport dinâmicas
• Espaços de cor de ampla gama
• color-mix()
• Aninhamento
• Camadas em cascata
• Estilos com escopo
• Funções trigonométricas
• Propriedades de transformação individuais
• popover
• posicionamento da âncora
• selectmenu
• Transições de propriedades discretas
• Animações baseadas em rolagem
• Transições de visualização

The New Responsive

Vamos começar com alguns novos recursos de design responsivo. Com os novos recursos da plataforma, é possível criar interfaces lógicas com componentes que têm informações de estilo responsivo, interfaces que aproveitam os recursos do sistema para oferecer UIs com aparência mais nativa e consultas de preferências do usuário para personalização completa.

Consultas de contêineres

As consultas de contêiner recentemente se tornaram estáveis em todos os navegadores modernos. Eles permitem consultar o tamanho e o estilo de um elemento pai para determinar os estilos que devem ser aplicados a qualquer um dos filhos. As consultas de mídia só podem acessar e aproveitar informações da janela de visualização, o que significa que elas só podem trabalhar em uma macrovisão de um layout de página. Já as consultas de contêiner são uma ferramenta mais precisa que pode oferecer suporte a qualquer número de layouts ou layouts dentro de layouts.

No exemplo de caixa de entrada a seguir, a barra lateral Caixa de entrada principal e Favoritos são contêineres. Os e-mails dentro deles ajustam o layout de grade e mostram ou ocultam o carimbo de data/hora com base no espaço disponível. É o mesmo componente na página, mas aparecendo em visualizações diferentes.

Como temos uma consulta de contêiner, os estilos desses componentes são dinâmicos. Se você ajustar o tamanho e o layout da página, os componentes vão responder ao espaço alocado individualmente. A barra lateral se torna uma barra superior com mais espaço, e o layout fica mais parecido com a caixa de entrada principal. Quando há menos espaço, os dois aparecem em um formato condensado.

Saiba mais sobre consultas de contêiner e como criar componentes lógicos neste post.

Consultas de estilo

A especificação de consulta de contêiner também permite consultar os valores de estilo de um contêiner pai. No momento, isso está parcialmente implementado no Chrome 111, em que é possível usar propriedades personalizadas de CSS para aplicar estilos de contêiner.

O exemplo a seguir usa características climáticas armazenadas em valores de propriedades personalizadas, como chuva, sol e nublado, para estilizar o plano de fundo do card e o ícone do indicador.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

Isso é só o começo das consultas de estilo. No futuro, teremos consultas booleanas para determinar se um valor de propriedade personalizada existe e reduzir a repetição de código. Atualmente, estamos discutindo consultas de intervalo para aplicar estilos com base em um intervalo de valores. Isso permitiria aplicar os estilos mostrados aqui usando um valor percentual para a chance de chuva ou cobertura de nuvens.

Saiba mais e confira mais demonstrações na nossa postagem do blog sobre consultas de estilo.

:has()

Falando em recursos dinâmicos e poderosos, o seletor:has() é um dos novos recursos de CSS mais poderosos que estão chegando aos navegadores modernos. Com :has(), é possível aplicar estilos verificando se um elemento pai contém a presença de filhos específicos ou se esses filhos estão em um estado específico. Isso significa que agora temos um seletor de elementos pai.

Com base no exemplo de consulta de contêiner, você pode usar :has() para tornar os componentes ainda mais dinâmicos. Nele, um item com um elemento "estrela" recebe um plano de fundo cinza, e um item com uma caixa de seleção marcada recebe um plano de fundo azul.

Mas essa API não se limita à seleção de um elemento pai. Também é possível estilizar qualquer elemento filho dentro do elemento pai. Por exemplo, o título fica em negrito quando o item tem o elemento de estrela. Isso é feito com .item:has(.star) .title. Usar o seletor :has() dá acesso a elementos pai, filho e até irmãos, o que torna essa API muito flexível, com novos casos de uso surgindo todos os dias.

Saiba mais e confira outras demonstrações nesta postagem do blog sobre :has().

Sintaxe nth-of

A plataforma da Web agora tem uma seleção mais avançada de nth-child. A sintaxe avançada nth-child oferece uma nova palavra-chave ("of"), que permite usar a microssintaxe An+B atual com um subconjunto mais específico em que pesquisar.

Se você usar o nth-child comum, como :nth-child(2) na classe especial, o navegador vai selecionar o elemento que tem a classe especial aplicada a ele e também é o segundo filho. Isso é diferente de :nth-child(2 of .special), que primeiro pré-filtra todos os elementos .special e depois escolhe o segundo da lista.

Saiba mais sobre esse recurso no nosso artigo sobre a sintaxe nth-of.

text-wrap: balance

Os seletores e as consultas de estilo não são os únicos lugares em que podemos incorporar lógica nos nossos estilos. A tipografia é outro. A partir do Chrome 114, é possível usar o balanceamento de quebra de texto para títulos usando a propriedade text-wrap com o valor balance.

Para equilibrar o texto, o navegador realiza uma pesquisa binária pela menor largura que não causa linhas adicionais, parando em um pixel CSS (não um pixel de exibição). Para minimizar ainda mais as etapas na pesquisa binária, o navegador começa com 80% da largura média da linha.

Saiba mais neste artigo.

initial-letter

Outra melhoria interessante na tipografia da Web é initial-letter. Essa propriedade do CSS oferece mais controle para o estilo de capitular encartada.

Use initial-letter no pseudoelemento :first-letter para especificar: O tamanho da letra com base em quantas linhas ela ocupa. O deslocamento de bloco da letra, ou "afundamento", para onde ela vai ficar.

Saiba mais sobre como usar o intial-letter aqui.

Unidades de viewport dinâmicas

Um problema comum enfrentado pelos desenvolvedores da Web hoje é o dimensionamento preciso e consistente da janela de visualização completa, especialmente em dispositivos móveis. Como desenvolvedor, você quer que 100vh (100% da altura da janela de visualização) signifique "ter a altura da janela de visualização", mas a unidade vh não considera elementos como barras de navegação recolhidas em dispositivos móveis. Por isso, às vezes, ela fica muito longa e causa rolagem.

Para resolver esse problema, agora temos novos valores de unidade na plataforma da Web, incluindo: - Altura e largura da janela de visualização pequena (ou svh e svw), que representam o menor tamanho de janela de visualização ativa. - Altura e largura grandes da janela de visualização (lvh e lvw), que representam o maior tamanho. - Altura e largura dinâmicas da janela de visualização (dvh e dvw).

As unidades de janela de visualização dinâmicas mudam de valor quando as barras de ferramentas dinâmicas adicionais do navegador, como o endereço na parte de cima ou a barra de guias na parte de baixo, estão visíveis e quando não estão.

Para mais informações sobre essas novas unidades, leia As unidades de viewport grandes, pequenas e dinâmicas.

Espaços de cor de ampla gama

Outra adição importante à plataforma da Web são os espaços de cores de ampla gama. Antes que a ampla gama de cores ficasse disponível na plataforma da Web, era possível tirar uma foto com cores vivas, que podia ser vista em dispositivos modernos, mas não era possível fazer um botão, uma cor de texto ou um plano de fundo corresponder a esses valores vibrantes.

Mas agora temos uma variedade de novos espaços de cores na plataforma da Web, incluindo REC2020, P3, XYZ, LAB, OKLAB, LCH e OKLCH. Conheça os novos espaços de cores da Web e muito mais no Guia de cores em HD.

E você pode ver imediatamente no DevTools como a faixa de cores foi expandida, com a linha branca delineando onde a faixa sRGB termina e onde a faixa de cores de gama mais ampla começa.

Há muito mais ferramentas disponíveis para cores! Não perca todas as ótimas melhorias de gradiente também. Há até uma nova ferramenta criada por Adam Argyle para ajudar você a experimentar um novo seletor de cores e construtor de gradientes para a web. Experimente em gradient.style.

color-mix()

A função color-mix() expande os espaços de cores. Essa função permite misturar dois valores de cor para criar novos valores com base nos canais das cores misturadas. O espaço de cores em que você mistura afeta os resultados. Trabalhar em um espaço de cores mais perceptivo, como oklch, vai passar por uma faixa de cores diferente de algo como srgb.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

A função color-mix() oferece um recurso muito solicitado: a capacidade de preservar valores de cores opacas ao adicionar um pouco de transparência a eles. Agora, você pode usar as variáveis de cor da marca ao criar variações dessas cores em diferentes opacidades. Para fazer isso, misture uma cor com transparente. Quando você mistura o azul da sua marca com 10% de transparência, o resultado é uma cor opaca em 90%. Assim, você pode criar sistemas de cores rapidamente.

Você pode conferir isso em ação no Chrome DevTools hoje com um ícone de diagrama de Venn de visualização muito interessante no painel de estilos.

Confira mais exemplos e detalhes na nossa postagem do blog sobre a mistura de cores ou teste este playground do color-mix().

Fundamentos do CSS

Criar novos recursos que beneficiem claramente os usuários é uma parte da equação, mas muitos dos recursos que chegam ao Chrome têm como objetivo melhorar a experiência do desenvolvedor e criar uma arquitetura CSS mais confiável e organizada. Esses recursos incluem aninhamento de CSS, camadas em cascata, estilos com escopo, funções trigonométricas e propriedades de transformação individuais.

Aninhamento

O aninhamento de CSS, algo que as pessoas adoram no Sass e um dos principais pedidos dos desenvolvedores de CSS há anos, finalmente está chegando à plataforma da Web. O aninhamento permite que os desenvolvedores escrevam em um formato mais conciso e agrupado que reduz a redundância.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Também é possível aninhar consultas de mídia, o que significa que você também pode aninhar consultas de contêiner. No exemplo a seguir, um card é mudado de um layout retrato para um paisagem se houver largura suficiente no contêiner:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

O ajuste de layout para flex ocorre quando o contêiner tem mais (ou igual a) 480px de espaço inline disponível. O navegador vai aplicar esse novo estilo de exibição quando as condições forem atendidas.

Para mais informações e exemplos, confira nossa postagem sobre encadeamento de CSS.

Camadas em cascata

Outro problema identificado para desenvolvedores é garantir a consistência de quais estilos prevalecem sobre outros. Uma parte da solução é ter mais controle sobre a cascata do CSS.

As camadas em cascata resolvem isso aos usuários controle sobre quais camadas têm uma precedência maior do que outras, o que significa um controle mais refinado de quando seus estilos são aplicados.

Saiba como usar camadas em cascata neste artigo.

CSS com escopo

Os estilos com escopo CSS permitem que os desenvolvedores especifiquem os limites em que estilos específicos são aplicados, criando essencialmente namespaces nativos em CSS. Antes, os desenvolvedores dependiam de scripts de terceiros para renomear classes ou convenções de nomenclatura específicas para evitar colisões de estilo, mas em breve será possível usar @scope.

Aqui, estamos definindo o escopo de um elemento .title para um .card. Isso evita que o elemento de título entre em conflito com outros elementos .title na página, como o título de uma postagem de blog ou outro cabeçalho.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

Confira @scope com limites de escopo e @layer nesta demonstração ao vivo:

Saiba mais sobre @scope na especificação css-cascade-6.

Funções trigonométricas

Outra parte da nova infraestrutura do CSS são as funções trigonométricas que estão sendo adicionadas às funções matemáticas do CSS. Essas funções agora estão estáveis em todos os navegadores modernos e permitem criar layouts mais orgânicos na plataforma da Web. Um ótimo exemplo é este layout de menu radial, que agora pode ser projetado e animado usando as funções sin() e cos().

Na demonstração abaixo, os pontos giram em torno de um ponto central. Em vez de girar cada ponto em torno do próprio centro e movê-lo para fora, cada ponto é transladado nos eixos X e Y. As distâncias nos eixos X e Y são determinadas considerando o cos() e, respectivamente, o sin() do --angle.

Consulte nosso artigo sobre funções trigonométricas para mais informações sobre o assunto.

Propriedades de transformação individuais

A ergonomia do desenvolvedor continua melhorando com funções de transformação individuais. Desde a última vez que realizamos o I/O, as transformações individuais se tornaram estáveis em todos os navegadores modernos.

Antes, você usava a função de transformação para aplicar subfunções e dimensionar, girar e traduzir um elemento da interface. Isso envolvia muita repetição e era especialmente frustrante ao aplicar várias transformações em momentos diferentes da animação.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

Agora, você pode ter todos esses detalhes nas suas animações CSS separando os tipos de transformações e aplicando-os individualmente.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

Assim, as mudanças na tradução, na rotação ou na escala podem acontecer simultaneamente em diferentes taxas de mudança em diferentes momentos durante a animação.

Consulte esta postagem sobre funções de transformação individuais para mais informações.

Componentes personalizáveis

Para garantir que estamos resolvendo algumas das principais necessidades dos desenvolvedores na plataforma da Web, estamos trabalhando com o grupo da comunidade OpenUI e identificamos três soluções para começar:

1. Funcionalidade pop-up integrada com manipuladores de eventos, uma estrutura DOM declarativa e padrões acessíveis.
2. Uma API CSS para vincular dois elementos e ativar o posicionamento de âncora.
3. Um componente de menu suspenso personalizável para quando você quer estilizar o conteúdo dentro de uma seleção.

Pop-up

A API popover oferece aos elementos uma mágica de suporte integrado ao navegador, como:

• Suporte para a camada superior, para que você não precise gerenciar z-index. Ao abrir um popover ou uma caixa de diálogo, você promove esse elemento para uma camada especial na parte de cima da página.
• Comportamento de rejeição leve para popovers sem custo financeiro em auto. Assim, quando você clica fora de um elemento, o popover é dispensado, removido da árvore de acessibilidade e o foco é gerenciado corretamente.
• Acessibilidade padrão para o tecido conjuntivo do destino do popover e do próprio popover.

Tudo isso significa que menos JavaScript precisa ser escrito para criar toda essa funcionalidade e rastrear todos esses estados.

A estrutura DOM do popover é declarativa e pode ser escrita de forma tão clara quanto dar ao elemento um id e o atributo popover. Em seguida, sincronize esse ID com o elemento que abriria o popover, como um botão com o atributo popovertarget:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover é uma forma abreviada de popover=auto. Um elemento com popover=auto vai fechar à força outros popovers quando aberto, receber foco quando aberto e pode ser dispensado com um toque. Por outro lado, os elementos popover=manual não forçam o fechamento de nenhum outro tipo de elemento, não recebem foco imediatamente e não são dispensados com um toque. Elas são fechadas com um botão de alternância ou outra ação de fechamento.

A documentação mais atualizada sobre popovers pode ser encontrada no MDN.

Posicionamento da âncora

Os popovers também são usados com frequência em elementos como caixas de diálogo e dicas, que geralmente precisam ser ancorados a elementos específicos. Confira este exemplo de evento. Quando você clica em um evento da agenda, uma caixa de diálogo aparece perto dele. O item da agenda é a âncora, e o popover é a caixa de diálogo que mostra os detalhes do evento.

É possível criar uma dica centralizada com a função anchor(), usando a largura da âncora para posicionar a dica em 50% da posição x da âncora. Em seguida, use os valores de posicionamento atuais para aplicar o restante dos estilos de posição.

Mas o que acontece se o popover não couber na janela de visualização com base na forma como você o posicionou?

Para resolver isso, a API de posicionamento de âncora inclui posições de substituição que podem ser personalizadas. O exemplo a seguir cria uma posição de substituição chamada "top-then-bottom". O navegador primeiro tenta posicionar a dica na parte de cima e, se ela não couber na janela de visualização, o navegador a posiciona abaixo do elemento de ancoragem, na parte de baixo.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Saiba mais sobre o posicionamento de âncora nesta postagem do blog.

<selectmenu>

Com o posicionamento de popover e âncora, é possível criar menus de seleção totalmente personalizáveis. O grupo da comunidade OpenUI está investigando a estrutura fundamental desses menus e procurando maneiras de permitir a personalização de qualquer conteúdo neles. Confira estes exemplos visuais:

Para criar o exemplo selectmenu mais à esquerda, com pontos coloridos correspondentes à cor que apareceria em um evento da agenda, escreva o seguinte:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Transições de propriedade discretas

Para que tudo isso faça a transição de popovers de forma suave, a Web precisa de uma maneira de animar propriedades discretas. Essas são propriedades que normalmente não eram animadas no passado, como animação para e da camada superior e animação para e de display: none.

Como parte do trabalho para ativar transições agradáveis em popovers, selectmenus e até mesmo elementos atuais, como caixas de diálogo ou componentes personalizados, os navegadores estão ativando novas funcionalidades para oferecer suporte a essas animações.

A demonstração de popover a seguir anima a entrada e saída de popovers usando :popover-open para o estado aberto, @starting-style para o estado antes de abrir e aplica um valor de transformação diretamente ao elemento para o estado depois de aberto e fechado. Para que tudo isso funcione com a exibição, é necessário adicionar à propriedade transition, assim:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Interações

O que nos leva às interações, a última parada neste tour pelos recursos da interface da Web.

Já falamos sobre a animação de propriedades discretas, mas também há algumas APIs muito interessantes chegando ao Chrome sobre animações controladas por rolagem e transições de visualização.

Animações de rolagem

Animações de rolagem permitem que você controle a reprodução de uma animação com base na posição de rolagem de um contêiner de rolagem. Isso significa que, conforme você rola para cima ou para baixo, a animação vai para frente ou para trás. Além disso, com as animações de rolagem, você também pode controlar uma animação de acordo com a posição de um elemento dentro do seu contêiner de rolagem. Assim, você cria efeitos interessantes, como uma imagem de fundo com efeito paralaxe, barras de rolagem de progresso e imagens que se revelam à medida que aparecem.

Essa API é compatível com um conjunto de classes JavaScript e propriedades CSS que permitem criar facilmente animações declarativas de rolagem.

Para acionar uma animação CSS por rolagem, use as novas propriedades scroll-timeline, view-timeline e animation-timeline. Para acionar uma API Web Animations JavaScript, transmita uma instância ScrollTimeline ou ViewTimeline como a opção timeline para Element.animate().

Essas novas APIs trabalham em conjunto com as APIs de animações da Web e de animações com CSS, o que significa que elas se beneficiam das vantagens dessas APIs. Isso inclui a capacidade de executar essas animações fora da linha de execução principal. Sim, você leu certo: agora é possível ter animações suaves e fluidas, impulsionadas pela rolagem, executadas fora da linha de execução principal, com apenas algumas linhas de código extra. Tem como não gostar?!

Para um guia detalhado sobre como criar essas animações controladas por rolagem, consulte este artigo.

Ver transições

A API View Transition facilita a mudança do DOM em uma única etapa, criando uma transição animada entre os dois estados. Podem ser fades simples entre visualizações, mas também é possível controlar como partes individuais da página devem fazer a transição.

As transições de visualização podem ser usadas como um aprimoramento progressivo: pegue o código que atualiza o DOM por qualquer método e encapsule-o na API View Transition com um fallback para navegadores que não oferecem suporte ao recurso.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

A aparência da transição é controlada por CSS

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Como demonstrado nesta demonstração incrível de Maxi Ferreira, outras interações da página, como um vídeo em reprodução, continuam funcionando enquanto uma transição de visualização está acontecendo.

As transições de visualização funcionam com apps de página única (SPAs) do Chrome 111. Estamos trabalhando para oferecer suporte a apps de várias páginas. Para mais informações, confira nosso guia completo de transições de visualização.

Conclusão

Acompanhe todas as novidades em CSS e HTML aqui mesmo, em developer.chrome.com, e confira os vídeos do I/O para mais novidades da Web.