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

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

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

Ответы на вопрос(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 как было добавлено!

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

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

document.head.appendChild(linkElement);

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

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

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

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

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

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

ВАШ ОТВЕТ НА ВОПРОС