Resumo do CSS: 2023

Resumo do CSS: 2023

Ir para o conteúdo:

• Bases da arquitetura
• Funções trigonométricas
• Seleção complexa de n-ésima*
• Escopo
• Aninhamento

• Tipografia
• Letra inicial
• Equilíbrio/alinhamento de texto

• Cor
• Nível de cor 4
• Função de mistura de cores
• Sintaxe de cor relativa

• Design responsivo
• Consultas de contêiner
• Consultas de estilo
• :has selector
• Atualizar consulta de mídia
• Scripting media query
• Consulta de mídia de transparência

• Interação
• Ver transições
• Função de easing linear
• Scrollend
• Animações com rolagem
• Anexo de cronograma adiado
• Transições de propriedades discretas
• Regra de estilo inicial
• Animação de sobreposição

• Componentes
• Popover
• Hora em seleção
• Pseudoclasses válidas/inválidas do usuário
• Accordion exclusivo

Uau! 2023 foi um ano incrível para o CSS!

De #Interop2023 a muitas novas páginas de destino no espaço de CSS e interface que permitem recursos que os desenvolvedores consideravam impossíveis na plataforma da Web. Agora, todos os navegadores modernos oferecem suporte a consultas de contêiner, subgrade, o seletor :has() e uma infinidade de novos espaços de cores e funções. O Chrome é compatível com animações de rolagem exclusivas do CSS e animações suaves entre visualizações da Web com transições de visualização. Além disso, há muitas primitivas novas para melhorar a experiência do desenvolvedor, como o anilhamento de CSS e os estilos com escopo.

Que ano! Por isso, gostaríamos de encerrar este ano de marco celebrando e reconhecendo todo o trabalho árduo dos desenvolvedores de navegadores e da comunidade da Web que tornaram tudo isso possível.

Confira os novos selos de referência ao lado dos cabeçalhos dos recursos. Saiba mais.

• = disponível em todas as versões estáveis dos principais navegadores.

• = disponibilidade parcial nos principais navegadores.

Bases da arquitetura

Vamos começar com as atualizações da linguagem e dos recursos principais do CSS. Esses recursos são fundamentais para criar e organizar estilos e dão muito poder ao desenvolvedor.

Funções trigonométricas

Compatibilidade com navegadores

• 111
• 111
• 108
• 15,4

Origem

O Chrome 111 adicionou suporte às funções trigonométricas sin(), cos(), tan(), asin(), acos(), atan() e atan2(), deixando-as disponíveis em todos os principais mecanismos. Essas funções são muito úteis para animação e layout. Por exemplo, agora ficou muito mais fácil posicionar elementos em um círculo ao redor de um centro escolhido.

Demonstração das funções trigonométricas

Saiba mais sobre as funções trigonométricas no CSS.

Seleção complexa de n-ésima*

Compatibilidade com navegadores

• 111
• 111
• 113
• 9

Com o seletor de pseudoclasse :nth-child(), é possível selecionar elementos no DOM pelo índice deles. Com a microssintaxe An+B, você tem um controle preciso sobre os elementos que quer selecionar.

Por padrão, os pseudos :nth-*() consideram todos os elementos filhos. A partir do Chrome 111, é possível transmitir uma lista de seletores para :nth-child() e :nth-last-child(). Dessa forma, é possível pré-filtrar a lista de filhos antes que An+B faça isso.

Na demonstração a seguir, a lógica 3n+1 é aplicada apenas às bonecas pequenas, com uma pré-filtragem usando of .small. Use os menus suspensos para mudar dinamicamente o seletor usado.

Demonstração de seleção de n-ésima* complexa

Saiba mais sobre seleções complexas de n-ésima*.

Escopo

Compatibilidade com navegadores

• 118
• 118
• 
• 17.4

Origem

O Chrome 118 adicionou suporte a @scope, uma regra at que permite que você defina a correspondência do seletor para um subárvore específica do documento. Com o estilo de escopo, você pode ser muito específico sobre quais elementos selecionar sem precisar escrever seletores muito específicos ou acoplar a estrutura do DOM.

