Объявить стиль CSS за пределами элемента "HEAD" на странице "HTML"?

мой случай использования следующий:

Я составляю HTML-страницу с помощью частей допустимых HTML-фрагментов, но недействительных страниц, как Divs; эти элементы используют CSS для управления их стилем.

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

Итак, вот вопрос: есть ли какой-либо (стандартный) способ добавить CSS-стиль вне элемента HEAD (исключая встроенный стиль с помощью атрибута style)?

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

Заранее благодарим за помощь.

ЗАВЕРШЕНИЕ:

Благодаря предложениям zzzzBov, JMC Creative и moontear, и после некоторого тестирования, вот ответ:

используйте JavaScript для динамической загрузки некоторых CSS-стилей: HTML4/XHTML и совместимый с HTML5,
встроить элементы стиля непосредственно внутри фрагментов: несовместимый с HTML4/XHTML, но, кажется, широко поддерживается и совместим с HTML5.

Поскольку я должен поддерживать почтовые клиенты, я использовал второе решение, которое более простое.

Спасибо всем за ваш интерес и участие.

Ответы

Ответ 1

ТЛ; др:

Если вам неудобно использовать HTML-функции, которые не достигли уровня зрелости Рекомендация W3C, не существует стандарта способ добавления <style> к <body> страницы.

Если вам удобно использовать менее зрелые функции, HTML5.2, по-видимому, стандартизирует элементы <style>, которые должны быть разрешены в любом поточном содержимом (т.е. <body> и большинство его элементов).

Если вы уже используете атрибут [scoped], перестаньте использовать атрибут [scoped], поскольку он никогда не был стандартизирован и теряет поддержку браузера.

История:

HTML 4.01

В HTML4.01 элемент стиля был разрешен только в <head>. Браузеры, старающиеся делать то, что хочет автор, а не то, что написал автор, уважали элементы <style> в <body>, несмотря на то, что эти страницы технически недействительны.

HTML 5

Элемент <style> по-прежнему недействителен в <body>

HTML 5.1

В некоторых рабочих черновиках спецификации HTML5.1 элемент <style> должен был указывать атрибут [scoped], который разрешите использовать элемент <style> в потоке содержимого (т.е. в <body>).

В качестве примера того, как это могло быть использовано, было бы:

<!DOCTYPE html>
<title>Example of using the scoped attribute</title>
<div>
  <style scoped>
    p {
      color: darkred;
    }
  </style>
  <p>this text would be dark red</p>
</div>
<p>this text would be black</p>

Поддержка расширенной функции была добавлена в Firefox в версии 21 и добавлена в Chrome за флагом в версии 20. Функция не получила достаточной поддержки, поэтому позже была удалена из HTML5.1 рабочий проект.

Chrome первым удалил эту функцию в версии 36. С тех пор Firefox установил функцию за флагом в версии 55.

HTML 5.2

В июль 2017 рабочий проект спецификации HTML5.2 была добавлена поддержка для элемента <style>, который разрешен в потоке содержание:

Контексты, в которых этот элемент можно использовать:

Где ожидается содержимое метаданных.

В элементе <noscript>, являющемся дочерним элементом элемента <head>.

В теле, где ожидается содержимое потока.

_{Акцент на мине}

На момент написания это добавление осталось в спецификации HTML5.2, которая в настоящее время находится в уровне зрелости рекомендации кандидата.

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

Ответ 2

Нет стандартного стандартного (EDIT:, как и HTML5, по-видимому, есть!) добавления элемента <style> вне тега <head> - это разрешено только там и НЕ внутри тега <body> (См. DTD здесь).

Если вы хотите индивидуально стилизовать свои HTML-фрагменты и не использовать стили CSS в своей голове, вам нужно прибегнуть к встроенному стилю. Однако: Большинство браузеров понимают теги <style> внутри тела, поэтому вы также можете их использовать, но ваша страница не будет соответствовать стандартам.

В любом случае:

Нельзя использовать встроенный стиль
Вы должны придерживаться стандартов
Вы должны поместить CSS в голову, где он принадлежит

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

Невозможно ли вам динамически загружать другой файл CSS (с помощью сценариев JS или на стороне сервера), когда ваш фрагмент HTML будет вставлен на страницу (это был бы предпочтительный метод)?

Ответ 3

Я нашел два хака для этого. Оба из них должны быть полностью верными html.

Путь SVG

Оберните элемент <style /> внутри элемента <svg />.

<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>