Каково текущее состояние атрибута "scoped" для элемента стиля в HTML5?

Здесь указано http://www.w3.org/TR/html-markup/style.html#style:

Разрешенные родительские элементы

любой элемент, который может содержать элементы метаданных, div, noscript, раздел, статья, в стороне

что <style> более или менее разрешен везде (где <div> разрешено) но, с другой стороны, я нашел более подробную информацию здесь http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-style-scoped

Контексты, в которых этот элемент может использоваться: (аннотация: стиль)

If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace, and not as the child of an element whose content model is transparent.

а затем в этом документе:

Атрибут scoped - это логический атрибут. Если присутствует, это указывает что стили предназначены только для поддерева, внедренного в стиле элемент родительского элемента, в отличие от всего документа.

Если атрибут scoped присутствует и элемент имеет родительский элемент, тогда элемент стиля должен быть первым node содержимого потока в его родительском элементе, отличном от межэлементного пробела, и модель содержимого родительского элемента не должна иметь прозрачного компонента.

Это означает, что есть (или будут) два разных элемента <style>: a

<style> - global - ~~ только внутри <head>
<"scopestyle"> - только (!) с bool scope attr и ~~ только в начале <div>

(PLS читает "~~" как "более или менее" )

Но более поздняя ссылка больше двух лет, и все браузеры (я тестировал Chrome, FF, IE, Opera) интерпретировали приток <style>, как если бы он был в заголовке. (и игнорировать AFAIK область - да - до сих пор нет стандарта)

Итак, мой вопрос из трех частей

Правильно ли моя интерпретация документов W3C (2 стиля - логика)?
Какое состояние сейчас - 2015?
И, возможно, кто-то там, кто знает, что на горизонте идет?

Ответ 1

Ваша интерпретация спецификации верна. Страница MDN в теге стиля содержит описание атрибута scoped.

scoped Если этот атрибут присутствует, то стиль применяется только к его родительскому элементу. Если отсутствует, стиль применяется ко всему документу.

Атрибут `scope`:

Вот рабочий пример этого, который будет работать только в Firefox 21+.

Пример:

<div>
  <p>Out of scope.</p>
  <div>
    <style scoped>
      p {
        background: green;
      }
    </style>
    <p>In scope (green background).</p>
  </div>
  <p>Out of scope.</p>
</div>

Ответ 2

Похоже, что атрибут "scoped" полностью исключен из спецификации HTML5. В текущей и предыдущей версиях все не упоминаются об этом.

Ответ 3

Многие из ответов здесь несколько устарели, поэтому вкратце рассказывается о том, что произошло с атрибутом scoped.

Первоначально (до HTML5) <style> не был "действительным" вне <head>, но поддерживался большинством или всеми браузерами. "Недействительно" означает, что валидаторы будут жаловаться на него, а спецификации (W3C HTML 4 и XHTML 1 series) говорят, что это не должно быть сделано. Но это сработало. И иногда это было плохо: независимо от того, где элемент <style> появился в документе, его правила будут применяться ко всему документу (на основе используемых селекторов, конечно). Это может привести к тому, что авторы напишут "местную" таблицу стилей, предназначенную для применения только в пределах области документа, но могут случайно переделать другие области.

Предложение HTML-атрибута HTML5 scoped предназначено для решения этой проблемы: оно указывает браузеру, что стили на этом листе будут применяться только к родительскому элементу <style> и его потомкам. Кроме того, в какой-то момент <style scoped> также должен был быть первым дочерним элементом его родителя, что делает его очень ясным для всех, кто читает код HTML, каков был объем. Элемент style без атрибута оставался действительным только в элементе <head>.

Прошло время, и недостаточно поставщиков внедрили новую функцию (Firefox и Chrome включили некоторую экспериментальную поддержку), поэтому она была в конечном итоге отключена. Поведение браузера остается таким же, как и до HTML 5, но текущая спецификация по крайней мере документирует его: <style> теперь является законным/действительным во всем документе, но спецификация предупреждает о возможных побочных эффектах (случайно рестайлинг-элементы).

При использовании современных спецификаций и браузера лучший и безопасный способ реализации стилей 'scoped' состоит в том, чтобы сделать это явно с помощью идентификаторов, как в этом фрагменте:

<div id="myDiv">
  <style>
    #myDiv p { margin: 1em 0; }
    #myDiv em { color: #900; }
    #myDiv whatever { /* ... */ }
  </style>
  <p>Some content here... </p>
</div>

div имеет атрибут id, и все правила в таблице стилей явно используют селектор id, чтобы обеспечить их применение только в этом div. Конечно, это все равно требует избежать столкновений с идентификаторами в документе, но уникальность уже является требованием атрибута id.

Хотя атрибут scoped был отброшен, этот подход выполняет свою работу, является удобочитаемым (конечно, как и любой код, он может быть запутан, но это не так), должен проверять и должен работать на довольно почти каждый браузер, совместимый с CSS.

PS: согласно спецификации, <style> внутри <body> должен проверяться. Однако валидатор Nu (помеченный как экспериментальный) все еще жалуется на это. Существует открытая проблема: https://github.com/validator/validator/issues/489

Ответ 4

Основная цель HTML5 заключалась в том, чтобы официально определить поведение, которое браузеры реализовали в основном "навсегда", независимо от предыдущих спецификаций HTML. Вы всегда можете использовать тег <style> в любом месте HTML-документа, поэтому с HTML5 вы все равно сможете. Это не изменится.

Для получения дополнительной информации здесь ссылка на текущий раздел спецификации HTML5 элемента <style>:

http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-style-element