Должен ли <STYLE> быть в <HEAD> HTML-документа?
Строго говоря, делай style теги должны быть внутри head HTML-документ? Стандарт 4.01 подразумевает это, но это прямо не указано:
Элемент STYLE позволяет авторам размещать правила таблицы стилей в заголовке документа. HTML допускает любое количество элементов STYLE в разделе HEAD документа.
Я говорю "строго говоря", потому что у меня есть приложение, которое помещает элементы стиля в тело, и все браузеры, с которыми я тестировал, используют элементы стиля. Мне просто интересно, если это на самом деле законно.
10 ответов
style должен быть включен только на head документа.
Помимо точки проверки, одно предупреждение, которое может вас заинтересовать при использовании style на body это вспышка нестандартного контента. Браузер получит элементы, которые будут стилизованы после их отображения, заставляя их смещаться по размеру / форме / шрифту и / или мерцанию. Это вообще признак плохого мастерства. Как правило, вы можете сойти с рук style где угодно, но старайтесь избегать этого всякий раз, когда это возможно.
HTML 5 представил scoped атрибут, который позволил style теги должны быть включены везде в теле, но затем они удалили его снова.
Согласно последним спецификациям WhatWG и W3C, да, style элементы всегда должны быть в head, Какое-то время спецификации включали scoped атрибут для style элементы, которые, когда они присутствуют, позволяют размещать их внутри элемента в теле, чтобы стилизовать только потомков этого элемента... но эта функция никогда не достигала какого-либо реального браузера (по крайней мере, без необходимости включения через флаг разработчика) и был удален из обеих спецификаций "из-за отсутствия интереса к исполнителю". Как следствие, style элементы теперь разрешены только в контекстах, которые допускают содержание метаданных, которое является только заголовком.
(Хорошо, это не совсем так - вы можете легально поместить контент метаданных, включая style элементы, внутри template элемент внутри body, но это на самом деле не вступит в силу, если вы находитесь в браузере, который поддерживает шаблоны. Это действительно просто глупая техничность.)
В спецификации WhatWG сказано следующее:
4.2.6.
styleэлементКатегории:
Контексты, в которых этот элемент может быть использован:
Где ожидается содержание метаданных.
В<noscript>элемент, который является потомком<head>элемент.
CTRL-Fing в одностраничной спецификации показывает, что единственным элементом, модель содержимого которого включает в себя содержимое метаданных, является head элемент.
Между тем, последний черновой вариант спецификации W3C содержит абсолютно идентичные формулировки, за исключением того, что они также содержат список метаданных в модели содержимого. template элементы. (WhatWG концептуализирует template S по-разному и перечисляет свою модель контента как nothing.)
Ненормативный индекс элементов в спецификации WhatWG подтверждает, что единственно допустимые родители для style элемент является head или же noscript элемент. (Версия того же индекса W3 неверно утверждает, что содержимое потока может содержать <style> элементы, но это ошибка, внесенная W3C во время удаления scoped приписывать. У меня есть открытый запрос на исправление.)
Хотя другие ответы верны, я удивлен, что никто не объяснил, где стандарты запрещают стили за пределами 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 элемент встречается, так что неявно он недействителен в другом месте.
Они не должны выходить за пределы головы, но они все равно работают; хотя вы можете заметить быстрое мерцание. Сайт не должен проверяться тегом style вне головы, но действительно ли это имеет значение? Кроме того, теги ссылок работают и вне головы, хотя и не должны.
Как и в других ответах говорится, что на самом деле не должно быть там. Тем не менее, это не будет проверять. Это может иметь или не иметь значения в этом случае, но имейте в виду, что рендеринг html полностью зависит от браузеров. Из того, что я знаю, все используемые сегодня браузеры будут поддерживать его вне головы, но вы не можете гарантировать это для будущих браузеров и будущих выпусков браузеров.
Придерживайтесь стандарта, и вы в большей безопасности. Насколько безопаснее спорить.
Рекомендация HTML5.2 W3C от 14 декабря 2017 года (а не предыдущая версия, упомянутая выше) теперь гласит, что вы можете включить <style>,
"В теле, где ожидается поток содержимого". (раздел 4.2.6)
Согласно этому сайту, HTML5.1 (в проекте) и WHATWG позволяют <style> тег для размещения в теле:
http://www.html.am/tags/html-style-tag.cfm
Похоже, что это поддерживается браузерами довольно долгое время. Согласно этому ответу Stackru, Firefox 3+, IE6+, Safari 2+ и Chrome 12+ поддерживают его:
/questions/9482483/tegi-stilya-i-skripta-v-tele-html-pochemu-byi-i-net/9482494#9482494
Тег стиля где угодно, но внутри <head> не будет подтверждено правилами W3C.
Согласно спецификации HTML 5.2 (в черновике), тег style разрешен только в заголовке документа.
Проект HTML 5.2 по тегу стиля (18 августа 2016 г.)
Элемент стиля ограничен отображением в заголовке документа.
Вы можете использовать тег style внутри раздела head или body, а также вне тега html (внешний html не рекомендуется). В проектах реального времени много раз вы можете видеть, что они используют тег style вне тега html