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

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

Итак, существуют ли стандартные решения для добавления CSS вне тега <head>? Как и в конце документа.

Ответ 1

Если вы хотите включить только ваши стили CSS в определенные события, вам нечего делать во главе:

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

document.head.appendChild(linkElement);

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

Ответ 2

Один из способов решить эту проблему - загрузить CSS с помощью . get() и, добавив его к тегу 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!

Ответ 3

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

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

Стандарт HTML существует, помимо таких, как скрипты на стороне сервера и DHTML, т.е. это не стандарт HTML/SSS/JavaScript.

Ответ 4

Только HTML5 позволяет использовать его с атрибутом scoped, но убедитесь, что вы правильно указываете DOCTYPE.

<style type="text/css" scoped>
.textbox {
color: pink
}
</style>

Ответ 5

Если вы говорите о внешнем листе css, то правильный способ следующий:

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

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

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