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.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Placeholder

HTML atribut placeholder

HTML atribut placeholder slouží k zadání ukázkové hodnoty do formulářového pole.

Jak zakázat označování textu

Zakázání označování textu

Standardně jde na webu označovat text. Jak jeho výběru myší zabránit?

Atribut pattern pro formuláře

Atribut pattern pro formulářové prvky

Validace formulářů regulárními výrazy na straně klienta bez JavaScriptu.

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

Rozbalovací nabídka <select>

HTML značka <select>

Popis, možnosti a vylepšení rozbalovacího výběru, HTML značky <select>.

Komentáře