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

style должен быть включен только в head документа.

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

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

Короткий ответ

• Согласно текущей спецификации, да, style элементы должны всегда находиться в head. Нет никаких исключений (кроме элемента style внутри template элемента , если хотите посчитать).

• Исторически так было не всегда. Если вас интересуют детали спецификации и ее история, продолжайте читать.

• Независимо от того, что говорится в спецификации, использование элементов style в body более или менее работает во всех основных браузерах. Однако это считается плохой практикой как потому, что нарушает спецификацию, так и потому, что может вызвать нежелательные последствия, такие как ухудшение производительности рендеринга или «вспышка нестилизованного содержимого».

style элементов не существует в HTML 2. Они были введены в HTML 3.0, где были включены в список элементов, которые можно было включить в Элемент Head, но не включен в список элементов, которые могут присутствовать в Элемент Body. Таким образом, на тот момент, когда элемент был впервые определен, он мог быть включен только в head.

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

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

Решение WhatWG относительно несоответствия между нормативной спецификацией и ненормативным индексом заключалось в том, чтобы принять мой патч исправление ненормативного индекса.

W3C, с другой стороны, отклонил мой эквивалентный патч в пользу обновления нормативной спецификации, чтобы разрешить использование style элементов в body, с оговоркой, что это может вызвать проблемы и должно выполняться «с осторожностью». Причина этого изменения заключалась в том, чтобы привести спецификацию в соответствие с реальным поведением браузера.

Таким образом, с марта 2017 года официальный ответ на этот вопрос зависел от того, какую организацию по стандартизации вы выбрали для прослушивания. Если вы указали (как правило, более уважаемую) спецификацию WhatWG, то элемент style не был разрешен в body. Если вы указали спецификацию W3C, то это разрешено, но не рекомендуется.

Это глупое положение вещей было положено (возможно, как и многие другие подобные несоответствия) с помощью Апрельский мирный договор 2019 года между W3C и WhatWG, в котором было согласовано, что спецификация WhatWG станет единственным действующим стандартом HTML, при этом W3C будет просто выпускать снимки из нее в виде пронумерованных спецификаций HTML вместо параллельной разработки конкурирующей спецификации. Таким образом, изменение с 2017 года на вилку W3C, которая допускала style элементов в body, больше не является частью какой-либо текущей спецификации; это просто историческое любопытство.

Итак, сегодня нам достаточно взглянуть на спецификацию WhatWG, чтобы определить, что официально разрешено. Он говорит следующее:

4.2.6. Элемент style

Категории:

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

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

Где ожидается содержание метаданных.
В элемент <noscript>, являющийся дочерним элементом < элемент href = "https://html.spec.whatwg.org/multipage/semantics.html#the-head-element" rel = "nofollow noreferrer"> _ 22_.

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

Ненормативный указатель элементов, о котором я упоминал ранее, об исправлении подтверждает, что единственными допустимыми родительскими элементами для элемента style являются элемент head или noscript.

Хотя другие ответы верны, я удивлен, что никто не объяснил, где стандарты запрещают стили за пределами 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, поэтому неявно он недопустим в другом месте.

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

Как и в других ответах, на самом деле этого не должно быть. Однако это не будет подтверждено. В данном случае это может иметь значение, а может и не иметь значения, но имейте в виду, что рендеринг HTML полностью зависит от браузеров. Насколько я знаю, все используемые браузеры сегодня будут поддерживать вывод за пределы головы, но вы не можете гарантировать это для будущих браузеров и будущих выпусков браузеров.

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

Согласно этому сайту, 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

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

«В теле, где ожидается текучесть». (раздел 4.2.6)

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

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

HTML 5.2 Draft on Style Tag ( 18 августа 2016 г.)

Элемент стиля может появляться только в заголовке документа.

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