Um subárvore com escopo é definida por uma raiz de escopo (o limite superior) e um limite de escopo opcional (o limite inferior).

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

As regras de estilo colocadas em um bloco de escopo só vão segmentar elementos dentro do subárvore gerada. Por exemplo, a regra de estilo com escopo a seguir tem como alvo apenas os elementos <img> que ficam entre o elemento .card e qualquer componente aninhado correspondido pelo seletor [data-component].

@scope (.card) to ([data-component]) {
  img { … }
}

Na demonstração a seguir, os elementos <img> no componente do carrossel não são correspondidos devido ao limite de escopo aplicado.

Captura de tela da demonstração do escopo

Demonstração ao vivo do Scope

Demonstração de @scope do CSS

Saiba mais sobre @scope no artigo "Como usar o @scope para limitar o alcance dos seus seletores". Neste artigo, você vai aprender sobre o seletor :scope, como a especificidade é tratada, escopos sem prelúdio e como a cascata é afetada por @scope.

Aninhamento

Compatibilidade com navegadores

• 120
• 120
• 117
• 17.2

Origem

Antes do aninhamento, cada seletor precisava ser declarado explicitamente, separadamente um do outro. Isso leva à repetição, ao volume de folhas de estilo e a uma experiência de criação dispersa. Agora, os seletores podem ser continuados com regras de estilo relacionadas agrupadas.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

Screencast de anidamento

Demonstração ao vivo de aninhamento

Mudar o seletor de aninhamento relaxado para decidir o vencedor da corrida

O aninhamento pode reduzir o peso de uma folha de estilo, reduzir a sobrecarga de seletores repetidos e centralizar os estilos de componentes. A sintaxe foi lançada inicialmente com uma limitação que exigia o uso de & em vários lugares, mas foi suspensa com uma atualização da sintaxe relaxada de aninhamento.

Saiba mais sobre anilhamento.

Subgrades

Compatibilidade com navegadores

• 117
• 117
• 71
• 16

Origem

O CSS subgrid permite criar grades mais complexas com melhor alinhamento entre os layouts filhos. Ele permite que uma grade dentro de outra adote as linhas e colunas da grade externa como próprias, usando subgrid como um valor para linhas ou colunas de grade.

Screencast do Subgrid

Demonstração ao vivo da Subgrid

Cabeçalho, corpo e rodapés são alinhados aos tamanhos dinâmicos dos irmãos.

A subgrade é especialmente útil para alinhar elementos irmãos ao conteúdo dinâmico um do outro. Isso libera redatores, redatores de UX e tradutores da tentativa de criar cópias de projetos que "se encaixem" no layout. Com a subgrade, o layout pode ser ajustado para se ajustar ao conteúdo.

Saiba mais sobre a subgrade.

Tipografia

A tipografia da Web teve algumas atualizações importantes em 2023. Um aprimoramento progressivo especialmente bom é a propriedade text-wrap. Essa propriedade permite o ajuste do layout tipográfico, composto no navegador sem a necessidade de scripts adicionais. Diga adeus aos comprimentos de linha desajeitados e dê as boas-vindas a uma tipografia mais previsível.

Letra inicial

Compatibilidade com navegadores

• 110
• 110
• x
• 9

Origem

Chegando no início do ano no Chrome 110, a propriedade initial-letter é um recurso de CSS pequeno, mas eficiente, que define o estilo da colocação das letras iniciais. Você pode posicionar letras em um estado caído ou em relevo. A propriedade aceita dois argumentos: o primeiro para o quanto a letra é solta no parágrafo correspondente e o segundo para o quanto ela deve levantar a letra acima dela. Você pode até combinar os dois, como na demonstração a seguir.

Captura de tela da primeira letra

Demonstração de letra inicial

Mude os valores de initial-letter para o pseudoelemento ::first-letter para que ele mude.

Saiba mais sobre letra-inicial.

text-wrap: balance and pretty

