Novidades do Chrome 105

Pete LePage

Veja o que é necessário saber:

Meu nome é Pete LePage. Vamos conhecer as novidades para desenvolvedores no Chrome 105.

Consultas de contêiner e a propriedade CSS :has()

Um dos recursos mais solicitados foi o Chrome 105. Eles permitem que os desenvolvedores consultem um seletor pai para conferir as informações de tamanho e estilo. Assim, um elemento filho pode assumir a lógica de estilo responsivo, independentemente de onde ele está na página.

São semelhantes a uma consulta @media, com a diferença de que avaliam o tamanho de um contêiner em vez do tamanho da janela de visualização.

Consulta de contêiner x consulta de mídia.

Para usar consultas de contêiner, é necessário definir a contenção em um elemento pai. Por exemplo, você pode ter um card com imagem e texto.

Cartão único de duas colunas.

Para criar uma consulta de contêiner, defina container-type no contêiner do card. Definir container-type como inline-size consulta o tamanho inline-direction do pai.

.card-container {
  container-type: inline-size;
}

Agora, podemos usar esse contêiner para aplicar estilos a qualquer um dos filhos usando @container.

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Nesse caso, quando o container tiver menos de 400 px, ele mudará para um layout de coluna única.

Pseudoclasse :has() CSS

Podemos ir além com a pseudoclasse :has() do CSS. Ela permite verificar se um elemento pai contém filhos com parâmetros específicos.

Por exemplo, p:has(span) indica um seletor de parágrafo com um período dentro dele. Você pode usar isso para estilizar o próprio parágrafo pai ou qualquer elemento dentro dele. Ou você pode usar figure:has(figcaption) para estilizar um elemento de figura que contenha uma legenda.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

Confira o artigo de Una @container and :has(): duas novas APIs responsivas poderosas para ver uma explicação mais detalhada e algumas demonstrações divertidas.

API Sanitizer

A maioria dos apps da Web costuma lidar com strings não confiáveis, mas renderizar com segurança esse conteúdo pode ser complicado. Sem o cuidado necessário, é fácil criar acidentalmente oportunidades de vulnerabilidades de scripting em vários sites.

Há bibliotecas como o DomPurify que ajudam, mas criam uma pequena carga de manutenção. A API HTML Sanitizer ajuda a reduzir o número de vulnerabilidades de scripting em vários locais criando a limpeza na plataforma.

Para usá-lo, crie uma nova instância do Limpador. Em seguida, chame setHTML() no elemento em que você quer inserir o conteúdo limpo.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

A API Sanitizer foi projetada para ser segura por padrão e personalizável, permitindo que você especifique diferentes opções de configuração, por exemplo, descartando alguns elementos ou permitindo outros.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

Confira Manipulação segura de DOM com a API Sanitizer para mais detalhes.

Suspensão do uso do Web SQL para contextos não seguros

Há algum tempo, anunciamos nossos planos de suspender o uso do Web SQL. A partir do Chrome 105, o Web SQL será descontinuado em contextos não seguros.

Se você estiver usando o Web SQL em contextos não seguros, migre para o IndexDB ou outro contêiner de armazenamento local o quanto antes.

E muito mais.

Claro, há muito mais.

  • Agora é possível atualizar o nome de um PWA instalado em computadores e dispositivos móveis atualizando o manifesto do app da Web.
  • A API de posicionamento de janelas em várias telas recebe rótulos precisos de nome de tela.
  • A API de sobreposição de controles de janela já está disponível. Ele permite que os PWAs proporcionem uma aparência mais semelhante ao app, trocando a barra de título de largura total atual por uma pequena sobreposição. Isso permite que você coloque conteúdo personalizado na área da barra de título.

Leia mais

Esses são apenas alguns dos principais destaques. Verifique os links abaixo para ver outras mudanças no Chrome 105.

Fazer inscrição

Para ficar por dentro, inscreva-se no canal do YouTube para desenvolvedores do Chrome. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e assim que o Chrome 106 for lançado, estaremos aqui para dizer as novidades do Chrome.