файл - теги html




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

мой вариант использования:

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

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

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

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

Заранее спасибо за вашу помощь.

ЗАКЛЮЧИТЕЛЬНЫЙ РЕДАКТ:

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

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

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

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


ТЛ; др:

Если вам не удобно использовать функции 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> все еще несколько рискованным, это конкретное изменение стандартизирует то, что браузеры поддерживали в течение многих лет.


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

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

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

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

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

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





template-engine