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 eu 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 Web já viu e vivenciou algo que passa de forma estranha em algum momento. Há uma ótima postagem em Trucks de CSS sobre diferentes maneiras de lidar com o estouro, por exemplo, usando overflow: hidden ou auto.

Na especificação de sobrecarga do CSS, há uma nova propriedade clip que funciona de maneira 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.

Também há o 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, introduzimos a API Feature Policy, que permite ativar, desativar e modificar seletivamente o comportamento de determinadas APIs e recursos da Web no navegador. Essas políticas são um contrato entre você e o navegador. Elas 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 será renomeada como Permissions Policy, e o cabeçalho HTTP será renomeado junto com ela. 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ê quiser saber como usar esse recurso no seu site, confira a Introdução à política de recursos.

DOM paralelo declarativo

O Shadow DOM, parte do padrão dos componentes da Web, oferece uma maneira de definir o escopo dos estilos CSS para uma subárvore do DOM específica e isolar essa subárvore do restante 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. Mas, a partir do Chrome 90, com o Shadow DOM declarativo, está tudo pronto. Você pode criar raízes paralelas usando somente 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 slots do Shadow DOM em HTML estático. Não é necessário usar JavaScript para produzir a árvore inteira, incluindo a raiz da sombra.

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

E mais

E, claro, há muito mais.

Para melhorar a privacidade e até mesmo a velocidade 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 é enviado ao Chrome para computador especificamente otimizado para videoconferências com integração WebRTC.

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Consulte os links abaixo para ver mais alterações no Chrome 90.

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

Eu 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 de "Novo no Chrome" e me fazem parecer muito melhor do que eu. VALEU!