Como desenvolvedor, você não sabe o tamanho final, o tamanho da fonte ou até mesmo o idioma de um título ou parágrafo. Todas as variáveis necessárias para um tratamento eficaz e estético de ajuste de texto estão no navegador. Como o navegador conhece todos os fatores, como tamanho da fonte, idioma e área alocada, ele é uma ótima opção para lidar com layouts de texto avançados e de alta qualidade.

É aqui que entram duas novas técnicas de ajuste de texto, uma chamada balance e outra pretty. O valor balance busca criar um bloco de texto harmonioso, enquanto pretty busca evitar órfãos e garantir a divisão de palavras adequada. Tradicionalmente, essas duas tarefas são feitas à mão, e é incrível dar esse trabalho ao navegador e fazê-lo funcionar em qualquer idioma traduzido.

Screencast de ajuste de texto

Demonstração ao vivo de quebra de texto

Na demonstração a seguir, você pode comparar, arrastando o controle deslizante, os efeitos de balance e pretty em um título e um parágrafo. Traduza a demonstração para outro idioma.

Saiba mais sobre text-wrap: balance.

Cor

2023 foi o ano das cores para a plataforma da Web. Com os novos espaços de cores e funções que permitem a aplicação de temas dinâmicos, nada impede você de criar os temas vívidos e exuberantes que seus usuários merecem, além de torná-los personalizáveis.

Espaços de cores em HD (nível de cor 4)

Compatibilidade com navegadores

• 111
• 111
• 113
• 15

Origem

Compatibilidade com navegadores

• 111
• 111
• 113
• 15

Origem

Do hardware ao software, do CSS às luzes piscando, pode ser muito trabalhoso para os computadores tentarem representar as cores tão bem quanto os olhos humanos. Em 2023, temos novas cores, mais cores, novos espaços de cores, funções de cores e novos recursos.

O CSS e a cor agora podem: - Verificar se o hardware da tela do usuário é compatível com cores HDR de ampla gama. - Verifique se o navegador do usuário entende a sintaxe de cores, como Oklch ou Display P3. - Especifique cores HDR em Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ e muito mais. - Crie gradientes com cores HDR; - Interpole gradientes em espaços de cores alternativos. - Misture cores com color-mix(). - Crie variantes de cor com sintaxe de cor relativa.

Screencast em cor 4

Demonstração do Color 4

Na demonstração a seguir, você pode fazer uma comparação arrastando o controle deslizante e os efeitos de "balance" e "pretty" em um cabeçalho e um parágrafo. Traduza a demonstração para outro idioma.

Saiba mais sobre Color 4 e espaços de cor.

Função de mistura de cores

Compatibilidade com navegadores

• 111
• 111
• 113
• 16.2

Origem

Misturar cores é uma tarefa clássica, e o CSS 2023 também pode fazer isso. Você pode misturar branco ou preto com uma cor, mas também pode usar transparência, e tudo isso em qualquer espaço de cores que você escolher. Ele é um recurso de cor básico e avançado ao mesmo tempo.

color-mix() Screencast

Demonstração de color-mix()

A demonstração permite escolher duas cores com um seletor de cores, o espaço de cores e a quantidade de cada cor que deve ser dominante na mistura.

Pense em color-mix() como um momento no tempo de um gradiente. Enquanto um gradiente mostra todas as etapas necessárias para ir do azul ao branco, o color-mix() mostra apenas uma etapa. As coisas ficam mais avançadas quando você começa a considerar os espaços de cores e aprende como a mistura de espaços de cores pode ser diferente para os resultados.

Saiba mais sobre color-mix().

Sintaxe de cor relativa

A sintaxe de cor relativa (RCS, na sigla em inglês) é um método complementar à color-mix() para criar variantes de cor. Ele é um pouco mais poderoso do que color-mix(), mas também é uma estratégia diferente para trabalhar com cores. O color-mix() pode misturar a cor branca para clarear uma cor, em que o RCS oferece acesso preciso ao canal de brilho e a capacidade de usar calc() no canal para reduzir ou aumentar o brilho de forma programática.

