Введение
В этой статье я бы хотел рассмотреть одно из ново введений в HTML5, связанное с отображением содержимого документа, а именно атрибет 'SCOPED' для элемента 'STYLE'. Сразу предупрежу, что данный атрибут пока находится в стадии разработки и не поддерживается ни одним браузером на сегодняшний день, но заслуживает внимания.
Основная часть
Атрибут 'SCOPED' для элемента 'STYLE' позволяет подключать стили непосредственно в отображаемой части документа и применить их в рамках определенного контекста. В HTML4 такой возможности не было и само размещение элемента 'STYLE' в отображаемой части документа являлось ошибкой, так как по спецификации элемент 'STYLE' должен находится внутри элемента 'HEAD'.
Атрибут 'SCOPED' является логическим. Если данный атрибут присутствует, это означает что стили будут применяться к дереву элементов корнем которого является элемент внутри которого находится элемент 'STYLE', а не ко всему документу. Причем элемент 'STYLE' должен быть первым элементом корневого элемета.
WHATWG
Где это можно использовать
Так много слов говорилось о разделении представления и содержания, и тут вдруг появляется такая неоднозначная функциональность. Так где же можно это применить?
W3C предлагает некоторые пути для которых может подойти данная функциональность:
- Добавление специфических (одноразовых стилей)
- Добавление пользовательских стилей для WIKI или CMS
- Добавление определенных стилей через CMS плагины
- Держать неразрывное содержимое вместе (т.е., держать код примера вместе с самим примером)
Как это работает
В качестве примера я буду использовать следующий код:
<article>
<h1>Style Scoped</h1>
<p>The scoped attribute for the style element will eventually allow for you to include style elements mid-document. To do this, you must mark up your style element with the scoped attribute.</p>
<section>
<h2>How does it work?</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
</article>
* This source code was highlighted with Source Code Highlighter.
Теперь изменим цвет текста у второго параграфа на красный:
<article>
<h1>Style Scoped</h1>
<p>The scoped attribute for the style element will eventually allow for you to include style elements mid-document. To do this, you must mark up your style element with the scoped attribute.</p>
<section>
<style scoped>
p { color: red; }
</style>
<h2>How does it work?</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
</article>
* This source code was highlighted with Source Code Highlighter.
Вот как это могло бы выглядеть в браузерах:
Для того чтобы применять внешние таблицы стилей в определенном контексте предлогается использовать следующий код.
<style scoped="scoped">@import url(любой);</style>
* This source code was highlighted with Source Code Highlighter.
Обратная совместимость
К несчастью данный атрибут не определяется браузерами. И поэтому если вы попытаетесть использовать этот атрибут вместе с элементом 'STYLE' то стили просто применяться ко всей странице.
Для обратной совместимости, как альтернатива был предложен(Louis Lazaris-ом) новый элемент 'SCOPEDSTYLE'.
Использование 'SCOPED' сегодня
Если вы хотите использовать эту функциональность сегодня, для этого есть плагин для jQuery scoped CSS plugin on GitHub от Simon Madine.
Ссылки
HTML5 Doctor
W3School
WHATWG