Правильный способ включения 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>