Screencast do RCS

Demonstração ao vivo do RCS

Mude a cor, mude a cena. Cada uma usa a sintaxe de cores relativa para criar variantes da cor base.

O RCS permite realizar manipulações relativas e absolutas em uma cor. Uma mudança relativa é aquela em que você pega o valor atual de saturação ou luminosidade e o modifica com calc(). Uma mudança absoluta é quando você substitui um valor de canal por um totalmente novo, como definir a opacidade em 50%. Essa sintaxe fornece ferramentas significativas para aplicação de temas, apenas em variantes de tempo e muito mais.

Saiba mais sobre a sintaxe de cores relativas.

Design responsivo

O design responsivo evoluiu em 2023. Este ano revolucionário possibilitou novos recursos que mudaram totalmente a maneira como construímos experiências Web responsivas e inaugurou um novo modelo de design responsivo baseado em componentes. A combinação de consultas de contêiner e :has() oferece suporte a componentes que têm estilos responsivos e lógicos com base no tamanho do pai, bem como a presença ou o estado de qualquer um dos filhos. Isso significa que você pode separar o layout no nível da página do layout no nível do componente e escrever a lógica uma vez para usar o componente em todos os lugares.

Dimensionar consultas de contêiner

Compatibilidade com navegadores

• 105
• 105
• 110
• 16

Origem

Em vez de usar as informações de tamanho global da viewport para aplicar estilos CSS, as consultas de contêiner oferecem suporte à consulta de um elemento pai na página. Isso significa que os componentes podem ser estilizados de maneira dinâmica em vários layouts e visualizações. As consultas de contêiner para tamanho ficaram estáveis em todos os navegadores modernos no Dia dos Namorados deste ano (14 de fevereiro).

Para usar esse recurso, primeiro configure a contenção no elemento que você está consultando e, em seguida, semelhante a uma consulta de mídia, use @container com os parâmetros de tamanho para aplicar os estilos. Além das consultas de contêiner, você também tem os tamanhos delas. Na demonstração a seguir, o tamanho da consulta do contêiner cqi (que representa o tamanho do contêiner inline) é usado para dimensionar o cabeçalho do cartão.

Screencast do @container

@container Demo

Saiba mais sobre o uso de consultas de contêiner.

Estilizar consultas de contêiner

Compatibilidade com navegadores

• 111
• 111
• x
• 18

Origem

As consultas de estilo foram lançadas com implementação parcial no Chrome 111. Com as consultas de estilo atualmente, é possível consultar o valor de propriedades personalizadas em um elemento pai ao usar @container style(). Por exemplo, consulte se um valor de propriedade personalizada existe ou está definido para um determinado valor, como @container style(--rain: true).

Captura de tela da consulta de estilo

Demonstração de consulta de estilo

Mude a cor, mude as cenas. Cada uma usa a sintaxe de cor relativa para criar variantes da cor base.

Embora isso pareça semelhante ao uso de nomes de classe no CSS, as consultas de estilo têm algumas vantagens. A primeira é que, com consultas de estilo, você pode atualizar o valor no CSS conforme necessário para pseudoestados. Além disso, em versões futuras da implementação, será possível consultar intervalos de valores para determinar o estilo aplicado, como style(60 <= --weather <= 70), e o estilo com base em pares de valor de propriedade, como style(font-style: italic).

Saiba mais sobre como usar consultas de estilo.

Seletor:has()

Compatibilidade com navegadores

• 105
• 105
• 121
• 15.4

Origem

Por quase 20 anos, os desenvolvedores pediram um "seletor principal" no CSS. Com o seletor :has() incluído no Chrome 105, isso agora é possível. Por exemplo, o uso de .card:has(img.hero) vai selecionar os elementos .card que têm uma imagem principal como filho.

Captura de tela da demonstração de :has()

:has() Demonstração ao vivo

Demonstração de :has() do CSS: cartão sem/com imagem

