Novità di Chrome 118

Tieni presente quanto segue:

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

Due link: il primo riporta &quot;Sono rosa chiaro&quot;, il secondo &quot;Rosa diverso&quot;. Entrambi i link sono in realtà rosa chiaro. Sotto il testo dei link è riportato lo stile di dichiarazione dell&#39;ordine delle origini.

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

Due link: il primo è &quot;Sono rosa chiaro&quot;, il secondo è &quot;Rosa diverso&quot;, è di un rosa più scuro, si trova sotto lo stile dell&#39;antenato più vicino del testo dei link e ha un segno di spunta verde accanto.

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.

rappresentazione del codice HTML riportato sopra, con le parole nell&#39;ambito accanto al primo e al terzo div e la parola esclusa accanto al secondo e al quarto div.

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

Prima e dopo la formattazione e l&#39;evidenziazione della sintassi del tipo di script delle regole di speculazione.

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.

Per approfondire

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

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.