Правильный способ включить CSS после <head>

Видимо добавляя<link rel="stylesheet" ... в теле документа это считается плохой практикой по стандартам W3C. То же самое для добавления<style> блоки в теле ...

Так есть ли какие-либо стандартные совместимые решения для добавления CSS за пределы<head> тег? Как в конце документа.

 BoltClock♦19 мая 2012 г., 14:46
Нет никакого вреда, в том числе CSS, который не будетalways быть использованы, пока вы это знаетеmight использоваться в определенных ситуациях.
 Sebastian Breit19 мая 2012 г., 14:42
зачем тебе это делать? просто любопытно
 Alex19 мая 2012 г., 14:44
Ну, есть некоторые редкие ситуации, в которых полезно включать стили позже. В моем случае у меня есть хорошая функция отладки, которая выводит некоторую информацию в стиле CSS. Я могу вызвать эту функцию в любой момент или нет. Но я не хочу включать CSS, если он не используется.
 Artefact219 мая 2012 г., 14:46
Если это просто для отладки, вы можете встроить CSS в атрибуты стиля непосредственно в HTML.

Ответы на вопрос(5)

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

Для статических HTML-файлов вы определенно можете / должны следовать правилу только включения CSS в тег HEAD, но для условного вывода и интерактивности иногда бывает проще упростить использование условного стиля. Учтите, что в итоге это запутает итоговый документ. Несмотря на то, что браузеры могут отображать его просто отлично, если вы сами посмотрите на источник, его будет легче читать, если все стили, определяющие макет / отображение, находятся внутри HEAD. Конечно, существует ряд других примеров и причин того, почему это плохая практика.

Стандарт HTML существует отдельно от таких вещей, как сценарии на стороне сервера и DHTML, т.е. он не является стандартом HTML / SSS / JavaScript.

CSS с.получить() и, добавляя его в тег head только при необходимости:

JQUERY

var css = "foobar.css";
var callback = function() {
  alert("CSS is now included");
  // your jquery plugin for a navigation menu or what ever...
};

$.get(css, function(data){
  $("<style type=\"text/css\">" + data + "</style>").appendTo(document.head);
  callback();
});

callback функция полезна дляscript код, который зависит отCSS файл должен быть правильно отформатирован, запускаться только послеCSS как было добавлено!

 19 мая 2012 г., 15:07
@ Правда: у вас здесь огромная дыра в XSS. если данные (например) установлены как</style><script src="evil.js"></script><style>.
 19 мая 2012 г., 14:56
 19 мая 2012 г., 15:01
Это правда! Но как загрузитьcss файл при необходимости динамически для головы, чтобы документ отвечал правильно? И программисты делали это годами со старым старымjavascript ;) Поскольку мои проекты основаны на PHP, я решаю эту проблему с помощью сценариев на стороне сервера, прежде чем что-либо попадет в браузер, но в этом случае ...
 19 мая 2012 г., 15:06
Смотри мой ответ. Это легко сделать с помощью простого JavaScript. Я получаю более короткий код, чем вы.
 19 мая 2012 г., 15:06
& quot; защищено правдой & quot; Отлично сработано...
Решение Вопроса

ничто не мешает вам сделать это в начале:

var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = "path/to/file.css"; //Replace here

document.head.appendChild(linkElement);

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

 11 июл. 2014 г., 12:56
Добро пожаловать. Вы помогли моему брату, и мы оба проголосовали за вас. :-)
 11 июл. 2014 г., 11:00
Спасибо, @ Ionic & # xE3; Biz & # xE3; u, ваша правка была в хорошем состоянии.
 11 июл. 2014 г., 13:01
@ Ionic & # xE3; Biz & # xE3; u: \ o / & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B; & # x200B;

<link href="....link to your style...." rel="stylesheet">

Если вы хотите включить встроенный CSS, вам просто нужно сделать следующее:

<style>
 ....Your style here...
</style>

но убедитесь, что вы правильно объявили DOCTYPE.

<style type="text/css" scoped>
.textbox {
color: pink
}
</style>
 19 мая 2012 г., 21:04
@ JukkaK.Korpela: Нет, быть недействительным не является формальной вещью. Это имеет большое значение для интерпретации HTML-кода браузером. Хотя в этом случае это может быть безвредно, менее удачно, что вы получите крайне неожиданное поведение. Избегайте недопустимого HTML, когда это возможно.
 Alex19 мая 2012 г., 14:48
Вы имеете в виду, что если я положуscoped там я могу использовать это где угодно? это круто: D
 19 мая 2012 г., 17:03
@ JukkaK.Korpela: Если я использую свою лопату, чтобы вбить гвоздь в стену, это также, вероятно, сработает. Это не делает это хорошо. Будучи недействительным, он работает только потому, что браузер работает очень усердно, чтобы сделать это правильно. Не заставляйте это работать.
 19 мая 2012 г., 15:51
Для этой функции пока нет поддержки браузера. Браузеры просто игнорируютscoped атрибут и интерпретировать таблицу стилей как глобальную для документа.style элемент внутри тела работает на самом деле хорошо, он только что был объявлен недействительным в спецификациях HTML.
 19 мая 2012 г., 20:23
@ Правда, ваш комментарий ничего не добавляет к ответу. Быть недействительным является формальной вещью и исчезает в затяжке DTD.

Ваш ответ на вопрос