Novità di Chrome 118

Adriana Jara

Tieni presente quanto segue:

• Dichiara stili specifici all'interno di un componente con la regola CSS @scope.
• È disponibile una nuova funzionalità multimediale: prefers-reduced-transparency.

• DevTools presenta miglioramenti nel riquadro Risorse.

• E c'è molto altro.

Sono Adriana Jara. Vediamo le novità per gli sviluppatori in Chrome 118.

Regola CSS @scope.

La regola at @scope consente agli sviluppatori di definire l'ambito delle regole di stile in base a una determinata radice di ambito e di applicare gli stili agli elementi in base alla vicinanza a questa radice.

Con @scope puoi eseguire l'override degli stili in base alla vicinanza, diversamente dagli stili CSS standard che vengono applicati in base solo all'ordine e alla specificità dell'origine. Nell'esempio seguente sono presenti due temi.

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

Senza ambito, lo stile applicato è l'ultimo dichiarato.

Senza @scope

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

Con l'ambito puoi avere elementi nidificati e lo stile applicato è quello dell'antenato più vicino.

Con @scope

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

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

L'ambito ti evita anche di scrivere nomi di classi lunghi e intricati e semplifica la gestione di progetti più grandi ed evita i conflitti di nomi.

Senza @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;
}

Con @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;
  }
}

Con l'ambito puoi anche applicare uno stile a un componente senza applicarlo ad alcuni elementi nidificati al suo interno. In un certo senso, puoi avere "buchi" in cui lo stile basato sugli ambiti non viene applicato.

Come nell'esempio seguente, potremmo applicare lo stile al testo ed escludere i controlli o viceversa.

<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;
  }
}

Per ulteriori informazioni, consulta l'articolo Limitare la copertura dei selettori con la regola at @scope CSS.

prefers-reduced-transparency funzionalità multimediale

Utilizziamo le query sui media per offrire esperienze utente che si adattano alle preferenze e alle condizioni del dispositivo. Questa versione di Chrome aggiunge un nuovo valore che può essere utilizzato per adattare l'esperienza utente: prefers-reduced-transparency.

Un nuovo valore che puoi testare con le query sui media è prefers-reduced-transparency, che consente agli sviluppatori di adattare i contenuti web alle preferenze selezionate dall'utente per una trasparenza ridotta nel sistema operativo, ad esempio l'impostazione Riduci trasparenza su macOS. Le opzioni valide sono reduce o no-preference.

.translucent {
  opacity: 0.4;
}

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

Puoi anche controllare l'aspetto con DevTools:

Per ulteriori informazioni, consulta la documentazione relativa a prefers-reduced-transparency.

Correzione: una versione precedente di questo articolo faceva riferimento a una nuova funzionalità multimediale di scripting inclusa in questa versione. Sarà nella versione 120.

Miglioramenti al riquadro Origini in DevTools

DevTools offre i seguenti miglioramenti nel riquadro Origini: la funzionalità spazio di lavoro ha migliorato la coerenza, in particolare rinominando il riquadro Origini > File system in Spazio di lavoro, insieme ad altri testi dell'interfaccia utente. Origini > Spazio di lavoro ti consente inoltre di sincronizzare le modifiche apportate in DevTools direttamente con i file di origine.

Inoltre, ora puoi riordinare i riquadri sul lato sinistro del riquadro Origini trascinandolo e il riquadro Origini può ora stampare il codice JavaScript incorporato nei seguenti tipi di script: module, importmap, speculationrules ed evidenziare la sintassi dei tipi di script importmap e speculationrules, entrambi in formato JSON.

Consulta la pagina Novità di DevTools per saperne di più sugli aggiornamenti di Chrome 118 DevTools.

E tanto altro.

Ovviamente ce ne sono molti altri.

• L'API WebUSB è ora esposta ai Service worker registrati dalle estensioni del browser, che consentono agli sviluppatori di usare l'API quando rispondono agli eventi delle estensioni.

• Per aiutare gli sviluppatori a ridurre le difficoltà nei flussi di richiesta di pagamento, rimuoveremo il requisito di attivazione dell'utente in Payment Request e Secure Payment Confirmation.

• Il ciclo di rilascio di Chrome sta diventando più breve: le versioni stabili verranno rilasciate ogni tre settimane, a partire da Chrome 119 che sarà disponibile tra tre settimane.

Per approfondire

Sono riportati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 118.

• Novità di Chrome DevTools (118)
• Ritiramenti e rimozioni in Chrome 118
• Aggiornamenti di ChromeStatus.com per Chrome 118
• Elenco delle modifiche al repository di origine di Chromium
• Calendario delle release di Chrome

Iscriviti

Per rimanere al passo con le novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Adriana Jara e, non appena verrà rilasciata la versione 119 di Chrome, sarò qui per dirti le novità di Chrome.