Resumo do CSS: 2023

Resumo do CSS: 2023

Ir para o conteúdo:

• Fundamentos da arquitetura
• Funções trigonométricas
• Seleção complexa de enésima-*
• Escopo
• Transição

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

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

• Design responsivo
• Consultas de contêiner
• Estilizar consultas
• :tem seletor
• Atualizar consulta de mídia
• Consulta de mídia de script
• Consulta de mídia de transparência

• Interação
• Ver transições
• Função de easing linear
• Rolarend
• Animações de rolagem
• Anexo de cronograma adiado
• Transições distintas de propriedade
• Regra de estilo inicial
• Animação de sobreposição

• Componentes
• Pop-over (link em inglês)
• Hr in select
• Pseudoclasses válidas pelo usuário/inválidas
• Acordeão exclusivo

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

Da #Interop2023 a várias novas oportunidades no espaço de CSS e interface, os desenvolvedores de recursos que antes pensavam ser impossíveis na plataforma da Web, também podem aproveitar os recursos disponíveis. Agora, todos os navegadores modernos oferecem suporte a consultas de contêiner, subgrade, o seletor :has() e uma infinidade de novos espaços de cor e funções. O Chrome é compatível com animações de rolagem somente em CSS e animações suaves entre visualizações da Web com transições de visualização. E, para completar, muitos novos primitivos foram criados para melhorar as experiências dos desenvolvedores, como aninhamento de CSS e estilos com escopo.

Que ano foi esse! Por isso, gostaríamos de encerrar este ano importante comemorando e reconhecendo todo o trabalho árduo dos desenvolvedores de navegadores e da comunidade da Web que tornou tudo isso possível.

Procure os novos selos de referência ao lado dos cabeçalhos do recurso. Saiba mais.

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

• = disponibilidade parcial nos principais navegadores.

Fundamentos arquitetônicos

Vamos começar com atualizações da linguagem e dos recursos principais do CSS. Esses são recursos que são fundamentais para a maneira como você cria e organiza estilos e dão grande poder às mãos do 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(), disponibilizando-as em todos os principais mecanismos. Essas funções são muito úteis para fins de animação e layout. Por exemplo, agora é 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 enésima-*

Compatibilidade com navegadores

• 111
• 111
• 113
• 9

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

Por padrão, os pseudos :nth-*() consideram todos os elementos filhos. A partir do Chrome 111, você tem a opção de 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, pré-filtrando-as com of .small. Use os menus suspensos para mudar dinamicamente o seletor usado.

Demonstração de seleção de enésima* complexa

Saiba mais sobre seleções nth-* complexas.

Escopo

Compatibilidade com navegadores

• 118
• 118
• 
• 17,4

Origem

O Chrome 118 adicionou suporte a @scope, uma regra que permite que você faça a correspondência do seletor de escopo com uma subárvore específica do documento. Com a estilização com escopo, você pode especificar com muita precisão quais elementos seleciona sem ter que criar seletores muito específicos ou associá-los à estrutura do DOM.

Uma 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 inseridas em um bloco de escopo segmentam apenas elementos da subárvore gerada. Por exemplo, a regra de estilo com escopo a seguir segmenta apenas os elementos <img> que estão entre o elemento .card e qualquer componente aninhado correspondente ao seletor [data-component].

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

Na demonstração a seguir, não há correspondência com os elementos <img> no componente carrossel devido ao limite de escopo aplicado.

Captura de tela da demonstração do escopo

Demonstração ao vivo do escopo

Demonstração @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.

Transição

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, folha de estilo em massa e uma experiência de criação esparsa. Agora, os seletores podem continuar 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 */
}

Aninhamento do Screencast

Demonstração ao vivo do Nesting

Mudar o seletor de aninhamento flexível 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 estilos de componentes. A sintaxe foi lançada inicialmente com uma limitação que exigia o uso de & em vários locais, mas foi removida com uma atualização de sintaxe relaxada de aninhamento.

Saiba mais sobre o aninhamento.

Subgrade

Compatibilidade com navegadores

• 117
• 117
• 71,00
• 16

Origem

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

Screencast da subgrade

Demonstração ao vivo do Subgrid

O cabeçalho, o corpo e os rodapés se alinham aos tamanhos dinâmicos dos irmãos.

A subgrade é especialmente útil para alinhar irmãos ao conteúdo dinâmico uns dos outros. Isso evita que redatores, escritores de UX e tradutores tentem criar uma cópia do projeto que "se encaixe" no layout. Com a subgrade, o layout pode ser ajustado de acordo com o conteúdo.

Saiba mais sobre a subgrid.

Tipografia

