No Google I/O, compartilhei notícias sobre como o valor de referência evoluiu desde nosso anúncio na I/O do ano passado. Também anunciei o Painel da Web Platform, as integrações com o RUM Archive e a futura integração com o RUMvision. Esta postagem reúne todos os recursos da palestra em um só lugar.
O Web Platform Dashboard é uma maneira nova e empolgante de visualizar toda a plataforma da Web e a jornada de recursos individuais até a interoperabilidade, se tornando parte da referência. Saiba mais em Anúncio do painel da plataforma da Web.
Integrar a referência com as ferramentas que você usa todos os dias sempre fez parte da visão deste projeto. Queremos que você não precise gastar muito tempo pensando na compatibilidade com os navegadores. Saiba mais sobre a integração RUM Archive e acesse este espaço para conferir notícias sobre mais provedores de ferramentas em breve.
Novo na referência
Na I/O, compartilhei 12 recursos da plataforma da Web que se tornaram parte do
valor de referência recém-disponível. Esses recursos agora estão disponíveis no Chrome, Edge,
Firefox e Safari e variam de pequenas adições que podem agilizar
o desenvolvimento a alguns dos recursos mais procurados pelos desenvolvedores, incluindo
consultas de contêiner e :has().
Tamanho das consultas de contêiner
As consultas de contêiner de tamanho permitem mudar o design com base na largura ou no tamanho inline de um contêiner, em vez de apenas segmentar o tamanho da janela de visualização com consultas de mídia. Isso permite componentes mais reutilizáveis, que podem se modificar com base no espaço disponível quando colocados em um layout. Eles estão no topo da lista de recursos mais procurados há quase todo o tempo do conceito de design responsivo.
- Recurso disponível em fevereiro de 2023.
- Disponível para todos os usuários em agosto de 2025.
Saiba mais sobre consultas de contêiner no MDN em As consultas de contêineres chegam em navegadores estáveis e descubra como outras equipes de desenvolvimento estão se beneficiando delas nos estudos de caso de consultas de contêiner.
Seletor de :has()
O seletor :has() oferece algo que tem sido outra solicitação principal
dos desenvolvedores há muitos anos: um seletor pai, uma maneira de selecionar um elemento
com base no que está dentro dele. No entanto, :has() pode ser muito mais do que isso.
Assim como as consultas de contêiner, isso é incrivelmente útil ao criar componentes reutilizáveis, já que você pode criar um único componente que pode se adaptar ao que ele contém.
- O recurso será lançado em dezembro de 2023.
- Disponível para todos os usuários em junho de 2026.
Saiba mais sobre :has() no MDN,
no seletor de família :has()
e nos estudos de caso do :has().
Subgrade de layout de grade CSS
A subgrade permite que um layout de grade aninhado herde as faixas do pai. Isso permite um melhor alinhamento de itens dentro de grades aninhadas.
- O recurso será lançado em dezembro de 2023.
- Disponível para todos os usuários em junho de 2026.
Saiba mais sobre a subgrade no MDN e na subgrade CSS, que se vincula a um grande número de outros recursos.
Transição de CSS
Nos últimos anos, o CSS se inspirou nos recursos que os desenvolvedores usavam em pré-processadores, como o Sass. Por exemplo, as propriedades personalizadas de CSS, geralmente conhecidas como variáveis CSS, são um recurso amplamente disponível que permite que variáveis, como cores, sejam definidas em um só lugar e usadas em todo o CSS, algo que antes só estava disponível quando um pré-processador era usado.
Outro recurso dos pré-processadores é o Nesting. O aninhamento ajuda a evitar a repetição de seletores e facilita a legibilidade do CSS, porque itens relacionados podem ser agrupados com mais facilidade.
- Disponível para agosto de 2023
- Disponível para todos os usuários em fevereiro de 2026
Saiba mais sobre aninhamento de CSS no MDN e em aninhamento de CSS.
O elemento HTML <search>
A pesquisa é algo que aparece em muitos sites e aplicativos. No entanto, até recentemente, não havia elemento de marcação usado para pesquisa ou filtragem em uma página. O elemento <search> foi criado para
essa finalidade. Ele existe como um elemento dentro do qual você pode colocar um formulário de pesquisa ou outros elementos usados para filtrar resultados.
- Lançamento em outubro de 2023
- Disponível para todos em abril de 2026
Saiba mais sobre o elemento <search> no MDN.
Vídeo responsivo
Esse recurso se refere à capacidade de usar o elemento <source> dentro de um
elemento <video> para veicular vídeos de tamanho apropriado em dispositivos diferentes,
da mesma forma que é possível veicular imagens de tamanhos variados.
- Lançamento em novembro de 2023
- Disponível para todos em maio de 2026
Saiba mais sobre o MDN no elemento "Media or Image Source" e em Como usar vídeos responsivos.
O atributo inert
Quando um elemento é inerte, não é possível interagir com ele. Por exemplo, ao abrir uma caixa de diálogo, os elementos que estão na página atrás dela não podem ser clicados ou posicionados. O atributo "inert" oferece uma maneira de controlar a inerência em qualquer parte da interface.
Quando o atributo inert é aplicado a um elemento, os eventos de clique não são disparados
se ele é clicado, não recebe foco, o elemento e
o conteúdo dele ficam ocultos para tecnologias adaptativas, já que são excluídos
da árvore de acessibilidade.
- Lançamento em abril de 2023
- Disponível para todos em outubro de 2025
Saiba mais sobre inerte no MDN e também em O atributo inert (links em inglês).
A função color-mix()
A função color-mix() permite a mistura de uma cor para outra, em qualquer
espaço de cor disponível, incluindo todos os novos modelos de cores (LCH, Lab,
OKLCH e OKLab) que recentemente se tornaram parte do valor de referência recém-disponível.
- Lançamento em abril de 2023
- Disponível para todos em outubro de 2025
Saiba mais sobre color-mix() no MDN
e em CSS color-mix().
Também temos um enorme Guia de cores CSS de alta definição
que abrange todos os novos modelos de cores disponíveis no CSS. Além disso,
confira gradient.style, para testar essas novas
cores e criar belos gradientes.
:user-valid e :user-invalid
As pseudoclasses :valid e :invalid estão amplamente disponíveis nos navegadores e indicam se um elemento de formulário é válido ou inválido de acordo com qualquer regra de restrição. Portanto, se você tiver um campo
com um tipo de e-mail e ele contiver um nome, a pseudoclasse :invalid
o selecionará e você poderá adicionar uma cor ou ícone para demonstrar que ele precisa
ser corrigido.
O problema com as pseudoclasses :valid e :invalid é que elas
se aplicam antes da interação do usuário com um formulário. Portanto, se um elemento
de formulário for obrigatório e o usuário ainda não tiver preenchido, seu estilo
inválido será exibido. Normalmente, você só quer mostrar o estilo inválido quando um usuário digita algo incorretamente ou pulou um campo e o deixa em branco.
Para melhorar a experiência do usuário nessa situação, use as pseudoclasses :user-valid e
:user-invalid. Eles se comportam praticamente da mesma forma,
exceto quando são correspondentes apenas quando um usuário interage com o campo. Portanto, no
exemplo de um campo obrigatório, o usuário precisa ter tabulado ou clicado
no campo e se afastado sem completá-lo para que o campo
mostre o estado inválido.
- Lançamento em outubro de 2023
- Disponível para todos em abril de 2026
Saiba mais sobre :user-valid
e :user-invalid
no MDN.
Streams de compactação
Muitos aplicativos da Web precisam fornecer um download ao usuário em um formato compactado, como um arquivo ZIP. Antigamente, isso exigia que o aplicativo incluísse uma biblioteca de compactação, um código que aumentava o tamanho do aplicativo para todos os usuários. A API Compression Streams oferece uma maneira integrada de compactar um fluxo de dados.
- Lançamento em maio de 2023
- Disponível para todos em novembro de 2025
Saiba mais sobre a API Compression Streams no MDN e em Streams de compactação agora são compatíveis com todos os navegadores.
O DOM de sombra declarativo
O Shadow DOM declarativo é uma nova maneira de criar uma árvore paralela no HTML. Antes, só era possível criar uma árvore paralela usando JavaScript usando attachShadow(). Fazer isso pelo HTML é muito útil em ambientes em que o JavaScript não é executado, como um cliente de e-mail. Ela
também é importante para componentes da Web renderizados no lado do servidor.
- Lançamento em fevereiro de 2024
- Disponível para todos em agosto de 2026
Saiba mais sobre o DOM shadow declarativo.
A API Popover
Os pop-ups são usados para diversas tarefas nos nossos aplicativos da Web. Por exemplo, menus, notificações de aviso personalizadas e seletores de conteúdo. Agora há uma maneira integrada de criar esses pop-ups de maneira decorativa com a API Popover.
- Lançamento em abril de 2024
- Disponível para todos em outubro de 2026
Saiba mais sobre a API Popover no MDN, a API Popover chega ao valor de referência e nos estudos de caso da Popover.
Esses 12 recursos são apenas alguns dos recursos que se tornaram parte do valor de referência recém-disponível. Confira mais informações neste site. Conheça todos os recursos que fizeram parte do Baseline 2023 e a crescente coleção de recursos que fazem parte do Baseline 2024.