Apparentemente l'aggiunta di <link rel="stylesheet" ... nel corpo del documento è considerata una pratica scorretta dagli standard W3C. Lo stesso vale per l'aggiunta di <style> blocchi nel corpo ...Modo corretto per includere i CSS dopo <head>
Quindi ci sono soluzioni conformi agli standard per aggiungere CSS al di fuori del tag <head>? Come alla fine del documento.
Se solo si desidera includere i vostri stili CSS su una specifica eventi, non c'è nulla ti impedisce di farlo a testa:
var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href = "path/to/file.css"; //Replace here
document.head.appendChild(linkElement);
Questo ha il vantaggio di aggiungere il tuo foglio di stile in modo asincrono, che non impedisce al browser di scaricare qualcos'altro.
Grazie, @ IonicãBizãu, la tua modifica è stata ben posizionata. –
Prego. Hai aiutato mio fratello e entrambi ti abbiamo votato. :-) –
@ IonicãBizãu: \ o / –
Solo HTML5 lo consente con l'attributo scope, ma assicurati di dichiarare correttamente il DOCTYPE.
<style type="text/css" scoped>
.textbox {
color: pink
}
</style>
Vuoi dire che se metto 'scoped' lì posso usarlo ovunque?è fantastico: D – Alex
Non esiste ancora il supporto per il browser per questa funzione. I browser ignorano semplicemente l'attributo 'scoped' e interpretano il foglio di stile come globale per il documento. Un elemento 'style' all'interno del corpo funziona davvero bene, è stato appena dichiarato non valido nelle specifiche HTML. –
@ JukkaK.Korpela: Se uso la mia pala per infilare un chiodo in un muro, probabilmente funzionerà anche. Questo non lo rende OK. Essendo invalido, funziona solo perché il browser lavora molto duramente per renderlo corretto. Non farlo funzionare. –
Un modo per risolvere questo problema consiste nel caricare il CSS con .get() e, aggiungendo al tag testina solo quando necessario:
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();
});
La funzione callback è utile per consentire il codice script che dipende dal file CSS per essere formattato correttamente, per eseguire solo dopo il CSS come stato aggiunto!
http://stackoverflow.com/a/2826810/871050 –
È vero! Ma come caricare un file 'css' quando necessario dinamicamente in testa per fare in modo che il documento risponda correttamente? E i programmatori lo hanno fatto per anni con semplici 'javascript';) Poiché i miei progetti sono basati su PHP, risolvo questo problema con lo scripting lato server prima che qualcosa arrivi al browser, ma in questo caso ... – Zuul
Vedere la mia risposta. Questo può essere fatto facilmente con un semplice JavaScript. Ho un codice più corto di te. –
Penso che questo standard venga in gran parte ignorato dalla maggior parte una volta che si inizia a fare cose come la programmazione lato server o DHTML.
Per i file HTML statici, è assolutamente possibile/deve seguire la regola di includere solo i CSS all'interno del tag HEAD, ma per l'output condizionale e l'interattività a volte può semplificare anche lo stile condizionale. Considera che alla fine ciò convoluta il documento risultante. Anche se i browser possono renderlo perfetto, se tu stesso dovessi guardare la fonte, è semplicemente più semplice da leggere se tutti gli stili che definiscono il layout/display fossero all'interno dell'HEAD. Ci sono, naturalmente, una serie di altri esempi e ragioni per spiegare perché è una cattiva pratica.
Lo standard HTML esiste a parte cose come lo scripting lato server e DHTML, ad esempio, non è lo standard HTML/SSS/JavaScript.
Se si sta parlando di un foglio CSS esterno, quindi il modo corretto è la seguente:
<link href="....link to your style...." rel="stylesheet">
Se si desidera includere un CSS in linea, quindi è solo bisogno di fare come segue:
<style>
....Your style here...
</style>
perché ti piacerebbe farlo? solo curioso –
Beh, ci sono alcune rare situazioni in cui è utile includere gli stili in seguito. Nel mio caso, ho una bella funzione di debug che genera alcune informazioni in stile CSS. Potrei chiamare questa funzione in qualsiasi momento o no. Ma non voglio includere il CSS se non è usato. – Alex
Non c'è nulla di male nell'includere i CSS che * non * saranno usati, a patto che tu sappia che * potrebbe * essere usato in certe situazioni. – BoltClock