теги стиля и скрипта в теле HTML ... почему бы и нет? - PullRequest
Новая
       39

теги стиля и скрипта в теле HTML ... почему бы и нет?

43 голосов
/ 01 сентября 2009

[Это связано с этим вопросом , но не с электронной почтой.]

Во многих случаях - особенно при работе с CMS или чьим-либо фреймворком, гораздо проще встраивать теги <style> и <script> в <body>, чем в <head>. Кажется, это работает в IE6, IE7 (Windows), Firefox 3.x и Safari (OS X).

Строго говоря, это неправильно? И если да, то какие негативные последствия это может вызвать ... кроме того, что некоторые клиенты их полностью игнорируют?

Примечание: Рад, что все хотят поговорить о DRY и централизованных стилях. Представьте себе на секунду, что я хочу использовать теги стилей в документе, потому что они НЕ ГЛОБАЛЬНЫ, и что я не имею доступа к заголовку на основе страницы. По какой-либо причине, будь то, что сайт отличается на постраничной основе, или на основе абзаца или что-то еще. Меня не интересует, что трудно отследить и изменить. Я беспокоюсь о возможных последствиях использования стиля в теле.

Вы централизуете вещи, которые являются центральными. Все остальное раздуто в центральных таблицах стилей.

Ответы [ 7 ]

26 голосов
/ 12 июня 2012

Несмотря на то, что спецификации явно указывают теги стиля, не допускаются в теге body, спецификации не все, что имеет значение. Теги стилей поддерживаются в теле каждым основным браузером, и именно так пользователи видят ваш сайт. * Хотя в индустрии браузеров уже давно существует стремление к улучшению стандартов и поддержки стандартов, существует также общий толчок к тому, чтобы сделать поврежденные документы как и можно.

Google, который возглавляет работу над спецификацией HTML5, одновременно поддерживает google.com, который нарушает спецификации для сохранения байтов, исключая кавычки из значений его атрибутов, используя хаки селектора для спецификации CSS, включая теги сценариев без типа или языка и ссылки теги без типа. Пурист может утверждать, что один из наиболее часто используемых сайтов в Интернете нарушает спецификации и подвергается серьезной опасности быть ужасно обманутым. Или мы можем утверждать, что ни один браузер не будет широко использоваться, если он не может отображать такие широко используемые хаки в спецификации.

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

* На момент написания статьи теги стиля в теле поддерживаются с помощью документа HTML5 в Firefox 3+, IE6 +, Safari 2+, Chrome 12+. Поддержка, вероятно, уходит дальше, но эти браузеры редко встречаются в сети.

15 голосов
/ 01 сентября 2009

Контексты, в которых могут использоваться теги <script> и <style>, зависят от используемого вами типа документа. Например, я предполагаю, что вы используете тип документа HTML5: 

<!DOCTYPE html>

Тег сценария имеет три контекста под типом HTML5:

  1. Где ожидается содержание метаданных .
  2. Где ожидается формулировка контента .
  3. Где ожидающие скрипта элементы ожидаются.

Тег стиля имеет немного более сложную контекстную структуру в соответствии с типом HTML5:

  1. Если атрибут scoped отсутствует: где содержимое метаданных ожидается.
  2. Если атрибут scoped отсутствует: в элементе noscript , который является дочерним для элемента head .
  3. Если присутствует атрибут scoped : где ожидается содержимое потока , но перед любым другим содержимым потока, кроме межэлементных пробелов и элементов стиля, а не как потомок элемент, модель содержимого которого прозрачна.

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

Как всегда, обратитесь к спецификации для используемого типа документа.

9 голосов
/ 01 сентября 2009

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

Подробный ответ:

STYLE определено в head.misc : 

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->

И элементы head.misc могут быть только потомками элемента HEAD. Так что STYLE допускается только как дочерний элемент HEAD.

SCRIPT определяется в head.misc и в special : 

<!ENTITY % special
   "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

И специальный определяется как inline : 

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

Кроме того, SCRIPT также может быть дочерним для элемента BODY. Таким образом, SCRIPT допускается в элементе HEAD и везде, где разрешено inline .

3 голосов
/ 15 июля 2011

Два возможных ответа для стиля в теле:

  1. Используйте встроенный стиль.Да, вы потеряете преимущества внутреннего и внешнего стиля, но если у вас нет доступа к заголовку, у вас нет доступа к заголовку.

  2. Использованиеатрибут scoped в элементе style.Это ново для HTML5, но идея состоит в том, чтобы ограничить область действия CSS частью страницы, например, одним div.Плохая новость заключается в том, что он еще не поддерживается (по состоянию на июль 2011 года) и не имеет обратной совместимости.Но есть (предположительно) плагин JQuery, который может помочь.Для получения дополнительной информации:

2 голосов
/ 01 сентября 2009

Что ж, у вас есть проблема непосредственного встраивания стилей и скриптов в ваш контент. Основной мантрой здесь является принцип СУХОГО (не повторяй себя). Вы можете использовать сценарий или определенный стиль в нескольких местах. Когда этот стиль или сценарий требуют модификации, теперь вы можете отправиться на поиски мусора для всех мест, где существует этот код. Хранение ваших стилей и сценариев в общем месте - это идеальное решение.

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

1 голос
/ 01 сентября 2009

Но почему у вас в теле style метки? В любом случае стили являются глобальными, поэтому я не могу найти никакой логической причины для этого.

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

Скрипты разрешены и существуют по причине: они могут выдавать выходные данные, их следует запускать в определенное время и по другим причинам.

0 голосов
/ 01 сентября 2009

Самая большая проблема, на мой взгляд, это удобство. Если вы хотите изменить стиль страницы, это сделать гораздо проще, если вся информация о стиле и скрипте находится в одной области. Информация о стиле / скрипте может находиться в узле <style>, в атрибуте style узла (т.е. <body style='...'>) или во внешнем файле (т.е. <link rel='stylesheet' type='text/css' href='style.css' />). Гораздо проще использовать единое местоположение, чем пытаться выследить все места, где может встречаться стиль.

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

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

Нет похожих вопросов

...