Будет ли неправильно иметь <style> в <body>?

12

В приведенном ниже коде я поместил внутреннюю таблицу стилей с тегом body вместо заголовка. Для одностраничного приложения я собираюсь сделать это для стилей, применимых только к этой странице, а не иметь отдельный файл pagespecific.css.

Есть сценарий, где это имеет недостаток, поскольку я не помещаю то же самое в головной раздел?

<!-- myPartial.html starts here --> 
<!-- Like to keep styles unique to this html right here in this file --> 
<div>
  <style>
    body { background-color: red; }
    #myText { color: white; }
  </style>

  <span id='myText'>Hello</span>
</div>
<!-- myPartial.html ends here -->

html css

— Сарань
источник

18

styleЭлемент внутри bodyэлемента нарушает HTML синтаксис правил. (За исключением того, что в соответствии с черновиками HTML5 это разрешено в некоторых условиях, если scopedатрибуты присутствуют; этот атрибут поддерживается некоторыми браузерами.) С другой стороны, браузерам все равно. Деление на headи bodyэлементы является теоретическим.

Тем не менее, вы ничего не получите, используя неверный синтаксис, в отличие от размещения styleвнутри head. Единственным оправданием могут быть технические ограничения в некоторых авторских средах, которые могут помешать вам внести что-либо в эту headчасть.

Проблема использования styleэлемента по сравнению с внешней таблицей стилей linkполностью ортогональна этому вопросу.

— Юкка К. Корпела
источник

1

Первая часть вашего ответа не обязательно верна .

— patricksweeney

1

@patricksweeney, я думаю, что это несколько теоретически в этом контексте, но правильное наблюдение; ответ обновлен.

— Юкка К. Корпела

Я воспринимаю «браузеры безразлично» как позитив для моего подхода. Поскольку мои страницы являются частичными (Single-Page-Application), у меня не может быть раздела <head>, поэтому я пытаюсь поместить внутрь <body> или внутри элементов body.

— Саран

2

@Galaxy, я не понимаю, почему в одностраничном приложении не хватает headэлемента. HTML-страница всегда есть.

— Юкка К. Корпела

@ JukkaK.Korpela, я обновил часть кода в своем вопросе, чтобы ответить на ваш вопрос.

— Саран

6

(Поскольку мы находимся здесь в SE.SX, более стратегический подход может стать ценным дополнением к обычным техническим соображениям.)

[преамбула] Спецификация HTML5 является постоянно движущейся целью, и у них есть политика, позволяющая следить за установившейся общей практикой. Они устарели и возродили особенности в прошлом, изменили значение других, сместили фокус методических рекомендаций и т. Д. Это написано не на всю вечность со всей мудростью человечества, доступной одновременно. Спекуляция не является священным источником истины. Вполне естественно, что иногда браузеры правы. [/ Преамбулы]

Ситуация ОП в подавляющем большинстве случаев является общепринятой и действительной.

У вас есть CMS с разработанной и установленной темой, весь CSS-файл загружен должным образом из HEAD, и вот вы, редактор страниц, оставили модное окно WYSIWYG, которое вы можете (слава Богу!) Переключить в «режим исходного кода» и введите (вставьте) в HTML-разметку (ранее созданную с помощью более подходящих инструментов). К счастью, вы даже можете включить STYLEтеги (возможно, из-за случайного упущения в фильтре тегов) ... День спасен от множества повторяющихся разрушающих душу ворчаний. Но у вас все еще нет никаких средств для вмешательства в элемент HEAD системы из сценария редактирования страницы.

Должно ли это лишить вас возможности использовать ваш CSS простым способом с вашими фрагментами HTML, просто потому, что в спецификации так сказано?

Или у вас есть одностраничное приложение AJAX.

Он работает без перезагрузки в течение длительного сеанса, и есть синдицированный контент, поступающий из различных случайных источников, все в произвольном и независимом стиле. Требовать, чтобы они были сначала преобразованы, чтобы использовать только встроенные STYLEатрибуты вместо того, чтобы просто STYLEидти со встроенным элементом, было бы абсурдно.

