Novità di Chrome 118

Adriana Jara

Tieni presente quanto segue:

Sono Adriana Jara. Analizziamo le novità di Chrome 118 per gli sviluppatori.

Regola @scope CSS.

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

Con @scope puoi eseguire l'override degli stili in base alla vicinanza, che è diverso dai soliti stili CSS che vengono applicati basandoti esclusivamente sull'ordine di origine e sulla specificità. Nell'esempio che segue sono riportati 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 è &quot;Sono lightpink!&quot;, mentre il secondo è &quot;Rosa diverso&quot;; entrambi i link sono in realtà rosa chiaro e sotto il testo dei link si legge lo stile della dichiarazione dell&#39;ordine di origine.

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

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

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

Due link, il primo è &#39;&#39;Sono rosa chiaro!&#39;&#39;, il secondo &#39;Rosa diverso&#39;, il secondo è di un rosa più scuro, sotto il testo dei link lo stile predecessore più vicino e accanto è presente un segno di spunta verde.

Inoltre, l'ambito ti evita di scrivere nomi di classi lunghi e contorti e semplifica la gestione di progetti più grandi ed evita conflitti di denominazione.

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 definire lo stile di un componente senza applicare uno stile a determinati elementi nidificati. In modo da avere dei "buchi" ai quali lo stile basato sull'ambito non viene applicato.

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

del codice HTML sopra riportato, con le parole in scope 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 saperne di più, consulta l'articolo Limitare la copertura dei selettori con l'@scope at-rule del CSS.

prefers-reduced-transparency funzionalità multimediale

Utilizziamo le query supporti per fornire 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 verificarne l'aspetto con DevTools:

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

Correzione: una versione precedente di questo articolo faceva riferimento a una nuova funzionalità per i contenuti multimediali di scripting presente in questa release. che sarà infatti nella versione 120.

Miglioramenti al riquadro delle origini in DevTools

DevTools presenta i seguenti miglioramenti nel riquadro Origini: la funzionalità workspace ha migliorato la coerenza, in particolare grazie alla ridenominazione del riquadro Origini > File system in Area di lavoro insieme ad altro testo dell'interfaccia utente, mentre Origini > Area di lavoro consente di sincronizzare le modifiche apportate in DevTools direttamente nei file di origine.

Inoltre, ora puoi riordinare i riquadri sul lato sinistro del riquadro Origini trascinandoli. Il riquadro Origini può ora eseguire la stampa di JavaScript incorporato nei seguenti tipi di script: module, importmap, speculationrules ed evidenziare la sintassi dei tipi di script importmap e speculationrules, entrambi con JSON.

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

Consulta la pagina Novità di DevTools per maggiori informazioni sugli aggiornamenti di Chrome 118 DevTools.

E tanto altro.

Ovviamente c'è molto altro.

Per approfondire

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

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Adriana Jara e, non appena uscirà Chrome 119, sarò qui per raccontarti le novità di Chrome.