Di recente, Chromium ha implementato una nuova funzionalità di HTML5: gli stili CSS basati sugli ambiti, noti anche come
<style scoped>. Un autore web può limitare l'applicazione delle regole di stile solo a una parte di una pagina impostando l'attributo "scoped" su un elemento <style> che è l'elemento secondario diretto dell'elemento principale del sottoalbero a cui vuoi applicare gli stili. In questo modo, gli stili influiscono solo sull'elemento principale dell'elemento <style> e su tutti i suoi discendenti.
Esempio
Ecco un semplice documento che utilizza stili standard:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
Le regole di stile specificate coloreranno il testo all'interno di qualsiasi <div> rosso e di qualsiasi <span> verde:
un div! uno span!
un div! uno span!
un div! uno span!
Tuttavia, se impostiamo scoped sull'elemento <style>:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
poi limita le regole di stile in modo che vengano applicate all'elemento <div> che è l'elemento principale dell'elemento <style scoped> e a tutti gli elementi all'interno di questo <div>. Questo tipo di query è chiamato "basato su ambito" e il risultato è il seguente:
un div! un span!
un div! un span!
un div! un span!
Ovviamente, questa operazione può essere eseguita in qualsiasi punto del markup. Se ti piace sperimentare, puoi nidificare gli stili basati su ambito in altre parti del markup basate su ambito, in base alle tue esigenze, per avere un controllo granulare sulla posizione in cui vengono applicati gli stili.
Casi d'uso
A cosa serve?
Un caso d'uso comune è quello dei contenuti raggruppati: quando, in qualità di autore web, vuoi incorporare i contenuti di terze parti, inclusi tutti i relativi stili, ma non vuoi rischiare che questi stili "contaminino" altre parti non correlate della pagina. Un grande vantaggio è la possibilità di combinare i contenuti di altri siti come Yelp, Twitter, eBay e così via in un'unica pagina senza doverli isolare utilizzando un <iframe> o modificare i contenuti esterni al volo.
Se utilizzi un sistema di gestione dei contenuti (CMS) che ti invia snippet di markup che vengono tutti combinati in una pagina finale, questa è un'ottima funzionalità per assicurarti che a ogni snippet venga applicato uno stile indipendentemente da qualsiasi altro elemento della pagina. Questo può essere altrettanto utile anche per una wiki.
Quando vuoi creare un codice demo accattivante in una pagina, è facile limitare gli stili solo ai contenuti della demo. In questo modo puoi sbizzarrirti con il CSS nella demo, senza che nessun altro elemento della pagina venga interessato.
Un altro caso d'uso è semplicemente l'incapsulamento: ad esempio, se la tua pagina web ha un menu laterale, ha senso inserire gli stili specifici per quel menu in una sezione <style scoped> in quella parte del markup. Queste regole di stile non avranno alcun effetto sul rendering di altre parti della pagina, il che le mantiene ben separate dai contenuti principali.
Forse uno dei casi d'uso più interessanti è il modello di componente web. I componenti web saranno un ottimo modo per creare elementi come cursori, menu, selettori di date, widget di schede e così via. Fornendo gli stili a livello di ambito, un designer può creare un widget e impacchettarlo con i suoi stili come un'unità autosufficiente che altri possono acquisire e combinare in un'applicazione web avanzata. Prevediamo di utilizzare <style scoped> in modo intensivo con i componenti web e lo shadow DOM (che può essere già attivato impostando il flag sperimentale "shadow DOM" in chrome://flags). Al momento non esiste un modo davvero efficace per assicurarsi che gli stili siano limitati ai componenti web senza ricorrere a cattive pratiche come gli stili in linea, quindi gli stili basati sugli ambiti sono perfetti per questo.
Perché includere l'elemento principale?
Il modo più naturale è includere l'elemento principale in modo che le regole <style scoped> possano, ad esempio, impostare un colore di sfondo comune per l'intero ambito. Consente inoltre di scrivere gli stili basati sugli ambiti in modo "difensivo" per i browser che non supportano ancora <style scoped>, anteponendo alle regole un selettore di ID o classe come soluzione alternativa:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Questo imita l'effetto dell'utilizzo degli stili quando viene implementato "scoped", ma con un calo del rendimento in fase di esecuzione dovuto al selettore più complesso. Il vantaggio di questo approccio è che consente un approccio di riserva fino al giorno in cui <style scoped> sarà ampiamente supportato e i selettori di ID potranno essere semplicemente eliminati.
Stato
Poiché l'implementazione degli stili basati sugli ambiti è ancora nuova, al momento sono nascosti dietro un flag di runtime in Chrome. Per attivarli, devi installare una versione di Chrome con numero di versione pari o superiore a 19 (al momento Chrome Canary), quindi individuare la voce "Attiva <style scoped>" in chrome://flags (verso la fine), fare clic su "Attiva" e riavviare il browser.
Al momento non sono noti bug, ma le versioni con ambito di @global e @keyframes e @-webkit-region sono ancora in fase di implementazione. Inoltre, per il momento @font-face viene ignorato perché è molto probabile che le specifiche cambino.
Invitiamo tutti gli utenti interessati a provare la funzionalità e a comunicarci le loro esperienze, positive o negative e (forse) con bug.