В спецификации HTML5 был добавлен новый атрибут scope для тэга <style>. Итак, эта заметка о том, как работает этот новый атрибут и как это можно использовать.
Этот атрибут, исходя из названия, используется для того, чтобы ограничить область действия стиля, для которого он (атрибут) указан. Область действия стиля с таким атрибутом будет распространяться на родительский элемент, внутри которого находится тег <style> этого стиля, и всех дочерние элементы этого родителя. Все элементы снаружи области действия будут проигнорированы даже в случае полного совпадения селекторов. Этот атрибут принимает булевские значения, так что указывать его можно либо как просто scope для HTML, либо как scope="scoped" для XML/XHTML. Вот небольшой пример использования этого атрибута:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Пример использования атрибута scope</title>
<style>
p { color: black; }
</style>
</head>
<body>
<p>Цвет текста в этом параграфе будет черным.</p>
<div>
<style scoped>
p { color: green; }
</style>
<p>А здесь - зеленым.</p>
<p>И тут!</p>
</div>
<p>А тут - снова черным.</p>
</body>
</html>
В браузерах, которые поддерживают этот атрибут, цвет текста в тех параграфах, что внутри <div>, будет зеленым, в остальных же - черным. Любой стиль, внутри тега <style> с ограниченной областью действия, будет применен только к его родителю (в данном случае - к <div>) и всем дочерним элементам этого родителя (в данном случае - к двум <p>).
И, еще небольшое уточнение. Любые общие правила (т.н. @-правила) игнорируются за пределами ограниченных стилей. Например, если внутри ограниченного стиля мы подключили какой-то шрифт посредством @font-face, то этот шрифт не получится использовать для элементов вне области действия данного стиля, даже если явно указать в свойстве font-family имя данного шрифта.
Зачем использовать стили с ограниченной областью действия?
Первый вопрос, который может возникнуть в голове у верстальщика, узнавшего про scope: "Где я могу это использовать?". Когда мы вставляем код стилей в HTML, то это не сильно, на первый взгляд, отличает scoped-стили от обыкновенных inline. Не надо путать эти два понятия.
Вот пара ситуаций, в которых можно было бы применить <style> с атрибутом scope. Первая - это какие-либо html-демо на странице. Чтобы не париться с различными блоками и их id, достаточно просто создать стиль с ограниченной областью действия и вставить его прямо в страницу. Это может пригодиться лишь немногим веб-разработчикам, но, тем не менее, использование новых возможностей в такой ситуации - очевидно.
Другая ситуация - это использование scoped-стилей для элементов управления богатых функционалом веб-приложений, для обеспечения самодостаточности этих элементов. Хотя существует множество фреймворков, которые призваны решить проблемы элементов интерфейса веб-приложений, да может и Shadow DOM стандартизируют, но, тем не менее, scope - тоже решение.
Какими браузерами это поддерживается?
Кхм... да пока никакими! Только работы по поддержки этого свойства в WebKit идут...
Было бы неплохо...
Основная критика, которую народ высказывает по поводу scope - это то, что новая возможности практически ничем не отличается от inline-стилей. Возможно, было бы логично сделать что-то вроде такого: <link rel="stylesheet" href="style.css" scoped for="scoped-element" />, - где вместо "scoped-element" был бы id родительского для этого стиля элемента. Но, умные люди, видимо, знают, почему так сделать нельзя. А жаль...
0 коммент.:
Отправить комментарий