Richtige Möglichkeit um CSS nach <head>

Scheinbar hinzufügen <link ... im Dokument Körper wird als eine schlechte Praxis, die von W3C-standards. Das gleiche für das hinzufügen <style> Blöcke in den Körper...

Gibt es irgendwelche standard-konforme Lösungen zum hinzufügen von CSS außerhalb des <head> tag? Wie am Ende des Dokuments.

InformationsquelleAutor der Frage Alex | 2012-05-19

  1. 26

    Wenn Sie nur wollen, um Ihre CSS-Stile auf bestimmte Ereignisse, es gibt nichts hindert Sie so auf den Kopf:

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

document.head.appendChild(linkElement);

    Dies hat den zusätzlichen Vorteil, indem Sie Ihre stylesheet in eine asynchrone Weise, die nicht blockieren den browser, das herunterladen von irgendetwas anderes.

    InformationsquelleAutor der Antwort Madara Uchiha

  2. 3

    Einer Weise zu lösen, dass Problem ist das laden des CSS mit .bekommen() und anfügen an den head-tag-nur bei Bedarf:

    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();
});

    Den callback Funktion ist nützlich, damit script code, hängt von der CSS - Datei richtig formatiert ist, führen Sie erst nach der CSS wurde Hinzugefügt!

    InformationsquelleAutor der Antwort Zuul

  3. 2

    Ich denke, dass dieser standard wird weitgehend ignoriert von den meisten, sobald Sie anfangen, Dinge zu tun, wie server-side-Programmierung oder DHTML.

    Statischen HTML-Dateien, die Sie auf jeden Fall können/sollen die Folgen der Regel, nur mit CSS in den HEAD-tag, aber für eine bedingte Ausgabe und Interaktivität manchmal kann es Dinge vereinfachen, um bedingte styling sowie. Berücksichtigen Sie, dass am Ende dieses convolutes das resultierende Dokument. Obwohl Browser Rendern kann ist es nur gut, wenn es Sie selbst waren, um einen Blick auf die Quelle, es ist einfach nur leichter zu Lesen, wenn alle die Stile definieren das layout/display wurden innerhalb des KOPFES. Es gibt natürlich eine Reihe anderer Beispiele und Gründe, warum es schlechte Praxis ist.

    Dem HTML-standard vorhanden ist, abgesehen von Sachen wie server-side-scripting-und DHTML-d.h. es ist nicht die HTML/SSS/JavaScript-standard.

    InformationsquelleAutor der Antwort Matthew

  4. 1

    Nur HTML5 erlaubt es, mit dem scoped-Attribut, aber stellen Sie sicher, dass Sie erklären den DOCTYPE korrekt.

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

    InformationsquelleAutor der Antwort PenguinKenny

  5. -2

    Wenn du redest über eine externe css-Blatt, dann der richtige Weg ist wie folgt:

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

    Wenn Sie möchten, um ein inline-css, dann müssen Sie nur tun, wie folgt:

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

    InformationsquelleAutor der Antwort Geoffrey K. Kamundi

Schreibe einen Kommentar