Resumo do CSS: 2023

Resumo do CSS: 2023

Pular para o conteúdo:

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

• Tipografia
• Letra inicial
• Text-wrap balance/pretty

• 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
• Conferir transições
• Função de transição 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. No Chrome, temos suporte a animações de rolagem somente 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 oferecem 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 de 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. Usando a microsintaxe An+B, você tem controle preciso sobre quais elementos selecionar.

Por padrão, os pseudos :nth-*() consideram todos os elementos filhos. A partir do Chrome 111, você pode transmitir uma lista de seletores para :nth-child() e :nth-last-child(). Assim, você pode pré-filtrar a lista de filhos antes que An+B faça sua função.

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 os elementos à 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 @scope para limitar o alcance dos seus seletores". Neste artigo, você vai aprender sobre o seletor :scope, como a especificidade é processada, escopos sem Prelude 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 de conteúdo 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 de copy, redatores de UX e tradutores da tentativa de criar cópias de projeto 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

A propriedade initial-letter, lançada no início do ano no Chrome 110, é um recurso CSS pequeno, mas poderoso, que define o estilo para a colocação de letras iniciais. É possível posicionar as letras em um estado rebaixado ou elevado. A propriedade aceita dois argumentos: o primeiro para definir a profundidade de inserção da letra no parágrafo correspondente e o segundo para definir a altura da letra acima dele. 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 observar a mudança.

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 do 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 quebra de texto, uma chamada balance e a 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 manualmente, e é incrível poder delegar o trabalho ao navegador e fazer com que ele funcione para 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. Tente traduzir 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 novos espaços de cores e funções que permitem a aplicação de temas dinâmicos, não há nada que impeça você de criar os temas vívidos e exuberantes que seus usuários merecem e também 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 do Color 4

Demonstração do Color 4

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. Tente traduzir 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.

Screencast de color-mix()

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 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 a color-mix() para criar variantes de cores. 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 luminosidade e a capacidade de usar calc() no canal para reduzir ou aumentar a luminosidade de forma programática.

Screencast do RCS

Demonstração ao vivo do RCS

Mude a cor, mude as cenas. Cada uma usa a sintaxe de cor 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 oferece ferramentas significativas para temas, variantes just in time e muito mais.

Saiba mais sobre a sintaxe de cores relativa.

Design responsivo

O design responsivo evoluiu em 2023. Esse ano inovador trouxe novos recursos que mudaram completamente a forma como criamos experiências da Web responsivas e introduziu 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 elemento pai, bem como a presença ou o estado de qualquer elemento filho. 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.

Consultas de tamanho do 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 ter estilo de forma 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 definir o tamanho do cabeçalho do card.

Screencast do @container

@container Demo

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

Consultas de contêineres de estilo

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, é 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 o uso de consultas de estilo.

Seletor:has()

Compatibilidade com navegadores

• 105
• 105
• 121
• 15.4

Origem

Por quase 20 anos, os desenvolvedores pediram um "seletor pai" no CSS. Com o seletor :has() enviado 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()

Demo de :has() do CSS: Dock

Saiba mais sobre o seletor :has() do 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. Leitores de e-books e dispositivos como sistemas de pagamento de baixa potência podem ter uma taxa de atualização lenta. Saber que o dispositivo não pode processar animações ou atualizações frequentes significa que você pode economizar o uso da bateria ou atualizações de visualização com falhas.

Atualizar o screencast

Demonstração de atualizaçã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 o @media (atualização).

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 o 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 de scripting

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 dores de cabeça ou ser uma dificuldade visual para vários tipos de deficiência visual. É por isso que o Windows, o macOS e o iOS têm preferências do 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 com transparência reduzida

Demonstração de transparência reduzida

Em alguns casos, é possível fornecer um layout alternativo que não tenha conteúdo sobreposto a outro. 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 é um dos pilares 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.

Conferir 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 o CSS, é possível controlar o que é capturado e personalizar como esses snapshots serão animados.

VT Screencast

Demonstração de VT

Assista à demonstração de transições

A API View Transitions para aplicativos de uma página foi lançada no Chrome 111. Saiba mais sobre as Transições de visualização.

Função de transição linear

Compatibilidade com navegadores

• 113
• 113
• 112
• 17.2

Não se deixe enganar pelo nome dessa função. A função linear(), que não deve ser confundida 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 suavizaçã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 pertencente ao 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. Conforme você rola para cima e para baixo ou para a esquerda e direita em um controle deslizante horizontal, a animação vinculada avança e retrocede em resposta direta.

Com uma ScrollTimeline, é possível acompanhar o progresso geral de um scroller, conforme demonstrado na demonstração a seguir. Conforme você rola até o fim da página, o texto aparece 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 forma semelhante à maneira 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.

SDA Demo Screencast

Demonstração ao vivo do SDA

Demonstração de animações de rolagem 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 dessas APIs. 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 cronograma adiado

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 de linha do tempo adiada

Saiba mais sobre timeline-scope.

Animações de propriedades discretas

Outro novo recurso em 2023 é a capacidade de animar animações discretas, como a animação de e para display: none. No Chrome 116 e versões mais recentes, é possível usar display e content-visibility nas regras de keyframe. Também é possível 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.

Discrete Anim. 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 display: none e display: none. Essa regra oferece uma maneira de dar a um elemento um estilo "antes da abertura" que o navegador pode 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 vai voltar imediatamente a ser cortado, transformado e coberto, e você não vai notar a transição. Da mesma forma, overlay permite que ::backdrop seja animado sem problemas quando adicionado a um elemento da camada superior.

Screencast de sobreposição

Demonstração ao vivo da sobreposição

Saiba mais sobre sobreposições 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 usar outras bibliotecas ou criar seus próprios sistemas de gerenciamento de estado do zero.

Popover

Compatibilidade com navegadores

• 114
• 114
• 125
• 17

Origem

A API Popover ajuda a criar elementos que ficam sobre o restante 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 fecha o pop-up e retorna o foco.
• Vinculação de componentes acessível. 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 em 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>) a elementos <select> para ajudar a dividir visualmente o conteúdo. Antes, colocar uma tag <hr> em um item de seleção simplesmente não renderizava. Mas, este ano, o Safari e o Chrome oferecem suporte a esse recurso, permitindo uma melhor separação do conteúdo nos 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 name formam um grupo semântico. No máximo, um elemento do grupo pode estar 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 de acordeão exclusivo

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 sem custo financeiro Aprenda CSS e os outros cursos sem custo financeiro 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 em seu trabalho em breve.

⇾ Equipe do DevRel da interface do Chrome

Una Kravets

Bramus

Adam Argyle