ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

Можно ли использовать HTML-элемент style внутри body?

Читая подраздел 1.9 «Размеры и прокрутка элементов» второй части учебника по JavaScript, наткнулся на такой пример кода на языках HTML и CSS:
<div id="example">
  ...Текст...
</div>
<style>
  #example {
    width: 300px;
    height: 200px;
    border: 25px solid #E8C48F;
    padding: 20px;
    overflow: auto;
  }
</style>

Очевидно, предполагается, что этот фрагмент кода располагается в теле (HTML-элемент body) HTML-страницы. Я сделал такой вывод из-за HTML-элемента div, который, по идее, должен располагаться именно в теле HTML-страницы. Следовательно, и идущий за div HTML-элемент style в данном случае тоже располагается в теле HTML-страницы.

Однако, ранее во всех учебниках по языкам HTML и CSS, в которые мне довелось заглядывать, было чётко написано, что HTML-элемент style должен находиться в заголовочной части (HTML-элемент head) HTML-страницы.

Я протестировал указанный выше код в трех браузерах (в «Microsoft Edge» на базе движка «Chromium» последней версии, в «Google Chrome» последней версии и в стареньком «Internet Explorer 11»), которые у меня установлены, поместив его в тело (HTML-элемент body) HTML-страницы. И во всех трех случаях браузеры отображают HTML-элемент div с применением указанных в HTML-элементе style стилей!

Итак, короткий ответ на вопрос из заголовка данного поста звучит так. Многие современные и старые браузеры обрабатывают HTML-элемент style, расположенный внутри тела (HTML-элемент body) HTML-страницы так, как будто данный HTML-элемент style на самом деле расположен внутри заголовочной части HTML-страницы, то есть HTML-страница отображается в браузере так, как, думаю, ожидает автор кода. Но размещение HTML-элемента style внутри HTML-элемента body противоречит текущей версии стандарта языка HTML и такой код HTML поэтому считается неправильным.

Вот большое интересное обсуждение по теме:
https://stackoverflow.com/questions/2830296/using-style-tags-in-the-body-with-other-html

Разберем теперь этот вопрос подробнее. Для этого, думаю, следует напрямую обратиться к текущей версии стандарта языка HTML. Но тут есть свои подводные камни.

До недавнего времени над стандартом HTML работали две организации: «W3C» («Консорциум Всемирной паутины», вики, сайт: w3.org) и «WHATWG» («Рабочая группа по технологиям гипертекстовых веб-приложений», вики, сайт: whatwg.org). Каждая из них публиковала свою версию стандарта HTML и эти версии порою конфликтовали и прямо противоречили друг другу. 28 мая 2019 года эти организации договорились, что с этого момента публикацией стандарта HTML будет заниматься только «WHATWG» на своем сайте (при этом «W3C» продолжит участвовать в разработке стандарта). Об этом можно почитать тут:

https://en.wikipedia.org/wiki/HTML5#W3C_and_WHATWG_conflict

Итак, теперь правильная ссылка на самую свежую версию стандарта HTML такая:
https://html.spec.whatwg.org/
https://html.spec.whatwg.org/multipage/

Ссылка на параграф 4.2.6, касающийся HTML-элемента style:
https://html.spec.whatwg.org/#the-style-element
https://html.spec.whatwg.org/multipage/semantics.html#the-style-element

Цитата:
Contexts in which this element can be used:
    Where metadata content is expected.
    In a noscript element that is a child of a head element.

Как видим, в текущей версии стандарта HTML контекст, в котором можно использовать HTML-элемент style, описывается двумя правилами. Второе из них относится к HTML-элементу noscript, поэтому сейчас оно нас не интересует.

То есть для нас сейчас важно только первое правило, гласящее, что HTML-элемент style можно использовать там, где ожидается контент вида «метаданные» (по-английски «metadata content»).

При этом по текущей версии стандарта HTML (параграф 4.3.1) HTML-элемент body может содержать контент вида «основной поток» (по-английски «flow content»).

И хоть «metadata content» и «flow content» частично пересекаются (см. параграф 3.2.5.2 текущей версии стандарта HTML), HTML-элемент style относится как раз к той части «metadata content», которая не входит по указанному стандарту в «flow content».

Я проверил код из начала поста, вставленный в HTML-элемент body, валидатором validator.w3.org и ожидаемо получил сообщение об ошибке:



Выводы. Хоть технически и получается использовать HTML-элемент style внутри HTML-элемента body, но я бы не стал пользоваться этим приемом в серьезных проектах, потому что поддержка такого поведения браузерами никем не гарантируется, раз она не соответствует стандарту HTML. То есть в будущем некоторые браузеры (или, возможно, вообще все браузеры) могут перестать это поддерживать. Зачем рисковать?
Tags: Образование, Программирование
Subscribe

Recent Posts from This Journal

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments