Novidades no Chrome 118

Adriana Jara

Veja o que é necessário saber:

Sou Adriana Jara. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 118.

regra CSS @scope.

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

Com o @scope, é possível modificar estilos com base na proximidade, o que é diferente dos estilos CSS comuns que são aplicados, dependendo apenas da ordem e da especificidade da origem. 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 será o último declarado.

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

Dois links, o primeiro diz &quot; Sou rosa-claro!&quot; o segundo diz &quot;rosa diferente&quot;, os dois links são na verdade rosa-claro; abaixo dos links, o texto informa o estilo de declaração de ordem das origens.

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 é &quot;rosa diferente&quot;, o segundo é um rosa mais escuro, abaixo do texto dos links estilo ancestral mais próximo, e tem uma marca de seleção verde ao lado.

O escopo também evita que você escreva nomes de classe 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, você também pode estilizar um componente sem estilizar 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, poderíamos aplicar estilo ao texto e excluir controles ou vice-versa.

representação do HTML acima, com as palavras no escopo ao lado do primeiro e do terceiro div, e a palavra excluída ao lado do segundo e do quarto 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 cláusula @scope do CSS para mais informações.

prefers-reduced-transparency recurso de mídia

Usamos consultas de mídia para fornecer experiências do usuário que se adaptam às preferências do usuário e às condições do dispositivo. 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 pode ser testado com consultas de mídia é o prefers-reduced-transparency, que permite que os desenvolvedores adaptem o conteúdo da Web às preferências selecionadas 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;
  }
}

Confira como ela fica com o DevTools:

Para saber mais, confira a documentação prefers-reduced-transparency.

Correção: uma versão anterior deste artigo mencionava um novo recurso de mídia scripting nesta versão. Na verdade, ela estará na versão 120.

Melhorias no painel Origens no DevTools

As seguintes melhorias foram feitas no painel Sources do DevTools: o recurso workspace melhorou a consistência, principalmente ao renomear as opções Sources > No painel Sistema de arquivos para Espaço de trabalho, junto com outros textos da interface, o menu Sources > O Workspace também permite sincronizar as mudanças feitas no DevTools diretamente com os arquivos de origem.

Além disso, agora é possível reordenar os painéis no lado esquerdo do painel Sources arrastando e soltando, e o painel Sources agora pode formatar o JavaScript inline adequadamente nos seguintes tipos de script: module, importmap, speculationrules e destacar a sintaxe dos tipos de script importmap e speculationrules, ambos contendo JSON.

Antes e depois do estilo de formatação e destaque de sintaxe do tipo de script de regras de especulação.

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

E muito mais.

É claro que há muito mais.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Verifique os links abaixo para outras mudanças no Chrome 118.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no Canal Chrome Developers no YouTube, e você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Adriana Jara! Assim que o Chrome 119 for lançado, estarei aqui para contar as novidades do Chrome.