A tipografia da Web passou por algumas atualizações importantes em 2023. Um aprimoramento progressivo especialmente bom é a propriedade text-wrap. Essa propriedade permite o ajuste de layout tipográfico, composto no navegador sem a necessidade de scripts adicionais. Diga adeus ao comprimento estranho das linhas e aproveite a 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. É possível até fazer uma combinação dos dois, como na demonstração a seguir.

Captura de tela com a letra inicial

Demonstração da letra inicial

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

Saiba mais sobre a letra inicial.

text-wrap: equilíbrio e beleza

Como desenvolvedor, você não sabe o tamanho final, o tamanho da fonte ou 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 sabe todos os fatores, como tamanho da fonte, idioma e área alocada, ele é um ótimo candidato 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 uma hifenização saudável. 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 texto

Demonstração ao vivo sobre ajuste de texto

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 ajuste de texto: saldo.

Cor

2023 foi o ano das cores para a plataforma Web. Com os novos espaços de cor e funções que permitem a aplicação de temas de cores dinâmicos, nada impede que você crie 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 até as luzes piscando pode ser necessário muito trabalho para nossos computadores tentarem representar cores tão boas quanto nossos olhos humanos conseguem enxergar. Em 2023, temos mais cores, novos espaços de cor, funções de cor e novos recursos.

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

Screencast em cor 4

Demonstração da Cor 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 a Cor 4 e espaços de cor.

função color-mix

Compatibilidade com navegadores

• 111
• 111
• 113
• 16,2

Origem

Misturar cores é uma tarefa clássica e, em 2023, o CSS também poderá fazer isso. Você pode não apenas misturar branco ou preto em uma cor, mas também transparência, e fazer tudo isso em qualquer espaço de cor de sua escolha. É ao mesmo tempo um recurso de cor básico e um avançado.

color-mix() Screencast

Demonstração de color-mix()

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

Pense na color-mix() como um momento no tempo de um gradiente. Enquanto um gradiente mostra todas as etapas necessárias para mudar de azul para branco, color-mix() mostra apenas uma etapa. As coisas ficam avançadas quando você começa a levar em conta os espaços de cor e aprende como o espaço de cor de mistura pode ser diferente nos 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. É um pouco mais eficiente 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 RCS

Demonstração ao vivo do RCS

Mude a cor, mude a cena. Cada um usa uma sintaxe de cor relativa para criar variantes com base na cor de 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 brilho e o modifica com calc(). Uma mudança absoluta é aquela em que você substitui um valor de canal por um totalmente novo, como definir a opacidade como 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 um estilo responsivo e lógico com base no tamanho do pai, bem como na presença ou no estado de qualquer um dos filhos. Isso significa que você pode finalmente 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 seu componente em qualquer lugar.

Dimensionar consultas de contêiner

Compatibilidade com navegadores

• 105
• 105
• 110
• 16

Origem

Em vez de usar as informações globais de tamanho da janela de visualização para aplicar estilos CSS, as consultas de contêiner dão suporte à consulta de um elemento pai na página. Isso significa que os componentes podem ser estilizados de modo dinâmico em vários layouts e visualizações. As consultas de contêiner por tamanho se tornaram 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, assim como em uma consulta de mídia, use @container com os parâmetros de tamanho para aplicar os estilos. Junto com as consultas de contêiner, você recebe os tamanhos das consultas de contêiner. 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

Demonstração do @container

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

Estilizar consultas de contêiner

Compatibilidade com navegadores

• 111
• 111
• x
• 18

Origem

Consultas de estilo chegaram com a 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 como 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 a cena. Cada um usa uma sintaxe de cor relativa para criar variantes com base na cor de 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 as consultas de estilo, é possível atualizar o valor no CSS conforme necessário para pseudoestados. Além disso, em versões futuras da implementação, você poderá consultar intervalos de valores para determinar o estilo aplicado, como style(60 <= --weather <= 70), e o estilo com base em pares de propriedade-valor, 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 pai" no CSS. Com o seletor :has() incluído no Chrome 105, isso agora é possível. Por exemplo, usar .card:has(img.hero) selecionará os elementos .card que têm uma imagem principal como filho.

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

:has() Demonstração ao vivo

Demonstração :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. Com o uso de vários combinadores CSS, é possível não apenas subir na árvore do DOM, mas também fazer seleções laterais. Por exemplo, li:has(+ li:hover) selecionará o elemento <li> que precede o elemento <li> que está passando o cursor no momento.

:has() Screencast

Demonstração :has()

Demonstração :has() de 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 em relação às capacidades de diferentes dispositivos.

A maioria dos dispositivos para os quais você projeta provavelmente terá 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

Simule (escolhendo uma das opções) um valor de velocidade de atualização como isso afeta o pato.

