Вопрос по html, css, html5 – Правильный способ включить CSS после

17

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

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

Если это просто для отладки, вы можете встроить CSS в атрибуты стиля непосредственно в HTML. Artefact2
Ну, есть некоторые редкие ситуации, в которых полезно включать стили позже. В моем случае у меня есть хорошая функция отладки, которая выводит некоторую информацию в стиле CSS. Я могу вызвать эту функцию в любой момент или нет. Но я не хочу включать CSS, если он не используется. Alex
зачем тебе это делать? просто любопытно Sebastian Breit
Нет никакого вреда, в том числе CSS, который не будетalways быть использованы, пока вы это знаетеmight использоваться в определенных ситуациях. BoltClock♦

Ваш Ответ

5   ответов
3

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 как было добавлено!

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

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

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

document.head.appendChild(linkElement);

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

Спасибо, @ Ionic & # xE3; Biz & # xE3; u, ваша правка была в хорошем состоянии.
@ 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;
Добро пожаловать. Вы помогли моему брату, и мы оба проголосовали за вас. :-)
-2

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

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

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

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

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

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

1

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

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

Похожие вопросы