Chromium ha implementato di recente una nuova funzionalità di HTML5: i fogli di stile con ambito, chiamati anche
<style scoped>. Un autore web può limitare le regole di stile in modo che vengano applicate solo a una parte di una pagina impostando l'attributo "ambito" su un elemento <style> che sia l'elemento secondario diretto dell'elemento principale del sottoalbero a cui vuoi applicare gli stili. In questo modo, gli stili vengono limitati in modo che abbiano effetto solo sull'elemento principale dell'elemento <style> e su tutti i relativi discendenti.
Esempio
Ecco un semplice documento che utilizza uno stile 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 colorano il testo all'interno di qualsiasi <div> in rosso e all'interno di <span> in verde:
un div! un intervallo!
un div! un intervallo!
un div! un intervallo!
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>
quindi limita le regole di stile in modo che vengano applicate all'elemento <div> che contiene l'elemento principale dell'elemento <style scoped> e a qualsiasi elemento all'interno di quell'elemento <div>. Questo meccanismo è definito "ambito" e il risultato ha il seguente aspetto:
un div! un intervallo!
un div! un intervallo!
un div! un arco!
Questa operazione può essere eseguita in qualsiasi punto del markup. Quindi, se sei avventuroso, puoi nidificare gli stili con ambito all'interno di altre parti del markup quanto vuoi per ottenere un controllo granulare su dove vengono applicati gli stili.
Casi d'uso
A cosa serve?
Un caso d'uso comune è quello dei contenuti distribuiti in syndication: quando tu, in qualità di autore web, vorresti incorporare contenuti di una terza parte, inclusi tutti i suoi stili, ma non vuoi rischiare che questi stili "inquinano" altre parti non correlate della pagina. Un grande vantaggio è la possibilità di combinare contenuti di altri siti come Yelp, Twitter, ebay ecc. in un'unica pagina senza doverli isolare usando un <iframe> o modificando immediatamente i contenuti esterni.
Se utilizzi un sistema di gestione dei contenuti (CMS) che ti invia snippet di markup combinati insieme per formare una visualizzazione finale della pagina, questa è un'ottima funzionalità per assicurarti che lo stile di ogni snippet sia separato da qualsiasi altro elemento della pagina. Questo può essere altrettanto utile per una wiki.
Quando si desidera creare codice demo interessante in una pagina, è facile limitare gli stili ai soli contenuti della demo. In questo modo puoi scatenarti con il CSS nella demo, ma nessun altro aspetto della pagina sarà 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 di quel menu in una sezione <style scoped> di 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.
Probabilmente 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 con ambito, un designer può creare un widget e pacchettizzarlo con i propri stili come unità autonoma che altri possono recuperare e combinare in una ricca applicazione web. Abbiamo in programma 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 c'è un buon modo per assicurarsi che gli stili siano limitati ai componenti web senza ricorrere a pratiche cattive come gli stili incorporati. Pertanto, gli stili con ambito sono la soluzione perfetta per questo scopo.
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 fogli di stile con ambito in modo "difensivo" per i browser che non supportano ancora <style scoped>, anteponendo alle regole un ID o un selettore di classi come fallback:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Questo imita l'effetto dell'utilizzo degli stili quando viene implementato "ambito", ma con una certa penalizzazione delle prestazioni in tempo di runtime a causa del selettore più complesso. L'aspetto positivo di questo approccio è che consente un approccio di riserva aggressivo fino al giorno in cui <style scoped> è ampiamente supportato e i selettori di ID possono semplicemente essere eliminati.
Stato
Poiché l'implementazione dei fogli di stile con ambito è ancora una novità, al momento sono nascosti da un flag di runtime in Chrome. Per attivarle devi avere una versione di Chrome con numero di versione 19 o superiore (Chrome Canary al momento), quindi individua la voce "Attiva <style scoped>" in chrome://flags (verso la fine), fai clic su "Attiva" e riavvia il browser.
Al momento non esistono bug noti, ma @global e le versioni con ambito di @keyframes e @-webkit-region sono ancora in fase di implementazione. Inoltre, per il momento @font-face viene ignorato perché c'è una buona probabilità che la specifica cambi.
Vorremmo incoraggiare tutti coloro che sono interessati a questa funzionalità a provarla e a farci conoscere la loro esperienza: la buona, la cattiva e (forse) la buggy.