Saiba mais sobre @media (update).

Consulta de mídia de script

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. 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 com o Chrome DevTools.

Screencast sobre script

Demonstração de script

Considere a troca de tema em um site. A consulta de mídia de script pode ajudar a fazer essa mudança funcionar de acordo com a preferência do sistema, já que nenhum JavaScript está disponível. Ou considere usar um componente de chave: se o JavaScript estiver disponível, a chave poderá ser deslizada com um gesto, em vez de apenas ativada e desativada. Há muitas oportunidades para atualizar a UX se o script estiver disponível e, ao mesmo tempo, fornecer uma experiência de base significativa se ele estiver desativado.

Saiba mais sobre script.

Consulta de mídia de 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, ao mesmo tempo, faça ajustes 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 se tornar opaca ou quase opaca. A postagem de blog a seguir tem demonstrações mais inspiradoras que se adaptam às preferências dos usuários. Dê uma olhada caso tenha 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 no que clicaram e onde estão em um espaço virtual. Este ano, foram lançados muitos recursos interessantes que tornaram as interações mais fáceis de compor e implementar, permitindo uma jornada do usuário tranquila e uma experiência na Web mais refinada.

Ver 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, você pode criar transições visuais entre dois estados de página do seu aplicativo de página única. Essas transições podem ser de página inteira ou menores em uma página, como adicionar ou remover um novo item de uma lista.

No centro da API View Transitions está a função document.startViewTranstion. Transmita uma função que atualize o DOM para o novo estado, e a API cuidará de tudo para você. Para isso, ele cria um snapshot de 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.

Screencast de VT

Demonstração de VT

Ver a demonstração das transições

A API View Transitions para aplicativos de página única fornecidos no Chrome 111. Saiba mais sobre transições de visualização.

Função de easing linear

Compatibilidade com navegadores

• 113
• 113
• 112
• 17,2

Não se engane 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 easing complexas de maneira simples, com o risco de perda de precisão.

Antes do linear(), que foi incluído no Chrome 113, era impossível criar efeitos de mola ou pulos no CSS. Graças a linear(), é possível aproximar esses easings simplificando-os em uma série de pontos e, em seguida, interpolando linearmente entre esses pontos.

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

Screencast com easing linear

Demonstração de easing linear

Demonstração linear() do CSS.

Saiba mais sobre linear(). Para criar curvas linear(), use o gerador de easing 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 disparado enquanto o dedo do usuário ainda estava na tela. Com o evento scrollend, você tem um evento de fim de rolagem perfeitamente programado que entende se um usuário ainda está no meio do gesto ou não.

Screencast de rolagem

Demonstração de rolagem

Isso era importante para o navegador, porque o JavaScript não consegue rastrear a presença de dedos na tela durante uma rolagem, e as informações simplesmente não estão disponíveis. Partes do código de tentativa de rolagem final impreciso agora podem ser excluídos e substituídos por um evento de alta precisão pertencente ao navegador.

Saiba mais sobre o scrollend.

Animações de rolagem

Compatibilidade com navegadores

• 115
• 115
• 
• x

Origem

Animações de rolagem são um recurso interessante disponível no Chrome 115. Eles permitem combinar uma animação CSS ou criada com a API Web Animations ao deslocamento de rolagem de um botão. À 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 de SDA

Demonstração de SDA

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

Com uma ViewTimeline, você pode acompanhar um elemento enquanto ele cruza a janela de rolagem. Isso funciona de maneira semelhante à forma como o IntersectionObserver rastreia um elemento. Na demonstração a seguir, cada imagem é revelada do momento em que entra na janela de rolagem até chegar ao centro.

Screencast de demonstração de SDA

Demonstração ao vivo de SDA

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

Como as animações de rolagem funcionam com animações CSS e a API Web Animations, você pode se beneficiar de todas as vantagens dessas APIs. Isso inclui a capacidade de executar essas animações na linha de execução principal. Agora você pode ter animações suaves, impulsionadas por rolagem, sendo executadas fora da linha de execução principal com apenas algumas linhas de código extra. Por que você não gosta disso?

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

Anexo de cronograma adiado

Compatibilidade com navegadores

• 116
• 116
• x
• x

Origem

Ao aplicar uma animação de rolagem usando CSS, o mecanismo de pesquisa para encontrar o botão de rolagem de controle sempre sobe na árvore do DOM, limitando-o a rolar somente os ancestrais. Muitas vezes, no entanto, o elemento que precisa ser animado não é um filho do botão de rolagem, mas um elemento localizado em uma 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, aumentando o escopo. Com isso definido, qualquer filho desse pai compartilhado poderá usar a linha do tempo com esse nome.

