O webu
HTML atribut scoped

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í:

  1. normálně v hlavičce (jako doposud),
  2. 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.

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.