Veja o que é necessário saber:
- Declare estilos específicos em um componente com a regra CSS
@scope
. - Há um novo recurso de mídia:
prefers-reduced-transparency
. O DevTools recebeu melhorias no painel Sources (link em inglês).
E tem muito mais.
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.
.pink-theme a { color: hotpink; } .lightpink-theme a { color: lightpink; }
Com o escopo, é possível ter elementos aninhados, e o estilo aplicado é o do ancestral mais próximo.
@scope (.pink-theme) { a { color: hotpink; } } @scope (.lightpink-theme){ a { color: lightpink; } }
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.
<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; }
<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.
<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.
Confira Novidades no DevTools para saber mais sobre as atualizações do Chrome 118.
E muito mais.
É claro que há muito mais.
A API WebUSB agora está exposta a Service Workers registrados por extensões de navegador, permitindo que os desenvolvedores usem a API ao responder a eventos de extensão.
Para ajudar os desenvolvedores a reduzir o atrito nos fluxos de solicitação de pagamento, vamos remover o requisito de ativação do usuário no
Payment Request
e noSecure Payment Confirmation
.O ciclo de lançamento do Chrome vai ficar mais curto. Versões estáveis serão lançadas a cada três semanas, começando com o Chrome 119, que será lançado em três semanas.
Leitura adicional
Isso cobre apenas alguns dos principais destaques. Verifique os links abaixo para outras mudanças no Chrome 118.
- Novidades no Chrome DevTools (118)
- Descontinuação e remoções do Chrome 118
- Atualizações do ChromeStatus.com para o Chrome 118
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
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.