Com a timeline-scope declarada no pai compartilhado, a scroll-timeline declarada no botão de rolagem pode ser encontrada pelo elemento que a usa como animation-timeline.

Screencast de demonstração

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, é possível usar display e content-visibility nas regras de frame-chave. Você também pode fazer a transição de qualquer propriedade discreta no ponto de 50% em vez de 0%. Isso pode ser feito com a propriedade transition-behavior usando a palavra-chave allow-discrete ou na propriedade transition como uma abreviação.

Animação discreta. Screencast

Animação discreta. Demonstração

Saiba mais sobre a transição de animações discretas.

@starting-style

Compatibilidade com navegadores

• 117
• 117
• 129
• 17,5

Origem

A regra CSS @starting-style se baseia em novos recursos da Web para animações de e para display: none. Esta regra fornece uma maneira de dar a um elemento uma tag "antes de abrir" estilo que o navegador pode procurar antes que o elemento seja aberto na página. Isso é muito útil para animações de entrada e para elementos como pop-over ou caixas de diálogo. Também pode ser útil sempre que você estiver criando um elemento e quiser permitir a animação. Confira o exemplo a seguir, que anima um atributo popover (consulte a próxima seção) para a visualização e para a camada superior suavemente de fora da janela de visualização.

@Starting de Screencast

@starting-style demo

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

Sobreposição

Compatibilidade com navegadores

• 117
• 117
• x
• x

Origem

A nova propriedade CSS overlay pode ser adicionada à transição para permitir que elementos com estilos da camada superior, como popover e dialog, saiam da camada superior suavemente. 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 de sobreposição

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

Componentes

2023 foi um grande ano para a combinação de componentes de estilo e HTML, com a chegada do popover e muito trabalho sendo feito em relação ao posicionamento de âncoras e ao futuro dos menus suspensos de estilo. 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.

Pop-over (link em inglês)

Compatibilidade com navegadores

• 114
• 114
• 125
• 17

Origem

A API Popover ajuda você a criar elementos sobrepostos ao resto da página. Podem incluir menus, seleção e dicas de ferramentas. É possível criar um pop-over 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 suporta:

• Promoção para a camada superior. Os pop-ups aparecerão em uma camada separada, acima do resto da página, para que você não precise mexer no Z-index.
• Funcionalidade de dispensa simples. Clicar fora da área do pop-up vai fechá-lo e retornar o foco.
• Gerenciamento de foco padrão. Abrir o pop-over faz a próxima guia parar dentro dele.
• Vinculações de teclado acessíveis. Pressionar a tecla esc ou alternar duas vezes fechará o pop-over e retornará o foco.
• Vinculações de componentes acessíveis. Conectar um elemento pop-over a um acionador pop-over semanticamente.

Screencast pop-over

Demonstração ao vivo da Popover

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. Anteriormente, colocar uma tag <hr> em um select simplesmente não seria renderizado. 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

Selecionar "Demonstração ao vivo"

Saiba mais sobre como usar hr in select.

:Pseudoclasses válidas pelo usuário e inválidas

Compatibilidade com navegadores

• 119
• 119
• 88
• 16,5

Origem

Estável em todos os navegadores este ano, :user-valid e :user-invalid se comportam de maneira semelhante às pseudoclasses :valid e :invalid, mas só correspondem a um controle de formulário depois que um usuário interagiu significativamente com a entrada. Um controle de formulário obrigatório e vazio corresponderá a :invalid mesmo que o usuário não tenha começado a interagir com a página. O mesmo controle não 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ódigos com estado para acompanhar as entradas alteradas pelo usuário.

:user-* Screencast

:user-* Demonstração ao vivo

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

Acordeão 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, você combina alguns elementos <details>, geralmente agrupando-os visualmente para indicar que pertencem juntos.

Uma novidade do Chrome 120 é o suporte ao atributo name nos 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 de uma só vez: quando você abre um dos elementos <details> do grupo, o que antes estava aberto será fechado automaticamente. Esse tipo de acordeão é chamado acordeão exclusivo.

Demonstração exclusiva do acordeão

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

Conclusão

O CSS teve um renascimento nos últimos anos, principalmente em 2023. Se você é iniciante no CSS ou quer apenas relembrar os conceitos básicos, confira nosso curso sem custo financeiro Conheça o CSS, além de outros cursos sem custo financeiro disponíveis em web.dev.

Desejamos boas festas de fim de ano e esperamos que em breve você tenha a chance de incorporar alguns desses novos recursos brilhantes de CSS e interface ao seu trabalho!

⇾ Equipe de desenvolvimento da interface do Chrome,

Una Kravets

Bramus

Adam Argyle