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 tem melhorias no painel Sources.
E há muito mais.
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.
.pink-theme a { color: hotpink; } .lightpink-theme a { color: lightpink; }
Com o escopo, é possível ter elementos aninhados, e o estilo aplicável é 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 e facilita o gerenciamento de projetos maiores e evita 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 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.
<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.
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.
A API WebUSB agora está exposta a Service Workers registrados por extensões do navegador, permitindo que os desenvolvedores usem a API ao responder a eventos de extensão.
Para ajudar os desenvolvedores a reduzir as dificuldades nos fluxos de solicitações de pagamento, removemos o requisito de ativação do usuário no
Payment Request
e noSecure Payment Confirmation
.O ciclo de lançamento do Chrome está se tornando mais curto. As versões estáveis serão lançadas a cada três semanas, começando pelo Chrome 119, que estará disponível em três semanas.
Leia mais
Isso aborda apenas alguns destaques importantes. Confira os links abaixo para ver outras mudanças no Chrome 118.
- Novidades no Chrome DevTools (118)
- Descontinuações 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
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.