Como :has() aceita uma lista de seletores relativos como argumento, é possível selecionar muito mais do que o elemento pai. Usando vários combinatores de CSS, é possível não apenas subir na árvore do DOM, mas também fazer seleções laterais. Por exemplo, li:has(+ li:hover) vai selecionar o elemento <li> que precede o elemento <li> que está com o cursor.

Screencast :has()

Demonstração de :has()

Demonstração :has() do CSS: Dock

Saiba mais sobre o seletor :has() de CSS.

Atualizar consulta de mídia

Compatibilidade com navegadores

• 113
• 113
• 102
• 17

Origem

A consulta de mídia update oferece uma maneira de adaptar a interface à taxa de atualização de um dispositivo. O recurso pode informar um valor de fast, slow ou none, que se relaciona aos recursos de diferentes dispositivos.

A maioria dos dispositivos para os quais você projeta provavelmente tem uma taxa de atualização rápida. Isso inclui computadores e a maioria dos dispositivos móveis. e-readers e dispositivos como sistemas de pagamento de baixa potência, podem ter uma taxa de atualização lenta. Saber que o dispositivo não suporta animações ou atualizações frequentes, significa que você pode economizar o uso da bateria ou atualizações de visualização com defeito.

Atualizar o screencast

Atualizar demonstração

Selecione uma opção de círculo para simular um valor de velocidade de atualização e ver como ele afeta o pato.

Saiba mais sobre @media (update).

Scripting media query

Compatibilidade com navegadores

• 120
• 120
• 113
• 17

Origem

A consulta de mídia de script pode ser usada para verificar se o JavaScript está disponível ou não. Isso é muito bom para o aprimoramento progressivo. Antes dessa consulta de mídia, uma estratégia para detectar se o JavaScript estava disponível era colocar uma classe nojs no HTML e removê-la com JavaScript. Esses scripts podem ser removidos, já que o CSS agora tem uma maneira de detectar o JavaScript e fazer os ajustes necessários.

Saiba como ativar e desativar o JavaScript em uma página para testes usando o Chrome DevTools.

Screencast sobre scripts

Demonstração de script

Considere uma troca de tema em um site. A consulta de mídia de script pode ajudar a fazer a troca funcionar com a preferência do sistema, já que nenhum JavaScript está disponível. Ou considere um componente de chave: se o JavaScript estiver disponível, a chave poderá ser deslizada com um gesto em vez de apenas ativar e desativar. Há muitas oportunidades de melhorar a UX se o script estiver disponível, além de oferecer uma experiência de base significativa se o script estiver desativado.

Saiba mais sobre o script.

Consulta de mídia com transparência reduzida

Compatibilidade com navegadores

• 118
• 118
• 
• x

Origem

Interfaces não opacas podem causar dor de cabeça ou ser uma dificuldade visual para vários tipos de deficiência visual. É por isso que o Windows, macOS e iOS têm preferências de sistema que podem reduzir ou remover a transparência da interface. Essa consulta de mídia para prefers-reduced-transparency se encaixa bem com as outras consultas de mídia de preferência, que permitem que você seja criativo e ajuste para os usuários.

Screencast de transparência reduzida

Demonstração de transparência reduzida

Em alguns casos, você pode fornecer um layout alternativo que não tenha conteúdo sobreposto a outros. Em outros casos, a opacidade de uma cor pode ser ajustada para ser opaca ou quase opaca. A postagem do blog a seguir tem mais demonstrações inspiradoras que se adaptam à preferência do usuário. Confira se você tem curiosidade sobre os momentos em que essa consulta de mídia é valiosa.

Saiba mais sobre @media (prefers-reduced-transparency).

Interação

A interação é a base das experiências digitais. Ele ajuda os usuários a receber feedback sobre o que clicaram e onde estão em um espaço virtual. Este ano, lançamos muitos recursos incríveis que facilitaram a criação e a implementação de interações, permitindo jornadas de usuário tranquilas e uma experiência na Web mais refinada.

Visualizar transições

Compatibilidade com navegadores

• 111
• 111
• x
• 18

