Novidades do Chrome 90

Pete LePage

Veja o que é necessário saber:

  • Há um novo valor para a propriedade CSS overflow.
  • A API Feature Policy foi renomeada como Política de permissões.
  • Há uma nova maneira de implementar e usar o Shadow DOM diretamente no HTML.
  • Eu tinha várias jaquetas quase exatamente assim nos anos 1990.
  • E há muito mais.

Meu nome é Pete LePage, e tenho as novidades para desenvolvedores no Chrome 90. Vamos lá, estilo 1990!

Impedir o overflow com overflow: clip

O CSS É INCRÍVEL

O CSS é tudo isso e muito mais! Mas acho que todo desenvolvedor da Web já viu e experimentou algo que transborda de forma estranha em algum momento. Há um ótimo post no CSS Tricks sobre maneiras diferentes de lidar com o overflow, por exemplo, usando overflow: hidden ou auto.

Na especificação de overflow do CSS, há uma nova propriedade clip que funciona de forma semelhante a hidden.

.overflow-clip {
  overflow: clip;
}
Caixa quadrada com CSS de texto é incrível, onde incrível transborda da caixa

O uso de overflow: clip permite impedir qualquer tipo de rolagem da caixa, incluindo a rolagem programática. Isso significa que a caixa não é considerada um contêiner de rolagem. Ela não inicia um novo contexto de formatação. Se necessário, aplique o recorte a um único eixo usando overflow-x e overflow-y.

Ah, e para sua informação, também há overflow-clip-margin, que permite expandir a borda do clipe. Isso é útil para casos em que há um excesso de tinta que precisa estar visível.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
Caixa quadrada com CSS de texto é incrível, onde incrível transborda da caixa

Confira overflow: clip em ação em https://petele-css-is-awesome.glitch.me/.

A política de recursos agora é a política de permissões

No Chrome 74, apresentamos a API Feature Policy, que permite ativar, desativar e modificar seletivamente o comportamento de certas APIs e recursos da Web no navegador. Essas políticas são um contrato entre você e o navegador. Eles informam o navegador sobre sua intenção.

Se o código ou qualquer uma das bibliotecas de terceiros que você usa violarem as regras pré-selecionadas, o navegador vai substituir o comportamento por uma UX melhor ou simplesmente vai bloquear a API.

A partir do Chrome 90, a API Feature Policy vai ser renomeada para Permissions Policy, e o cabeçalho HTTP também foi renomeado. Ao mesmo tempo, a comunidade definiu uma nova sintaxe, baseada em valores de campo estruturados para HTTP.

Chrome 90 e versões mais recentes

Permissions-Policy: geolocation=()

Chrome 89 e versões anteriores

Feature-Policy: geolocation 'none'

Se você tem interesse em saber como usar isso no seu site, confira a Introdução à política de recursos.

DOM paralelo declarativo

O Shadow DOM, parte do padrão de componentes da Web, oferece uma maneira de definir estilos CSS em uma subárvore de DOM específica e isolar essa subárvore do resto do documento. Até agora, a única maneira de usar o shadow DOM era construir uma raiz paralela usando JavaScript.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

Isso funciona bem para a renderização do lado do cliente, mas não tão bem na renderização do lado do servidor, em que não há uma maneira integrada de expressar raízes de sombra no HTML gerado pelo servidor. No entanto, a partir do Chrome 90, com o DOM paralelo declarativo, você pode criar raízes de sombra usando apenas HTML.

Uma raiz paralela declarativa é um elemento <template> com um atributo shadowroot. Ele é detectado pelo analisador de HTML e aplicado imediatamente como a raiz de sombra do elemento pai.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

O carregamento da marcação HTML pura resulta nesta árvore DOM:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

Isso nos dá os benefícios do encapsulamento e da projeção de slot do Shadow DOM em HTML estático. Não é necessário usar JavaScript para produzir a árvore inteira, incluindo a raiz da sombra.

Confira mais detalhes em Shadow DOM declarativo no web.dev.

E mais

E, claro, há muito mais.

Para melhorar a privacidade e até mesmo as velocidades de carregamento para usuários que acessam sites com suporte a HTTPS, a barra de endereço do Chrome vai usar https:// por padrão. Se você não configurou um redirecionamento automático de HTTP para HTTPS, é o momento ideal para fazer isso.

Além disso, um codificador AV1 está sendo enviado no Chrome para computador, otimizado especificamente para videoconferências com integração do WebRTC.

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira as mudanças adicionais no Chrome 90 nos links abaixo.

Inscrever-se

Se quiser ficar por dentro dos nossos vídeos, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e assim que o Chrome 91 for lançado, estarei aqui para contar as novidades do Chrome.

Um agradecimento especial

Me diverti muito gravando este episódio de "Novidades do Chrome" com tema dos anos 1990. Agradeço a Sean Meehan pela ideia e por reunir as pessoas incríveis que ajudaram a abrir a máquina do tempo para 1990.

Design do GDS

  • Fola Akinola
  • Derek Bass
  • Christopher Bodel
  • Nick Krusick
  • Chris Walker

Design de som e música adicional

  • Bryan Gordon

E, claro, Loren Borja, Lee Carruthers e Lukas Holcek, que trabalham em todos os meus vídeos "Novidades do Chrome" e me fazem parecer muito melhor do que eu realmente sou. OBRIGADO!