Должен ли <STYLE>быть в <HEAD>документа HTML? - PullRequest
Новая
       16

Должен ли <STYLE>быть в <HEAD>документа HTML?

124 голосов
/ 20 августа 2009

Строго говоря, теги style должны находиться внутри head документа HTML? Стандарт 4.01 подразумевает это, но это прямо не указано:

Элемент STYLE позволяет авторам поместите правила таблицы стилей в главу документ. HTML разрешает любое число элементов STYLE в разделе HEAD документа.

Я говорю «строго говоря», потому что у меня есть приложение, которое помещает элементы стиля в тело, и все браузеры, с которыми я тестировал, похоже, используют элементы стиля. Мне просто интересно, действительно ли это законно.

Ответы [ 10 ]

98 голосов
/ 20 августа 2009

style предполагается включить только в head документа.

Помимо точки проверки, одно предостережение, которое может вас заинтересовать при использовании style на body, - это флэш-содержимое неустановленного содержимого . Браузер получит элементы, которые будут иметь стиль после того, как они отобразятся, заставляя их сдвигаться по размеру / форме / шрифту и / или мерцанию. Это вообще признак плохого мастерства. Как правило, вы можете избежать использования style где угодно, но старайтесь избегать его, когда это возможно.

В HTML 5 появился атрибут scoped, который позволял включать теги style повсюду в теле, но затем они снова его удаляли.

19 голосов
/ 25 июня 2012

Хотя другие ответы верны, я удивлен, что никто не объяснил , где стандарты запрещают стили вне head.

Это на самом деле в разделе head Элемент (и в DTD ): 

<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

Да, я знаю. DTD трудно читать.

Это единственное место, где встречается элемент STYLE, поэтому неявно он недопустим в других местах.

18 голосов
/ 13 августа 2014

Согласно последним спецификациям WhatWG и W3C, да, style элементы должны всегда находиться в head. Какое-то время спецификации включали атрибут scoped для элементов style, который, когда он присутствовал, позволял им размещаться внутри элемента в теле для стилизации только потомков этого элемента ... но эта функция никогда не была доступна реальный браузер (по крайней мере, без необходимости включения через флаг разработчика) и был удален из обеих спецификаций "из-за отсутствия интереса со стороны разработчика" . Следовательно, элементы style теперь разрешены только в тех контекстах, которые допускают содержание метаданных, которым является только заголовок.

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

В спецификации WhatWG есть следующее:

4.2.6. Элемент style

Категории

Содержание метаданных .

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

Где ожидается содержание метаданных .
В элементе <noscript>, который является дочерним элементом элемента <head>.

CTRL-Fing в одностраничной спецификации показывает, что единственным элементом, модель содержимого которого включает в себя содержимое метаданных, является элемент head.

Между тем, последний проект спецификации W3C содержит абсолютно идентичные формулировки, за исключением того, что они также перечисляют содержимое метаданных в модели содержимого элементов template. (WhatWG по-разному интерпретирует template и отображает модель контента как nothing.)

Ненормативный индекс элементов в спецификации WhatWG подтверждает, что единственными допустимыми родителями для элемента style являются элементы head или noscript. (Версия того же индекса W3 неверно утверждает, что содержимое потока может содержать <style> элементов, но это ошибка, введенная W3C во время удаления атрибута scoped. У меня запрос на извлечение откройте, чтобы исправить это.)

15 голосов
/ 20 августа 2009

Они не должны выходить за пределы головы, но они все равно работают; хотя вы можете заметить быстрое мерцание. Сайт не должен проверяться тегом style вне головы, но действительно ли это имеет значение? Кроме того, теги ссылок работают и вне головы, хотя они и не должны.

4 голосов
/ 20 августа 2009

Как и в других ответах говорилось, что на самом деле это не обязательно должно быть там. Тем не менее, это не будет проверять. Это может иметь или не иметь значения в этом случае, но имейте в виду, что рендеринг html полностью зависит от браузеров. Из того, что я знаю, все используемые сегодня браузеры будут поддерживать его вне головы, но вы не можете гарантировать это для будущих браузеров и будущих версий браузеров.

Придерживайтесь стандарта, и вы в большей безопасности. Насколько безопаснее спорить.

3 голосов
/ 05 декабря 2018

Рекомендация HTML5.2 W3C, 14 декабря 2017 г. (не более ранняя версия, упомянутая выше) теперь говорит, что вы можете включить <style>.

"В теле, где ожидается поток." (раздел 4.2.6)

3 голосов
/ 20 августа 2009

Тег стиля в любом месте, кроме <head>, не будет проверяться правилами W3C.

2 голосов
/ 08 июля 2016

Согласно этому сайту, HTML5.1 (в черновике) и WHATWG позволяют помещать тег <style> в тело:

http://www.html.am/tags/html-style-tag.cfm

Похоже, что браузеры уже давно поддерживаются. Согласно этому ответу StackOverflow, Firefox 3+, IE6 +, Safari 2+ и Chrome 12+ поддерживают его:

https://stackoverflow.com/a/10989663/297793

1 голос
/ 31 августа 2016

В соответствии со спецификацией HTML 5.2 (в черновике) тег стиля допускается только в заголовке документа.

HTML 5.2 Черновик для тега стиля (18 августа 2016 г.)

Элемент стиля ограничен отображением в заголовке документ.

0 голосов
/ 17 августа 2017

Вы можете использовать тег style внутри раздела head или body, а также вне тега html (внешний html не рекомендуется). В проектах реального времени много раз вы можете видеть, что они используют тег стиля вне HTML-тега

...