Использование тегов <style> в <body> с другим HTML-кодом

<html>
  <body>
    <style type="text/css">
      p.first {color:blue}
      p.second {color:green}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>

    <style type="text/css">
      p.first {color:green}
      p.second {color:blue}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>
  </body>
</html>

Как браузер должен отображать css, который не соприкасается? Предполагается ли он генерировать некоторую структуру данных, используя все стили css на странице и использовать их для рендеринга?

Или он визуализирует информацию о стиле в том порядке, в котором он видит?

4b9b3361

Как уже упоминалось, HTML 4 требует, чтобы тег <style> был помещен в раздел <head> (хотя большинство браузеров допускают теги <style> в body).

Однако HTML 5 содержит атрибут scoped, который позволяет создавать таблицы стилей, которые находятся в пределах родительского элемента тег <style>. Это также позволяет размещать теги <style> внутри элемента <body>:

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id="scoped-content">
    <style type="text/css" scoped>
        h1 { color: red; } 
    </style>

    <h1>Hello</h1>
</div>

    <h1>
      World
    </h1>

</body>
</html>

Если вы предоставили вышеприведенный код в браузере с поддержкой HTML 5, который поддерживает scoped, вы увидите ограниченный объем таблицы стилей.

Есть только одна основная оговорка...

В то время, когда я пишу этот ответ (май 2013 г.), почти никакой основной браузер в настоящее время не поддерживает атрибут scoped. (Хотя, по-видимому, сборки разработчика Chromium поддерживают его.)

ОДНАКО, есть интересное значение атрибута scoped, относящегося к этому вопросу. Это означает, что будущим браузерам предоставляется стандартное разрешение, чтобы элементы <style> находились в пределах <body> (пока области <style> обламываются.)

Итак, учитывая, что:

  • Почти каждый существующий браузер в настоящее время игнорирует атрибут scoped
  • Почти каждый существующий браузер в настоящее время позволяет использовать теги <style> в <body>
  • Будущие реализации потребуют разрешить теги <style> в тегах <body>

... тогда существует буквально без вреда * при размещении тегов <style> внутри тела, если вы в будущем доказали их с помощью атрибута scoped. Единственная проблема заключается в том, что текущие браузеры фактически не ограничивают рамки таблицы стилей - они будут применять ее ко всему документу. Но дело в том, что для всех практических целей вы можете включать теги <style> в <body> при условии, что вы:

  • Будущая защита вашего HTML, включая атрибут scoped
  • Понимать, что на данный момент таблица стилей в <body> на самом деле не будет ограничена (поскольку пока нет поддержки основного браузера)


* за исключением, конечно, для того, чтобы выкидывать HTML-валидаторы...


Наконец, в отношении общего (но субъективного) утверждения о том, что внедрение CSS в HTML является плохой практикой, следует отметить, что вся точка атрибута scoped должна соответствовать типичным современным фреймворкам разработки, которые позволяют разработчикам импортировать куски HTML как модули или синдицированный контент. Очень удобно иметь встроенный CSS, который применим только к определенному фрагменту HTML, для разработки инкапсулированных модульных компонентов со специфическими стилями.

215
ответ дан 30 мая '13 в 22:47
источник

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

Посмотрите на источники страниц cnn.com, nytimes.com, huffingtonpost.com, ближайшую газету большого города и т.д. Все они делают это.

Если есть веская причина добавить дополнительный <style> где-то в теле - например, если вы включаете() различные и независимые элементы страницы в реальном времени, и каждый из них имеет встроенный стиль <style> и организация будет более чистой, более модульной, понятной и удобной, я говорю, просто кусаю пулю. Конечно, было бы лучше, если бы мы могли иметь "локальный" стиль с ограниченной областью действия, например, локальные переменные, но вы идете работать с HTML, который у вас есть, а не с HTML, который вы, возможно, захотите или хотите иметь в более позднее время.

Конечно, существуют потенциальные недостатки и хорошие (хотя и не всегда убедительные) причины следовать ортодоксии, как это выяснили другие. Но для меня это все больше похоже на продуманное использование <style> в <body> уже перешел в основное русло.

13
ответ дан 11 апр. '12 в 1:59
источник

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

Протестировано в последних версиях FF и Google Chrome в Fedora, а также в FF, Opera, IE и Chrome под XP.

7
ответ дан 14 мая '10 в 0:13
источник

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

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

В любом случае это недействительный HTML, поэтому я бы сказал, что это бессмысленно думать. Теги <style> относятся к разделу head страницы.

7
ответ дан 14 мая '10 в 0:05
источник

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

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

4
ответ дан 14 мая '10 в 0:06
источник

Как говорили другие, это недействительно html, поскольку теги стиля принадлежат в голове.

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

4
ответ дан 14 мая '10 в 0:12
источник

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

<html>
<head>
<style type="text/css">
  p.first {color:blue}
  p.second {color:green}
</style>
</head>
<body>
<p class="first" style="color:green;">Hello World</p>
<p class="second" style="color:blue;">Hello World</p>

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

1
ответ дан 14 мая '10 в 1:06
источник