Более того: вы можете a) уже встраивать любой CSS в любом месте BODYчерез STYLEатрибуты, так что CSS в любом случае «теоретически» разрешен; и b) вы уже можете делать все, что захотите, практически с любым стилем, когда захотите (и даже больше) из Javascript, так что CSS также уже можно неправильно использовать патологически неэффективными способами. И никто из нас никогда не будет возражать против этих особенностей. Как и W3C.

Итак, что же такого плохого в STYLEэлементах BODY? Каковы те дополнительные неблагоприятные последствия, которые это добавило бы к нашему широкому арсеналу злоупотреблений для конструкций HTML? Более низкая производительность? Вероятно. Иногда.

Является ли это веской причиной отмены этой невероятно полезной практики, поддерживаемой каждым браузером по определенной причине? Не за миллион миль!

Мы не идиоты. Ну, не все или не всегда ...;) Техники с риском плохой работы могут быть просто задокументированы , а не просто запрещены. Раньше у нас были Java-апплеты, и мы выжили. Неправильное использование автомобилей может привести к несчастьям, даже пищу можно использовать беспокоящими, неэффективными способами, а водители, которые могут есть, могут быть в среднем даже глупее, чем обычный веб-дизайнер. Кроме того, дорогой W3C, не нужно беспокоиться: сердитые стада тинкеров-HTML, отстреливших свои ноги STYLEэлементами, BODYвсе еще не могут пойти за W3C и отомстить. Они не знают адрес. И у них нет ног.

Итак, пожалуйста: сделайте так, чтобы ваш голос был услышан, чтобы STYLEстать законным в BODY! Послушное цитирование текста, но неспособность предоставить жизнеспособную альтернативу, которая лучше, чем текущая ситуация, не поможет. На самом деле это угроза этой последней инстанции.

Помните: спецификация HTML5 называется рекомендацией .

— lunakid
источник

Обновление: спецификации , наконец , догнали: STYLEв настоящее действует в BODY! ;)

— lunakid

1

Обновление 2: спецификации не попали в ловушку, потому что они передумали (кликните по ссылке лунакида, она была обновлена).

— Максимилиан Ломейстер

2

Спецификация HTML гласит, что

Элемент стиля без атрибута scoped ограничен отображением в заголовке документа.

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

В настоящее время только Firefox поддерживает атрибут scoped. http://www.w3schools.com/tags/att_style_scoped.asp

— CRAD
источник

5

Сайт w3schools не должен упоминаться как ссылка или вообще не указываться; см. w3fools.com

— Юкка К. Корпела

2

И это не отвечает на вопрос.

— Юкка К. Корпела

1

Спасибо @ JukkaK.Korpela, это была первая ссылка, которую я нашел, ссылаясь на поддержку браузера атрибута scoped. Другой комментарий дает гораздо лучшую цитату. +1 твой ответ -1 твой менее конструктивный комментарий.

— crad

+1 за указание на спецификацию, а также на отсутствие поддержки области видимости (что необходимо для соблюдения спецификации). Я думаю, что вы должны были прочитать ответ, прежде чем прыгнуть туда пистолет @ JukkaK.Korpela, очень бедный. Вы не можете получить больше доверия, чем спецификация, и она отлично отвечает на вопрос. « Будет ли неправильной идеей иметь стиль в теле » - согласно спецификации « Да, это будет ».

— Фергус в Лондоне

1

Есть несколько технических причин, по которым ваш css находится в файле и теге стиля:

Возможность использования миниатора CSS (я не верю, что минификаторы работают с тегами стиля)
Чтобы файл css мог быть кэширован браузером.

Некоторые основанные на мнении причины использовать файл:

Вы можете использовать замечательный препроцессор CSS, такой как Sass (Compass) или Less.
Вы поддерживаете два способа добавить CSS в свое приложение.

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

— pllee
источник