Novidades do Chrome 90

Pete LePage

Observação:o Chrome 90 está começando a ficar estável agora e, em homenagem ao Chrome 90, o vídeo é do estilo dos anos 90. Aproveite!

Veja o que é necessário saber:

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

Sou Pete LePage e tenho o 411 para desenvolvedores no Chrome 90, no estilo dos anos 90.

Impedir o estouro com overflow: clip

O CSS É INCRÍVEL

CSS é tudo isso e um pacote de batatas fritas! Mas acho que todo desenvolvedor da Web já viu e passou por algo estranho em algum momento. Há uma excelente postagem sobre Truques de CSS sobre diferentes maneiras de lidar com o estouro, por exemplo, usando overflow: hidden ou auto.

Nas especificações de estouro do CSS, há uma nova propriedade clip que funciona de maneira semelhante a hidden.

.overflow-clip {
  overflow: clip;
}

O uso de overflow: clip possibilita evitar qualquer tipo de rolagem para a 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, é possível aplicar o recorte a um único eixo usando overflow-x e overflow-y.

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

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

Confira o 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, lançamos 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 qual é sua intenção.

Se o código ou qualquer uma das bibliotecas de terceiros que você usa violar as regras pré-selecionadas, o navegador vai substituir o comportamento por uma UX melhor ou apenas dizer "falar com a mão", bloqueando a API completamente.

A partir do Chrome 90, a API Feature Policy será renomeada Política de permissões, e o cabeçalho HTTP também. Ao mesmo tempo, a comunidade definiu uma nova sintaxe, com base em valores de campos estruturados para HTTP.

Chrome 90 e mais recente

Permissions-Policy: geolocation=()

Chrome 89 e anteriores

Feature-Policy: geolocation 'none'

Se você quiser saber como usar isso no seu site, consulte a Introdução à política de recursos.

Shadow DOM declarativo

O Shadow DOM, parte do padrão Web Components, fornece uma maneira de definir o escopo de 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 com 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 renderização no lado do cliente, mas não tão bem na renderização no lado do servidor, em que não há uma maneira integrada de expressar as raízes das sombras 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 HTML.

Uma raiz paralela declarativa é um elemento <template> com um atributo shadowroot. Ela é detectada pelo analisador HTML e imediatamente aplicada como a raiz paralela do elemento pai.

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

O carregamento dos resultados da marcação HTML puro nessa árvore do 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. Nenhum JavaScript é necessário para produzir a árvore inteira, incluindo a raiz paralela.

Confira Declarativo Shadow DOM em web.dev para mais detalhes.

E mais

E, claro, há muito mais.

Para melhorar a privacidade e até mesmo a velocidade de carregamento de usuários que acessam sites compatíveis com HTTPS, a barra de endereço do Chrome usará https:// por padrão. Se você ainda não configurou um redirecionamento automático de HTTP para HTTPS, este é um ótimo momento para fazer isso.

E um codificador AV1 está incluído no Chrome para computador que é especificamente otimizado para videoconferência com integração WebRTC.

Leia mais

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

• Novidades do Chrome DevTools (90)
• Descontinuações e remoções do Chrome 90
• Atualizações do ChromeStatus.com para o Chrome 90
• Novidades do JavaScript no Chrome 90
• Lista de alterações do repositório de origem do Chromium

Fazer inscrição

Para ficar por dentro dos nossos vídeos, inscreva-se no nosso canal de desenvolvedores do Chrome no YouTube. 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 91 for lançado, estarei aqui para dizer as novidades do Chrome.

Um agradecimento especial

Eu me diverti muito gravando esse episódio temático dos anos 90 de "Novo no Chrome". Muito obrigada a Sean Meehan pela ideia e por reunir as pessoas incríveis que ajudaram a abrir a revolução do tempo para 1990.

Design do GDS

• Fola akinola
• Derek baix
• Christopher Bodel
• Nick krusick
• Chris walker

Design de som e músicas adicionais

• Bryan Gordon

E, claro, Loren Borja, Lee Carruthers e Lukas Holcek, que trabalham em todos os meus vídeos "Novo no Chrome", me deixam muito melhor do que eu. VALEU!