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 Origini.

• E ce ne sono molti altri.

Mi chiamo Adriana Jara. Scopriamo le novità di Chrome 118 per gli sviluppatori.

Regola @scope CSS.

La regola at-rule di @scope consente agli sviluppatori di definire l'ambito delle regole di stile per una determinata radice di ambito e di applicare uno stile agli elementi in base alla vicinanza di tale radice.

Con @scope puoi eseguire l'override degli stili in base alla vicinanza, che è diverso dai consueti stili CSS applicati basandosi solo sull'ordine e sulla 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.

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

Con l'ambito puoi avere elementi nidificati e lo stile che si applica è quello per il predecessore più vicino.

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

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

Inoltre, l'ambito evita di scrivere nomi di classi lunghi e contorni, oltre a semplificare la gestione di progetti più grandi ed evitare conflitti di denominazione.

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

L'ambito consente anche di applicare uno stile a un componente senza applicare uno stile ad alcuni elementi nidificati al suo interno. Potrebbero esserci dei "buchi" nei quali lo stile con ambito 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 saperne di più, consulta l'articolo Limitare la copertura dei selettori con la regola at-rule @scope del CSS.

prefers-reduced-transparency funzionalità multimediale

Utilizziamo le query supporti per offrire esperienze utente che si adattino alle preferenze dell'utente 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 supporti è prefers-reduced-transparency, che consente agli sviluppatori di adattare i contenuti web alle preferenze selezionate dall'utente per una minore trasparenza nel sistema operativo, ad esempio l'impostazione Riduci la trasparenza su macOS. Le opzioni valide sono reduce o no-preference.

.translucent {
  opacity: 0.4;
}

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

Inoltre, puoi controllarne l'aspetto con DevTools:

Per saperne di più, consulta la documentazione prefers-reduced-transparency.

Correzione: una versione precedente di questo articolo faceva riferimento a una nuova funzionalità multimediale di scripting inclusa in questa versione. In realtà sarà la versione 120.

Miglioramenti al riquadro Origini in DevTools

DevTools presenta i seguenti miglioramenti nel riquadro Origini: la funzionalità dell'area di lavoro ha migliorato la coerenza, in particolare rinominando Origini > File system in Workspace, insieme ad altro testo dell'interfaccia utente, al riquadro Origini > Workspace consente anche di sincronizzare le modifiche apportate in DevTools direttamente ai file di origine.

Inoltre, ora puoi riordinare i riquadri sul lato sinistro del riquadro Origini trascinandolo e il riquadro Origini ora può stampare 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.

Dai un'occhiata alla pagina Novità di DevTools per saperne di più sugli aggiornamenti di Chrome 118 DevTools.

E tanto altro.

Naturalmente c'è molto altro.

• 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 i problemi nei flussi di richieste di pagamento, rimuoveremo il requisito di attivazione degli utenti 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

Vengono illustrati solo alcuni dei punti salienti. Consulta i link qui sotto per modifiche aggiuntive in Chrome 118.

• Novità di Chrome DevTools (118)
• Ritiri e rimozioni di Chrome 118
• Aggiornamenti di ChromeStatus.com per Chrome 118
• Elenco delle modifiche al repository di codice sorgente di Chromium
• Calendario dei rilasci di Chrome

Iscriviti

Per non perderti gli aggiornamenti, iscriviti al Canale YouTube per sviluppatori di Chrome, e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Ciao Adriana Jara, non appena verrà rilasciato Chrome 119 sarò qui per dirti le novità di Chrome.