В Chromium недавно реализована новая функция HTML5: таблицы стилей с ограниченной областью действия. <style scoped> . Веб-автор может ограничить применение правил стиля только к части страницы, установив атрибут 'scoped' для элемента <style> , который является прямым дочерним элементом корневого элемента поддерева, к которому вы хотите применить стили. Это ограничивает влияние стилей только на элемент, который является родительским элементом <style> , и на всех его потомков.
Пример
Вот простой документ, в котором используется стандартный стиль:
<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>
Указанные правила стиля будут окрашивать текст в любом <div> в красный цвет и в любой <span> в зеленый:
див! пролет!
див! пролет!
див! пролет!
Однако, если мы установим scoped для элемента <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>
затем он ограничивает правила стиля, чтобы они применялись к включающему <div> , который является родительским для элемента <style scoped> и ко всему, что находится внутри этого <div> . Мы называем это «областью действия», и результат выглядит так:
див! пролет!
див! пролет!
див! пролет!
Это, конечно, можно сделать в любом месте разметки. Поэтому, если вы любите приключения, вы можете вкладывать стили с ограниченной областью в другие части разметки с определенной областью настолько, насколько вам хочется, чтобы получить детальный контроль над тем, где применяются стили.
Случаи использования
Зачем это нужно?
Распространенным вариантом использования является синдицированный контент: когда вы, как веб-автор, хотите включить контент третьей стороны, включая все его стили, но не хотите, чтобы эти стили «загрязняли» другие, несвязанные части страницы. Большим преимуществом здесь является возможность объединять контент с других сайтов, таких как yelp, twitter, ebay и т. д., на одной странице без необходимости изолировать их с помощью <iframe> или оперативного редактирования внешнего контента.
Если вы используете систему управления контентом (CMS), которая отправляет вам фрагменты разметки, которые объединяются в итоговое отображение страницы, то это отличная функция, позволяющая убедиться, что каждый фрагмент стилизован отдельно от всего остального на странице. Это может быть не менее полезно и для вики.
Если вы хотите написать хороший демонстрационный код на странице, легко ограничить стили только демонстрационным контентом. Это позволяет вам экспериментировать с CSS в демо-версии, но при этом ни на что другое на странице это не повлияет.
Другой вариант использования — это простая инкапсуляция: например, если на вашей веб-странице есть боковое меню, имеет смысл поместить стили, специфичные для этого меню, в раздел <style scoped> в этой части разметки. Эти правила стиля не будут иметь никакого эффекта при рендеринге других частей страницы, что позволяет им четко отделяться от основного контента!
Возможно, одним из наиболее интересных вариантов использования является модель веб-компонентов . Веб-компоненты станут отличным способом создания таких вещей, как слайдеры, меню, средства выбора даты, виджеты вкладок и т. д. Предоставляя стили с ограниченной областью действия, дизайнер может создать виджет и упаковать его со своими стилями как самостоятельный блок, который другие могут взять и объединить их в полноценное веб-приложение. Мы планируем активно использовать <style scoped> с веб-компонентами и теневым DOM (это уже можно включить, установив экспериментальный флаг «теневого DOM» в chrome://flags). На данный момент не существует действительно хорошего способа гарантировать, что стили ограничены веб-компонентами, не прибегая к плохим практикам, таким как встроенное моделирование, поэтому стили с областью действия идеально подходят для этого.
Зачем включать родительский элемент?
Самый естественный способ — включить родительский элемент, чтобы правила <style scoped> могли, например, устанавливать общий цвет фона для всей области видимости. Это также позволяет писать таблицы стилей с ограниченной областью действия «защитно» для браузеров, которые еще не поддерживают <style scoped> , путем префикса правил с идентификатором или селектором класса в качестве запасного варианта:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Это имитирует эффект использования стилей, когда реализована область действия, но с некоторым снижением производительности во время выполнения из-за более сложного селектора. Преимущество этого подхода заключается в том, что он позволяет использовать изящный запасной вариант до того дня, когда <style scoped> получит широкую поддержку и селекторы идентификаторов можно будет просто удалить.
Положение дел
Учитывая, что реализация таблиц стилей с ограниченной областью действия все еще является новой, в Chrome они в настоящее время скрыты за флагом времени выполнения. Чтобы включить их, вам нужно получить версию Chrome с номером версии 19 или выше (сейчас Chrome Canary), затем найдите запись «Включить <style scoped> » в chrome://flags (ближе к концу), нажмите «Включить», а затем перезапустите браузер.
На данный момент известных ошибок нет, но @global и ограниченные версии @keyframes и @-webkit-region все еще находятся в процессе реализации. Кроме того, @font-face на данный момент игнорируется, поскольку есть большая вероятность, что спецификация изменится.
Мы хотели бы призвать всех, кто интересуется этой функцией, опробовать ее и сообщить нам о своих впечатлениях: хороших, плохих и (возможно) ошибочных.