Novidades do Chrome 105

Pete LePage

Veja o que é necessário saber:

Meu nome é Pete LePage. Vamos nos aprofundar e confira as novidades para desenvolvedores no Chrome 105.

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

As consultas de contêiner, um dos recursos mais solicitados, estão chegando Chrome 105 Eles permitem que os desenvolvedores consultem um seletor pai para seu tamanho e informações de estilo, possibilitando que um elemento filho seja o proprietário do lógica de estilo responsivo, não importa onde ela esteja na página.

Elas são semelhantes a uma consulta @de mídia, mas avaliam o tamanho do um contêiner em vez do tamanho da janela de visualização.

Consulta de contêiner versus consulta de mídia

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

Cartão único de duas colunas.

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

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

Agora, podemos usar esse contêiner para aplicar estilos a qualquer um de seus 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 tem menos de 400 px, ele muda para um no layout de coluna única.

Pseudoclasse CSS :has()

Podemos ir além com a pseudoclasse :has() de CSS. Ela permite que você verifique se um elemento pai contém filhos com informações parâmetros.

Por exemplo, p:has(span) indica um seletor de parágrafo com um período dentro sobre ele. Você pode usar isso para estilizar o próprio parágrafo pai ou qualquer dentro dele. Ou use 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 e :has(): duas novas APIs responsivas e poderosas para uma explicação mais detalhada e algumas demonstrações divertidas.

API Sanitizer

A maioria dos apps da Web frequentemente lida com strings não confiáveis, mas renderizando com segurança pode ser complicado. Sem cuidado suficiente, é fácil acidentalmente criar oportunidades para vulnerabilidades de scripting em vários sites.

Existem bibliotecas como a DomPurify que ajudam, mas adicione uma pequena para reduzir a carga de manutenção. A API HTML Sanitizer ajuda a reduzir o número de vulnerabilidades de scripting em vários locais ao incorporar sanitização na plataforma.

Para usá-lo, crie uma nova instância do Sanitizer. 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 opções de configuração diferentes, por exemplo, descartando certos elementos ou permitir 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 de DOM seguro 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 descontinuar o Web SQL. A partir de O Chrome 105, o Web SQL, será descontinuado em contextos não seguros.

Se estiver usando o Web SQL em contextos não seguros, migre para o IndexDB, ou outro contêiner de armazenamento local o mais rápido possível.

E muito mais.

É claro que há muito mais.

  • Agora você pode 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 multitelas recebe rótulos precisos de nomes de tela.
  • A API de sobreposição de controles de janela já está disponível. Ele permite que os PWAs forneçam uma mais parecido com um aplicativo, trocando a barra de título de largura total uma pequena sobreposição. Isso permite que você coloque conteúdo personalizado na área da barra de título.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Verifique os links abaixo para outras mudanças no Chrome 105.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no Canal Chrome Developers no YouTube, e 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 contar as novidades do Chrome.