Origem

As transições de visualização têm um grande impacto na experiência do usuário em uma página. Com a API View Transitions, é possível criar transições visuais entre dois estados de página do seu aplicativo de página única. Essas transições podem ser de páginas inteiras ou menores, como adicionar ou remover um item de uma lista.

A função document.startViewTranstion é o núcleo da API View Transitions. Transmita uma função que atualize o DOM para o novo estado, e a API cuida de tudo para você. Para isso, ele tira um snapshot antes e depois e faz a transição entre os dois. Usando CSS, você pode controlar o que é capturado e, opcionalmente, personalizar como esses instantâneos devem ser animados.

VT Screencast

Demonstração de VT

Demo de transições de visualização

A API View Transitions para apps de uma só página foi lançada no Chrome 111. Saiba mais sobre transições de visualização.

Função de transição linear

Compatibilidade com navegadores

• 113
• 113
• 112
• 17.2

Não se engane pelo nome dessa função. A função linear() (não confundir com a palavra-chave linear) permite criar funções de transição complexas de maneira simples, com a perda de precisão.

Antes do linear(), que foi lançado no Chrome 113, era impossível criar efeitos de salto ou mola no CSS. Graças a linear(), é possível aproximar essas transições simplificando-as em uma série de pontos e, em seguida, interpolando linearmente entre esses pontos.

A curva de rejeição original em azul é simplificada por um conjunto de pontos-chave mostrados em verde. A função linear() usa esses pontos e faz uma interpolação linear entre eles.

Screencast de transição linear

Demonstração de transição linear

Demonstração de linear() do CSS.

Saiba mais sobre linear(). Para criar curvas linear(), use o gerador de transição linear.

Fim da rolagem

Compatibilidade com navegadores

• 114
• 114
• 109
• x

Origem

Muitas interfaces incluem interações de rolagem e, às vezes, a interface precisa sincronizar informações relevantes para a posição de rolagem atual ou buscar dados com base no estado atual. Antes do evento scrollend, era necessário usar um método de tempo limite impreciso que podia ser acionado enquanto o dedo do usuário ainda estava na tela. Com o evento scrollend, você tem um evento de fim de rolagem com o tempo perfeito que entende se um usuário ainda está no meio do gesto ou não.

Screencast do Scrollend

Demonstração de rolagem

Isso era importante para o navegador porque o JavaScript não pode rastrear a presença de um dedo na tela durante a rolagem. A informação simplesmente não está disponível. Partes de código de tentativa de final de rolagem impreciso agora podem ser excluídas e substituídas por um evento de alta precisão do navegador.

Saiba mais sobre scrollend.

Animações com rolagem

Compatibilidade com navegadores

• 115
• 115
• 
• x

Origem

As animações movidas por rolagem são um recurso interessante disponível no Chrome 115. Elas permitem que você pegue uma animação em CSS ou uma animação criada com a API Web Animations e a combine com o deslocamento de rolagem de um scroller. À medida que você rola para cima e para baixo ou para a esquerda e para a direita em um botão de rolagem horizontal, a animação vinculada vai deslizar para frente e para trás em resposta direta.

Com um ScrollTimeline, você pode acompanhar o progresso geral de um botão, conforme demonstrado na demonstração a seguir. Conforme você rola até o final da página, o texto se revela caractere por caractere.

Screencast do SDA

Demonstração do SDA

Demonstração de animações de rolagem do CSS: linha do tempo de rolagem

Com uma ViewTimeline, é possível acompanhar um elemento à medida que ele cruza o scrollport. Isso funciona de maneira semelhante à forma como o IntersectionObserver rastreia um elemento. Na demonstração a seguir, cada imagem é revelada desde o momento em que entra no scrollport até chegar ao centro.

Screencast de demonstração do SDA

Demonstração ao vivo do SDA

Demonstração de animações de rolagem do CSS: visualizar a linha do tempo

