Какая разница, если я поместил файл CSS внутри <head>или <body>? - PullRequest
149 голосов
/ 29 октября 2009

Обычно CSS-файлы помещаются внутрь <head></head>, что если я положу их внутрь <body></body>, какая разница?

Ответы [ 12 ]

109 голосов
/ 29 октября 2009

Просто добавим к тому, что jdelStrother упомянул о спецификациях w3 и ARTstudio о рендеринге в браузере.

Рекомендуется, потому что, когда у вас объявлен CSS до запуска <body>, ваши стили уже загружены. Таким образом, пользователи очень быстро видят, что что-то появляется на их экране (например, цвета фона). Если нет, пользователи некоторое время видят пустой экран, прежде чем CSS достигает пользователя.

Кроме того, если вы оставляете стили где-то в <body>, браузер должен повторно отобразить страницу (новую и старую при загрузке), когда объявленные стили были проанализированы.

38 голосов
/ 29 октября 2009

В последних версиях спецификации HTML теперь разрешен тег <style> внутри элементов тела. https://www.w3.org/TR/html5/dom.html#flow-content Кроме того, атрибут scoped, который раньше был обязательным условием наличия тега style в body, теперь устарел.

Это означает, что вы можете использовать тег style везде, где вам нужно, единственное влияние - это снижение производительности страницы из-за возможного перекомпоновки / перекрашивания, когда браузер удаляет стили дальше в дереве страниц.

Устаревший ответ:

Тег <style> не разрешен в пределах <body> в соответствии со спецификациями w3. (Конечно, вы можете применять встроенные стили через <div style="color:red">, если это необходимо, но обычно считается плохое разделение стиля и содержимого)

13 голосов
/ 13 сентября 2013

Помещение CSS в тело означает, что он загружается позже. Эту технику используют, чтобы браузер начал быстрее рисовать интерфейс (т. Е. Он удаляет этап блокировки). Это важно для удобства пользователей на смартфонах.

Я делаю все возможное, чтобы оставить одну маленькую CSS на <head>, а остальные переместил внизу. Например, если страница использует CSS JQuery UI, я всегда перемещаю ее внизу <body>, прямо перед ссылками на JQuery javascript. По крайней мере, все элементы, не относящиеся к Jquery, уже можно нарисовать.

7 голосов
/ 29 октября 2009

Голова предназначена для (цитируя W3C):

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

См. Глобальная структура HTML-документа . Поскольку CSS не является содержимым документа, он должен быть в заголовке.

Также любой другой веб-разработчик будет ожидать увидеть его там, так что не путайте вещи, помещая их в тело, даже если это работает!

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

4 голосов
/ 11 августа 2016

Хотя тег style в теле недопустим, тег link есть, поэтому, если вы ссылаетесь на внешнюю таблицу стилей, все браузеры должны отображать и правильно использовать CSS, когда используется в body.

Источник: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element

4 голосов
/ 29 октября 2009

Стандарты ( HTML 4.01: элемент стиля ) четко указывают, что тег стиля разрешен только внутри тега head. Если вы поместите теги стиля в тег body, браузеры все равно попытаются извлечь из него максимальную пользу.

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

1 голос
/ 29 октября 2009

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

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

Независимо от того, используете ли вы переходный или строгий тип документа, он все равно будет недействительным в соответствии с (X) спецификациями HTML.

0 голосов
/ 05 августа 2018

Два противоречивых ответа:

со страницы MDN по тегу ссылки:

Элемент <link> может встречаться в <head> или <body>. элемент, в зависимости от того, имеет ли он тип ссылки, который в порядке тела. За Например, тип ссылки таблицы стилей body-ok, и поэтому <link rel="stylesheet"> разрешено в теле. Это не однако лучшая практика; имеет смысл разделить ваши элементы <link> от содержания вашего тела, положить их в голову.

Из CSS Полное руководство (4-е издание / 2017), стр. 10

Чтобы успешно загрузить внешнюю таблицу стилей, ссылка должна быть размещена внутри элемента head, но не может быть помещена ни в какой другой элемент.

0 голосов
/ 06 мая 2015

Какая разница?

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

Минусы: Немного медленнее, может не сработать когда-нибудь в далеком будущем.

Мое общее мнение об этом: Не делайте этого, если вам не нужно, но если вам нужно, не теряйте из-за этого сон.

0 голосов
/ 12 марта 2015

Помещение <style> в тело хорошо работает во всех современных браузерах.

Я использовал это на eBay.

Если это работает, не пинайте его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...