Resumo do CSS: 2023
Ir para o conteúdo:
- 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
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.
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
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.
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.
Saiba mais sobre seleções nth-* complexas.
Escopo
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
![Captura de tela de referência da demonstração do @scope Captura de tela de referência da demonstração do @scope](https://developer.chrome.com/static/blog/css-wrapped-2023/image/at-scope.png?authuser=6&hl=pt)
Demonstração ao vivo do escopo
@scope
do CSSSaiba 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
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
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
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
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
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
![Captura de tela da demonstração da letra inicial](https://developer.chrome.com/static/blog/css-wrapped-2023/image/initial-letter.png?authuser=6&hl=pt)
Demonstração da letra inicial
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
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)
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
Saiba mais sobre a Cor 4 e espaços de cor.
função color-mix
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()
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
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
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
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
![Captura de tela de demonstração dos cards de clima das consultas de contêiner de estilo](https://developer.chrome.com/static/blog/css-wrapped-2023/image/stylecq.png?authuser=6&hl=pt)
Demonstração de consulta de estilo
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()
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()
![Captura de tela de referência da demonstração de :has() Captura de tela de referência da demonstração de :has()](https://developer.chrome.com/static/blog/css-wrapped-2023/image/has-demo-1.png?authuser=6&hl=pt)
:has() Demonstração ao vivo
:has()
do CSS: cartão sem/com imagemComo :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()
:has()
de CSS: dockSaiba mais sobre o seletor :has()
de CSS.
Atualizar consulta de mídia
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
Saiba mais sobre @media (update).
Consulta de mídia de script
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
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
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
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.
linear()
usa esses pontos e interpola linearmente entre eles.Screencast com easing linear
Demonstração de easing linear
linear()
do CSS.Saiba mais sobre linear()
. Para criar curvas linear()
, use o gerador de easing linear.
Fim da rolagem
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
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
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
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
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-se apenas à rolagem de 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 completamente 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.
![Visualização de uma subárvore do DOM com escopo de linha do tempo usado em um pai compartilhado Visualização de uma subárvore do DOM com escopo de linha do tempo usado em um pai compartilhado](https://developer.chrome.com/static/blog/css-wrapped-2023/image/defferedtimeline.png?authuser=6&hl=pt)
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
.Screencast de demonstração
Demonstração ao vivo
Saiba mais sobre timeline-scope
.
Animações de propriedades diferenciadas
Outro novo recurso lançado em 2023 é a possibilidade de animar 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
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
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)
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
![captura de tela da seleção com um tema claro e escuro no Chrome](https://developer.chrome.com/static/blog/css-wrapped-2023/image/hrselect.jpg?authuser=6&hl=pt)
Selecionar "Demonstração ao vivo"
Saiba mais sobre como usar hr in select.
:Pseudoclasses válidas pelo usuário e inválidas
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
- x
- 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.
Os elementos <details>
que fazem parte de um acordeão exclusivo não precisam necessariamente ser irmãos. Eles podem estar espalhados pelo documento.
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,