Como as animações de rolagem funcionam com animações CSS e a API Web Animations, você pode aproveitar todas as vantagens que essas APIs oferecem. Isso inclui a capacidade de executar essas animações fora da linha de execução principal. Agora você pode ter animações suaves, controladas por rolagem, na linha de execução principal com apenas algumas linhas de código extra. O que não gostar?

Para saber mais sobre animações com rolagem, confira este artigo com todos os detalhes ou acesse scroll-driven-animations.style, que inclui muitas demonstrações.

Anexo de linha do tempo adiada

Compatibilidade com navegadores

• 116
• 116
• x
• x

Origem

Ao aplicar uma animação de rolagem pelo CSS, o mecanismo de pesquisa para encontrar o controle de rolagem sempre percorre a árvore do DOM, o que a limita apenas aos ancestrais de rolagem. No entanto, muitas vezes, o elemento que precisa ser animado não é filho do scroller, mas um elemento localizado em um subárvore totalmente diferente.

Para permitir que o elemento animado encontre uma linha do tempo de rolagem nomeada de um não ancestral, use a propriedade timeline-scope em um pai compartilhado. Isso permite que o scroll-timeline ou view-timeline definido com esse nome seja anexado a ele, a ele um escopo mais amplo. Com isso, qualquer filho desse pai compartilhado pode usar a linha do tempo com esse nome.

Com timeline-scope declarado no pai compartilhado, o scroll-timeline declarado no botão de rolagem pode ser encontrado pelo elemento que o usa como animation-timeline

Demo Screencast

Demonstração ao vivo

Demonstração de animações de rolagem do CSS: anexo da linha do tempo adiado

Saiba mais sobre timeline-scope.

Animações de propriedades diferenciadas

Outro recurso novo lançado em 2023 é a animação de animações discretas, como animações de e para display: none. No Chrome 116 e versões mais recentes, é possível usar display e content-visibility nas regras de keyframe. Você também pode fazer a transição de qualquer propriedade discreta no ponto de 50% em vez de 0%. Isso é feito com a propriedade transition-behavior usando a palavra-chave allow-discrete ou na propriedade transition como uma abreviação.

Animação discreta. Screencast

Discrete Anim. Demonstração

Saiba mais sobre como fazer transições de animações discretas.

@starting-style

Compatibilidade com navegadores

• 117
• 117
• 129
• 17,5

Origem

A regra CSS @starting-style usa novos recursos da Web para animar de e para display: none. Essa regra fornece uma maneira de dar a um elemento um estilo "antes de abrir" que o navegador possa procurar antes que o elemento seja aberto na página. Isso é muito útil para animações de entrada e para animar elementos como um pop-up ou uma caixa de diálogo. Ele também pode ser útil sempre que você estiver criando um elemento e quiser dar a ele a capacidade de animar. Confira o exemplo a seguir, que anima um atributo popover (consulte a próxima seção) na visualização e na camada de cima de forma suave, fora da viewport.

Screencast @starting-style

Demonstração de @starting-style

Saiba mais sobre @starting-style e outras animações de entrada.

Overlay

Compatibilidade com navegadores

• 117
• 117
• x
• x

Origem

A nova propriedade CSS overlay pode ser adicionada à transição para permitir que elementos com estilos de camada superior, como popover e dialog, sejam animados de forma suave. Se você não fizer a transição da sobreposição, o elemento voltará imediatamente a ser recortado, transformado e coberto, e a transição não acontecerá. Da mesma forma, overlay permite que o ::backdrop seja animado suavemente quando adicionado a um elemento da camada superior.

Screencast de sobreposição

Demonstração ao vivo da sobreposição

Saiba mais sobre a sobreposição e outras animações de saída.

Componentes

2023 foi um ano importante para a interseção de estilo e componentes HTML, com a página de destino popover e muito trabalho em torno do posicionamento de âncora e do futuro do estilo de menus suspensos. Esses componentes facilitam a criação de padrões de interface comuns sem a necessidade de depender de outras bibliotecas ou de criar seus próprios sistemas de gerenciamento de estado do zero a cada vez.

Popover

