Novidades no Chrome 118

Adriana Jara

Veja o que é necessário saber:

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

Regra @scope do CSS.

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

Com @scope, você pode substituir estilos com base na proximidade, que é diferente dos estilos CSS usuais 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 é o último declarado.

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

Dois links. O primeiro diz &#39;Eu sou cor-de-rosa!&#39; O segundo diz &#39;rosa diferente&#39;, ambos os links são rosa-claro. Abaixo dos links, o texto dos links diz &#39;Estilo de declaração de pedido de fontes&#39;.

Com o escopo, é possível ter elementos aninhados, e o estilo aplicável é 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 &#39;&#39;Sou rosa-claro!&#39;&#39; o segundo diz &#39;rosa diferente&#39;, o segundo link é um rosa mais escuro, abaixo do texto de 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 e facilita o gerenciamento de projetos maiores e evita 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 definir o estilo de certos elementos aninhados. De certa forma, você pode ter "buracos" em que o estilo com escopo não se aplica.

Como no exemplo a seguir, é possível 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 o CSS @scope at-rule para mais informações.

prefers-reduced-transparency recurso de mídia

Usamos consultas de mídia para proporcionar experiências 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;
  }
}

E você pode conferir a aparência dele com o DevTools:

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

Correção: uma versão anterior deste artigo fazia referência a um novo recurso de mídia scripting que está sendo lançado nesta versão. Ele vai estar na versão 120.

Melhorias no painel Sources no DevTools

O DevTools tem as seguintes melhorias no painel Sources: o recurso workspace melhorou a consistência, mais importante, ao renomear o painel Sources > Filesystem para Workspace junto com outro texto da interface, Sources > 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 Origens arrastando e soltando. O painel Origens agora pode formatar o JavaScript inline nos seguintes tipos de script: module, importmap e speculationrules, além de destacar a sintaxe dos tipos de script importmap e speculationrules, ambos contendo JSON.

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

Confira O que há de novo no DevTools para saber mais sobre as atualizações do Chrome 118.

E muito mais.

Claro, há muito mais.

Leia mais

Isso aborda apenas alguns destaques importantes. Confira os links abaixo para ver outras mudanças no Chrome 118.

Fazer inscrição

Para ficar por dentro, inscreva-se no canal do YouTube para desenvolvedores do Chrome. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

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