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 molte altre.
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.
.pink-theme a { color: hotpink; } .lightpink-theme a { color: lightpink; }
Con l'ambito puoi avere elementi nidificati e lo stile applicato è quello del predecessore più vicino.
@scope (.pink-theme) { a { color: hotpink; } } @scope (.lightpink-theme){ a { color: lightpink; } }
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.
<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; } }
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.
<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.
Consulta la pagina Novità di DevTools per maggiori informazioni sugli aggiornamenti di Chrome 118 DevTools.
E tanto altro.
Ovviamente c'è molto altro.
L'API WebUSB è ora esposta ai Service worker registrati da estensioni del browser che consentono agli sviluppatori di utilizzare l'API quando rispondono agli eventi delle estensioni.
Per aiutare gli sviluppatori a semplificare i flussi delle richieste di pagamento, rimuoveremo il requisito di attivazione degli utenti in
Payment Request
eSecure Payment Confirmation
.Il ciclo di rilascio di Chrome sta diventando sempre più breve e le versioni stabili verranno rilasciate ogni tre settimane, a partire dalla versione 119 di Chrome, che sarà disponibile tra tre settimane.
Per approfondire
Vengono trattati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 118.
- Novità di Chrome DevTools (118)
- Deprecazioni e rimozioni di Chrome 118
- Aggiornamenti di ChromeStatus.com per Chrome 118
- Elenco delle modifiche al repository di codice sorgente di Chromium
- Calendario delle release di Chrome
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.