Теги стиля и скрипта в теле HTML... почему бы и нет?
[Это связано с этим вопросом, но не с электронной почтой.]
Во многих случаях, особенно при работе с CMS или чьим-либо фреймворком, встраивать гораздо проще <style> теги и <script> теги в <body> чем в <head>, Кажется, это работает в IE6, IE7 (Windows), Firefox 3.x и Safari (OS X).
Строго говоря, это неправильно? И если да, то какие негативные последствия это может вызвать... кроме того, что некоторые клиенты их полностью игнорируют?
Примечание: рад, что все хотят поговорить о СУХОЙ и централизованных стилях. Представьте себе на секунду, что я хочу использовать теги стиля в документе, потому что они НЕ ГЛОБАЛЬНЫ и что У меня нет доступа к заголовку на основе страницы. По какой-либо причине, будь то, что сайт отличается на постраничной основе, или на основе абзаца или что-то еще. Меня не интересует, что трудно отследить и изменить. Я беспокоюсь о возможных последствиях использования стиля в теле.
Вы централизуете вещи, которые являются центральными. Все остальное раздуто в центральных таблицах стилей.
7 ответов
Хотя спецификации в явном виде указывают теги стиля, не допускаются в теге body, спецификации - это не все, что имеет значение. Теги стилей поддерживаются в теле каждым основным браузером, и в конечном итоге именно так пользователи видят ваш сайт.* Хотя в индустрии браузеров уже давно наблюдается стремление к улучшению стандартов и поддержки стандартов, существует также общий толчок к тому, чтобы сделать поврежденные документы как и можно.
Google, который возглавляет работу над спецификацией HTML5, одновременно поддерживает google.com, который нарушает спецификации, чтобы сохранить байты, исключая кавычки из значений его атрибутов, используя хаки селекторов против спецификации CSS, включая теги сценариев без типа или языка и ссылку теги без типа. Пурист может утверждать, что один из наиболее часто используемых сайтов в Интернете нарушает спецификации и подвергается серьезной опасности быть ужасно обманутым. Или мы можем рассуждать, что ни один браузер не будет широко использоваться, если не сможет использовать такие широко используемые хаки в спецификации.
Таким образом, вопрос заключается скорее в том, в каком направлении движется индустрия браузеров - что опять-таки является одной из лучших спецификаций, но также делает все возможное, чтобы соблюдать цели страниц, которые нарушают эти спецификации. Бьюсь об заклад, теги стиля будут работать в теле еще долго.
* На момент написания статьи теги стиля в теле поддерживаются с типом документа HTML5 в Firefox 3+, IE6+, Safari 2+, Chrome 12+. Поддержка, вероятно, уходит дальше, но эти браузеры редко встречаются в сети.
Контексты, в которых <script> а также <style> использование тегов зависит от типа документа, который вы используете. Например, я предполагаю, что вы используете тип документа HTML5:
<!DOCTYPE html>
Тег script имеет три контекста под типом HTML5:
- Где ожидается содержание метаданных.
- Где фразовое содержание ожидается.
- Где ожидаются элементы поддержки сценариев.
Тег стиля имеет немного более сложную контекстную структуру в соответствии с типом HTML5:
- Если атрибут scoped отсутствует: где ожидается содержание метаданных.
- Если атрибут scoped отсутствует: в элементе noscript, который является дочерним элементом элемента head.
- Если атрибут scoped присутствует: где ожидается содержимое потока, но перед любым другим содержимым потока, кроме пробелов между элементами и элементов стиля, а не как дочерний элемент элемента, модель содержимого которого прозрачна.
По сути, это говорит о том, что вы можете поместить тег стиля и тег сценария в тело, так как тело - это место, где мы размещаем контент потока и контент фраз.
Как всегда, обратитесь к спецификации для doctype, который вы используете.
Краткий ответ:
STYLEэлемент допускается только как дочерний элементHEADэлементSCRIPTэлемент допускается как дочерний элементHEADэлемент,BODYelement и везде, где допускаются встроенные элементы.
Подробный ответ:
STYLEопределяется в head.misc:
<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->
А элементы head.misc могут быть только детьми HEAD элемент. ТакSTYLEразрешено быть только ребенкомHEADэлемент.
SCRIPT определяется в head.misc и в специальных:
<!ENTITY % special
"A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">
И специальный определен, чтобы быть встроенным:
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
Дополнительно SCRIPT также разрешено быть ребенком BODY элемент. Так SCRIPT разрешено в HEAD элемент nad везде, где разрешено использование inline.
Два возможных ответа для стиля в теле:
Используйте встроенный стиль. Правда, вы потеряете преимущества внутреннего и внешнего стиля, но если у вас нет доступа к заголовку, то у вас нет доступа к заголовку.
Используйте атрибут scoped в элементе style. Это новшество в HTML5, но идея заключается в том, чтобы ограничить область действия CSS частью страницы, например, одним div. Плохая новость заключается в том, что он еще не поддерживается (по состоянию на июль 2011 года) и не имеет обратной совместимости. Но есть (предположительно) плагин JQuery, который может помочь. Для получения дополнительной информации:
Ну, у вас есть проблема непосредственного встраивания стилей и скриптов в ваш контент. Основной мантрой здесь является принцип СУХОГО (не повторяй себя). Вы можете использовать сценарий или определенный стиль в нескольких местах. Когда этот стиль или сценарий требуют модификации, теперь вы можете отправиться на поиски мусора для всех мест, где существует этот код. Хранение ваших стилей и сценариев в общем месте - это идеальное решение.
С другой стороны, если это незначительная проблема стиля (подталкивание пикселей или что-то, связанное только с этим одним видом), это, вероятно, хорошо.
Но почему бы вам style-метки в организме? В любом случае стили являются глобальными, поэтому я не могу найти никакой логической причины для этого.
Чтобы еще больше упростить и разделить вещи, вы должны также использовать внешние таблицы стилей.
Скрипты разрешены и существуют по причине: они могут дать вывод, их следует запускать в определенное время и по другим причинам.
Самая большая проблема, на мой взгляд, это удобство. Если вы хотите изменить стиль страницы, это сделать гораздо проще, если вся информация о стиле и скрипте находится в одной области. Информация о стиле / скрипте может быть в <style> узел, в style атрибут узла (то есть <body style='...'>) или во внешнем файле (т.е. <link rel='stylesheet' type='text/css' href='style.css' />). Гораздо проще использовать постоянное местоположение, чем пытаться выследить все места, где может возникнуть стиль.
Стоит также отметить, что высказывание "помимо того, что у некоторых клиентов его полностью игнорируют" сродни высказыванию "помимо взрыва при ударе сзади" или "помимо отклонения от курса и приземления в гражданском районе". Это достаточно серьезная проблема, чтобы оправдать использование стандартной практики.