Chromium ha recentemente implementato una nuova funzionalità da HTML5: i fogli di stile con ambito, anche noti come
<style scoped>. Un web author può limitare l'applicazione delle regole di stile solo a una parte di una pagina impostando l'attributo "scope" 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 vengono limitati in modo da influire solo sull'elemento principale dell'elemento <style> e su tutti i suoi discendenti.
Esempio
Ecco un semplice documento che utilizza gli 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> di rosso e di qualsiasi <span> di verde:
un div! un span!
un div! un span!
un div! un 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 lo contiene, che è l'elemento principale dell'elemento <style scoped> e a qualsiasi elemento all'interno di questo <div>. Lo chiamiamo "ambito" e il risultato ha un aspetto simile a questo:
un div! un span!
un div! un span!
un div! un span!
Ovviamente questo può essere fatto in qualsiasi punto del markup. Quindi, se hai un po' di avventura, puoi nidificare gli stili con ambito all'interno di altre parti del markup come preferisci per avere un controllo granulare su dove vengono applicati gli stili.
Casi d'uso
A cosa serve?
Un caso d'uso comune è costituito dai contenuti distribuiti in syndication: quando tu, come autore web, desideri incorporare contenuti di una terza parte, inclusi tutti i relativi stili, ma non vuoi rischiare che questi stili "inquinano" altre parti non correlate della pagina. Un grande vantaggio in questo caso è 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 modificando all'istante i contenuti esterni.
Se utilizzi un sistema di gestione dei contenuti (CMS) che ti invia snippet di markup che vengono combinati insieme in una visualizzazione finale della pagina, questa è un'ottima funzionalità per fare in modo che ogni snippet venga definito in modo isolato da qualsiasi altro contenuto della pagina. Questo può essere utile anche per un wiki.
Se desideri creare un buon codice demo su una pagina, è facile limitare gli stili solo ai contenuti della demo. In questo modo puoi scatenarti con il CSS nella demo, ma nessun altro contenuto 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> 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 è quello del modello componente web. I componenti web saranno un ottimo modo per creare elementi come dispositivi di scorrimento, menu, selettori di date, widget di schede e così via. Fornendo gli stili basati sull'ambito, un designer può creare un widget e pacchettizzarlo con i propri stili sotto forma di unità indipendente che altri utenti potranno afferrare e combinare in una ricca applicazione web. Prevediamo di utilizzare in modo intensivo <style scoped> 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 modo davvero efficace per assicurarsi che gli stili siano limitati ai componenti web senza ricorrere a pratiche scorrette come lo stile incorporato, quindi gli stili con ambito sono la soluzione perfetta 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 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 riserva:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Questo imita l'effetto dell'utilizzo degli stili quando è implementato l'ambito, ma con una certa penalizzazione in termini di prestazioni in fase di runtime dovuta al selettore più complesso. L'aspetto positivo di questo approccio è che consente un approccio di riserva controllato fino al giorno in cui <style scoped> è ampiamente supportato e i selettori ID potrebbero essere semplicemente ignorati.
Stato
Poiché l'implementazione dei fogli di stile con ambito è ancora nuova, al momento sono nascosti dietro un flag di runtime in Chrome. Per attivarle devi procurarti una versione di Chrome con numero di versione 19 o successivo (al momento Chrome Canary), quindi individuare la voce "Abilita <style scoped>" in chrome://flags (verso la fine), fare clic su "Attiva" e riavviare il browser.
Al momento non esistono bug noti, ma le versioni con ambito e @global di @keyframes e @-webkit-region sono ancora in fase di implementazione. Inoltre, per il momento @font-face viene ignorato, perché esistono buone probabilità che le specifiche vengano modificate.
Vorremmo incoraggiare tutti coloro che sono interessati alla funzionalità a provarla e a comunicarci le vostre esperienze: positive, negative e (forse) con bug.