Veja o que é necessário saber:
- As consultas de contêiner e :has() são uma combinação perfeita.
- A nova API Sanitizer fornece um processador robusto para strings arbitrárias para reduzir as vulnerabilidades de scripting em vários locais.
- Estamos avançando mais uma etapa para a suspensão de uso do Web SQL.
- E há muito mais.
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.](https://developer.chrome.com/static/blog/new-in-chrome-105/image/container-query-vs-media-f263d60a5e21b.png?authuser=6&hl=pt)
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.
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.
- Novidades do Chrome DevTools (105)
- Descontinuações e remoções do Chrome 105
- Atualizações do ChromeStatus.com para o Chrome 105
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
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.