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 quali sono le novità per gli sviluppatori in Chrome 118.

Regola CSS @scope.

La regola at @scope consente agli sviluppatori di applicare le regole di stile 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;
    }
}

Inoltre, ti evita 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 scripting inclusa in questa release. 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 trascinandone gli elementi. Inoltre, il riquadro Origini ora può eseguire la stampa in formato bello di JavaScript in linea nei seguenti tipi di script: module, importmap, speculationrules ed evidenziare la sintassi dei tipi di script importmap e speculationrules, che contengono entrambi 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, consentendo agli sviluppatori di utilizzare 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. Consulta i link di seguito per altre 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 non perderti nessuna 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.