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

Question

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

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

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

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

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

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

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

ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ:

благодаря предложениям zzzzBov,JMC Творческий и moontear, и после некоторого тестирования, вот ответ :

использовать JavaScript для динамической загрузки некоторых таблиц стилей CSS: HTML4 / XHTML и совместимый с HTML5,

вставить элементы "стиль" непосредственно внутри фрагментов : несоответствующим С HTML4 / XHTML но, кажется,широкую поддержку, и совместимый с HTML5.

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

спасибо всем за ВАШ интерес и участие.

591 3

templates html css template-engine

3 ответов:

Comments

Ничего не найдено.

zzzzBov · Accepted Answer · 2017-09-15 17:09:55

tl; dr:

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

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

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

история:

HTML 4.01

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

HTML 5

The <style> элемент продолжал быть недопустимым в <body>

HTML 5.1

в некоторых рабочие черновики спецификации HTML5.1 the <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>
поддержка функции scoped была добавлена в Firefox в версии 21 и добавлена в Chrome за флагом в версии 20. Функция не получила достаточной поддержки, поэтому позже она была удалена из HTML5. 1 рабочий проект.

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

HTML 5.2

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

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

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

на <noscript> элемент, который является дочерним элементом <head> элемент.

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

_{выделено мной}

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

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

Dennis G · Accepted Answer · 2011-01-05 22:28:46

нет стандартный путь (EDIT: как из HTML5 налицо!) добавить <style> элемент вне <head> тег - это только там, а не внутри <body> tag (смотрите DTD здесь).

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

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

вы не должны использовать встроенный стиль

вы должны придерживаться стандартов

вы должны положить CSS в голову, где он принадлежит

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

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

loominade · Accepted Answer · 2017-02-01 17:02:09

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

путь SVG

обернуть <style /> элемент внутри <svg /> элемент.
<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>
Ссылка Data-Uri

форматируйте css как uri данных и используйте его в <link /> элемент.
<div class="foo">Red text</div>
<link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />