HTML atribut `scoped`

HTML 5.1 přichází s možností validně používat element <style> i mimo část <head>.

15. listopadu 2014

3 minuty

Tedy používat jej tam, kde to odjakživa také funguje, tj. kdekoliv ve stránce. Aby to nebylo tak jednoduché, podle návrhu jsou ohledně <style> dva způsoby použití:

normálně v hlavičce (jako doposud),
kdekoliv ve stránce právě s atributem scoped

Atribut scoped je boolean.

Podpora

Atribut scoped funguje od Firefoxu 21. Na okamžik se objevil i ve Chrome (po zapnutí experimentálních vlastností), ale v Chrome 37 už tato možnost byla vyřazena.

Vývojáři jádra Blink (používá Chrome a Opera 15+): Intent to remove <style scoped>

Využití

V podporovaných prohlížečích <style scoped> zajistí aplikaci daného CSS jen v rámci svého rodiče (na příkladu element <div>). Deklarace p {color: red} proto nepřebarví všechny všechny odstavce na stránce, ale jen ten v daném scope (prostoru ohraničeného nejbližším nadřazeným elementem – s pojmem scope se je možné setkat i v JavaScriptu nebo jiných programovacích jazycích).

<head>
  <style>
    p {color: blue}
  </style>
</head>
<body>
  <p>Modrý odstavec</p>
  <div>
    <style scoped>
      p {color: red}
    </style>      
  <p>Červený odstavec</p>
  </div>
</body>

Živá ukázka

Zatím se ale nabízí spíš využití ve formě umlčení HTML 5 validátoru při používání <style> v těle dokumentu. Je zde ale risiko, že prohlížeče začnou scoped podporovat. A takto zapsaný styl začne fungovat jinak, než bylo očekáváno.