Compatibilidade com navegadores

• 114
• 114
• 125
• 17

Origem

A API Popover ajuda você a criar elementos sobrepostos ao resto da página. Isso pode incluir menus, seleção e dicas. É possível criar um pop-up simples adicionando o atributo popover e um id ao elemento que aparece e conectando o atributo id a um botão de invocação usando popovertarget="my-popover". A API Popover oferece suporte a:

• Promoção para a camada superior. Os pop-ups vão aparecer em uma camada separada acima do restante da página, para que você não precise mexer no z-index.
• Funcionalidade de dispensação leve. Clicar fora da área do pop-up fecha o pop-up e retorna o foco.
• Gerenciamento de foco padrão. Abrir o pop-up faz com que a próxima guia pare dentro dele.
• Vinculação de teclado acessível. Pressionar a tecla esc ou alternar duas vezes fechará o pop-over e retornará o foco.
• Vinculações de componentes acessíveis. Conexão semântica de um elemento de pop-up a um gatilho de pop-up.

Screencast do pop-up

Demonstração ao vivo do pop-up

Regras horizontais na seleção

Outra pequena mudança no HTML que chegou ao Chrome e ao Safari este ano é a capacidade de adicionar elementos de regra horizontal (tags <hr>) em elementos <select> para ajudar a dividir visualmente seu conteúdo. Antes, colocar uma tag <hr> em um elemento de seleção simplesmente não renderizava. Neste ano, o Safari e o Chrome serão compatíveis com esse recurso, permitindo uma melhor separação de conteúdo em elementos <select>.

Selecionar captura de tela

Selecione "Demonstração ao vivo"

Saiba mais sobre como usar a linha horizontal em opções.

: pseudoclasses válidas e inválidas do usuário

Compatibilidade com navegadores

• 119
• 119
• 88
• 16,5

Origem

Estável em todos os navegadores este ano, o :user-valid e o :user-invalid se comportam de maneira semelhante às pseudoclasses :valid e :invalid, mas correspondem a um controle de formulário somente depois que um usuário interage significativamente com a entrada. Um controle de formulário obrigatório e vazio vai corresponder a :invalid, mesmo que o usuário não tenha começado a interagir com a página. O mesmo controle não vai corresponder a :user-invalid até que o usuário mude a entrada e a deixe em um estado inválido.

Com esses novos seletores, não é mais necessário escrever código com estado para acompanhar a entrada que um usuário mudou.

:user-* Screencast

:user-* Demonstração ao vivo

Saiba mais sobre o uso de pseudoelementos de validação de formulário user-*.

Accordion exclusivo

Compatibilidade com navegadores

• 120
• 120
• 130
• 17.2

Um padrão de interface comum na Web é um componente de acordeão. Para implementar esse padrão, combine alguns elementos <details>, geralmente agrupando-os visualmente para indicar que eles pertencem ao mesmo grupo.

O Chrome 120 tem suporte ao atributo name em elementos <details>. Quando esse atributo é usado, vários elementos <details> com o mesmo valor de name formam um grupo semântico. No máximo, um elemento do grupo pode ser aberto por vez. Quando você abre um dos elementos <details> do grupo, o elemento aberto anteriormente é fechado automaticamente. Esse tipo de acordeão é chamado de acordeão exclusivo.

Demonstração exclusiva do accordion

Os elementos <details> que fazem parte de um acordeão exclusivo não precisam ser irmãos. Elas podem estar espalhadas pelo documento.

Conclusão

O CSS teve um renascimento nos últimos anos, especialmente em 2023. Se você não conhece o CSS ou quer relembrar os conceitos básicos, confira nosso curso gratuito Aprenda CSS e os outros cursos gratuitos disponíveis no web.dev.

Desejamos a você um ótimo fim de ano e esperamos que você tenha a chance de incorporar alguns desses novos recursos incríveis de CSS e interface no seu trabalho em breve.

⇾ Equipe de desenvolvimento da interface do Chrome,

Una Kravets

Bramus

Adam Argyle