Consultas de contêiner somente com nome CSS tornam-se linha de base

Com o lançamento do Chrome 148 este mês, consultas de contêiner somente nome agora estão disponíveis como linha de base recentemente.

Anteriormente, ao escrever uma consulta de contêiner, era necessário especificar uma condição de consulta de tamanho ou estilo junto com o nome do contêiner e estabelecer o tipo do contêiner com o container-type propriedade. Agora, você pode consultar a presença de um contêiner nomeado apenas pelo nome, sem qualquer condição adicional. Além disso, você não precisa mais definir um container-type no ancestral se você estiver consultando apenas por nome:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Consultas de estilo de contêiner para propriedades personalizadas tornam-se linha de base

Firefox 151 apresenta suporte para style() consultas sobre @containerdisponibilizando consultas de estilo de contêiner para propriedades personalizadas Linha de base recentemente.

As consultas de estilo de contêiner permitem aplicar estilos a elementos com base nas propriedades CSS de um contêiner pai. Embora as consultas de tamanho sejam extremamente poderosas, as consultas de estilo permitem consultar recursos sem tamanho. Em particular, esta versão traz suporte completo entre navegadores para consultar propriedades personalizadas. Por exemplo, você pode verificar se uma propriedade personalizada --theme está definido para dark em um contêiner pai:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Carregamento lento para elementos de vídeo e áudio

Chrome 148 apresenta nativo carregamento lento
para e elementos com o loading="lazy" atributo.

Assim como e elementos, agora você pode instruir o navegador para atrasar o carregamento dos recursos de mídia até que eles estejam próximos da janela de visualização. Isso ajuda a melhorar o desempenho do carregamento da página, economizar largura de banda e reduzir o uso de dados para seus usuários. Saiba mais com a equipe que implementou esse recurso em
Como usar o carregamento lento de vídeo e áudio em HTML padrão na Web hoje.

A API Picture-in-Picture do documento

Firefox 151 introduz suporte para a API Document Picture-in-Picture em plataformas desktop.

Ao contrário da API Picture-in-Picture padrão, que permite visualizar um
elemento em uma janela sempre visível, a API Document Picture-in-Picture permite abrir uma janela sempre visível contendo conteúdo HTML arbitrário. Isso permite sobreposições interativas avançadas, como grades de participantes de videoconferência, cotações de ações interativas ou cronômetros que persistem mesmo quando você sai da página.

API Web Serial expande suporte à plataforma

Firefox 151 adiciona suporte para o API serial da Web em plataformas de desktop, e o Chrome 148 adiciona suporte para Android.

A API Web Serial fornece uma maneira para sites lerem e gravarem em dispositivos seriais, por exemplo, microcontroladores, impressoras 3D, placas de desenvolvimento e hardware periférico. No Firefox, o uso da API Web Serial exige que os usuários instalem um complemento de permissão de site gerado sinteticamente, garantindo um mecanismo seguro e controlado para gerenciar o acesso.

Lançamentos de navegadores beta

As versões beta do navegador oferecem uma prévia dos recursos da próxima versão estável do navegador. É um ótimo momento para testar novos recursos, ou remoções, que podem impactar seu site antes que o mundo receba esse lançamento. Novos betas este mês são
Cromo 149 e Firefox 152. Não há Safari beta este mês.

O Chrome 149 beta inclui atualizações CSS interessantes, como decorações de lacunas CSS, permitindo estilizar os espaços em branco (lacunas) entre itens flexíveis e de grade. Também suporta path() e shape() assim como rect() e xywh() funções básicas de forma no shape-outside propriedade, e path-length como uma propriedade CSS. No lado da API, métodos de rolagem programática como scrollTo(),
scrollBy()e scrollIntoView() agora retornam promessas resolvidas quando a rolagem suave é concluída, e páginas com conexões WebSocket ativas agora podem se qualificar para cache de avanço/retorno (BFCache).

Firefox 152 beta apresenta suporte completo para o field-sizing propriedade, que permite que os controles de formulário ajustem automaticamente seu tamanho para caber em seu conteúdo. Também acrescenta actions e maxActions propriedades para o Notification
interface, e options.pseudoElement suporte em Element.getAnimations().