Комментарий: трансформация HTML5 принесла нам множество очень полезных новых атрибутов, таких как заполнитель, загрузка, скрытая и т. Д. Каждый новый атрибут приносит нам новые методы управления и эффекты управления в элементах страницы
В частности, существует новый атрибут, который позволяет нам управлять свойствами нескольких элементов, а именно: Scoped. Недавно появившийся атрибут Scoped на теге стиля может сделать стиль CSS эффективным только на локальных элементах. В частности, дочерние элементы элемента, которые хранят этот стиль стиля, вступают в силу. Единственное отличие от обычного стиля заключается в том, что добавляется новый атрибут с общеровней:
<стиль обзор>
/ * стили идут сюда */
</style>
Стили с атрибутами обретков применяются только к текущему элементу и его детям. Встроенные стили по -прежнему являются более высоким приоритетом, чем стили, поэтому лучше избегать использования встроенных стилей. Вот сочетание нескольких стилей вместе, чтобы сравнить их диапазон эффективности:
<div>
<стиль обзор>
div {граница: 1px твердый зеленый; маржинальный бат: 20px; Мин-высот: 40px; }
.democontain {founale: #f8f8f8; }
</style>
<div> </div>
<div>
<стиль обзор>
div {фон: LightBlue; Граница: 1px твердый синий; }
</style>
<div> </div>
</div>
<div> </div>
</div>
В стилях Scoped вы можете использовать любые легальные теги в стиле CSS, такие как медиа -запросы, например:
<стиль обзор>
@Media только экран и (максимум: 1024px) {
div {founale: #000; }
}
</style>
Это новое свойство обладает очень полезной, особенно для тех, кто создает шаблоны, или пользователей CMS, или некоторых разработчиков, которые не могут управлять всем файлом стиля. Но следует отметить, что некоторые старые браузеры не поддерживают это свойство. В этом случае вам может потребоваться использовать плагин jQuery (https://github.com/thingsinjars/jquery-coped-css-plugin), чтобы восполнить эту проблему.