Novidades no Chrome 118

Adriana Jara

Veja o que é necessário saber:

Meu nome é Adriana Jara. Vamos conferir as novidades para desenvolvedores no Chrome 118.

regra CSS @scope.

A regra @scope at-rule permite que os desenvolvedores definam regras de estilo para uma determinada raiz de escopo e estilizem elementos de acordo com a proximidade dessa raiz.

Com @scope, é possível substituir estilos com base na proximidade, o que é diferente dos estilos CSS usuais que são aplicados com base apenas na ordem da fonte e na especificidade. No exemplo a seguir, há dois temas.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

sem escopo, o estilo aplicado é o último declarado.

Sem @scope
.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

Dois links, o primeiro diz &quot;I&#39;m lightpink!&quot;, e o segundo diz &quot;Different pink&quot;. Ambos os links são rosa claro, e o texto dos links diz &quot;sources order declaration style&quot;.

Com o escopo, é possível ter elementos aninhados, e o estilo aplicado é o do ancestral mais próximo.

Com @scope
@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

Dois links: o primeiro diz &quot;Sou rosa-claro!&quot; o segundo diz &quot;Cor-de-rosa diferente&quot;. O segundo link é um rosa mais escuro, abaixo do estilo de ancestral mais próximo de links, e tem uma marca de seleção verde ao lado.

O escopo também evita que você escreva nomes de classes longos e complicados, além de facilitar o gerenciamento de projetos maiores e evitar conflitos de nomenclatura.

Sem @scope
<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>
 
.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}
Com @scope
<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>
 
@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

Com o escopo, também é possível estilizar um componente sem definir o estilo de certos elementos aninhados. De uma forma, você pode ter “buracos” em que o estilo com escopo não se aplica.

Como no exemplo a seguir, podemos aplicar estilo ao texto e excluir controles ou vice-versa.

representação do HTML acima, com as palavras em escopo ao lado da primeira e da terceira div e a palavra excluída ao lado da segunda e da quarta div.

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

Confira o artigo Limitar o alcance dos seletores com a regra @scope do CSS para mais informações.

prefers-reduced-transparency recurso de mídia

Usamos consultas de mídia para oferecer experiências que se adaptam às preferências e condições do dispositivo do usuário. Esta versão do Chrome adiciona um novo valor que pode ser usado para adaptar a experiência do usuário: prefers-reduced-transparency.

Um novo valor que você pode testar com consultas de mídia é prefers-reduced-transparency, que permite que os desenvolvedores adaptem o conteúdo da Web à preferência selecionada pelo usuário para reduzir a transparência no SO, como a configuração "Reduzir transparência" no macOS. As opções válidas são reduce ou no-preference.

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

E você pode conferir como fica com o DevTools:

Para mais informações, consulte a documentação prefers-reduced-transparency.

Correção: uma versão anterior deste artigo se referia a um novo recurso de mídia scripting incluído nesta versão. Na verdade, será na versão 120.

Melhorias no painel "Sources" do DevTools

O DevTools tem as seguintes melhorias no painel Origens: o recurso espaço de trabalho melhorou a consistência, principalmente renomeando o painel Origens > Sistema de arquivos para Espaço de trabalho, além de outros textos da interface. O Origens > Espaço de trabalho também permite sincronizar as mudanças feitas no DevTools diretamente nos arquivos de origem.

Além disso, agora é possível reordenar os painéis no lado esquerdo do painel Origens arrastando e soltando. O painel Origens agora pode mostrar JavaScript inline nos seguintes tipos de script: module, importmap, speculationrules e destacar a sintaxe dos tipos de script importmap e speculationrules, que contêm JSON.

Antes e depois da impressão bonita e do destaque de sintaxe do tipo de script de regras de especulação.

Confira Novidades do Chrome DevTools para saber mais sobre as atualizações do Chrome DevTools 118.

E muito mais.

É claro que há muito mais.

Leitura adicional

Isso inclui apenas alguns destaques importantes. Confira as mudanças adicionais no Chrome 118 nos links abaixo.

Inscrever-se

Para ficar por dentro das novidades, 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 é Adriana Jara, e assim que o Chrome 119 for lançado, vou estar aqui para contar as novidades do Chrome.