Immagino che questo possa essere un problema relativo a contesti limitati, ad esempio gli editor WYIWYG su un sistema web utilizzato da utenti non programmatori , che limita le possibilità di seguire gli standard. A volte (come TinyMCE), è una lib che mette il tuo contenuto / codice all'interno di un textareatag, che viene reso dall'editor come un grande divtag. E a volte, potrebbe essere una vecchia versione di questi editor.
Suppongo che:
- questi utenti non programmatori non hanno un canale aperto con gli amministratori di sistema (o i webdev dell'istituzione), per chiedere l'inclusione di alcune regole CSS dal sistema
stylesheets. In realtà, sarebbe poco pratico per gli amministratori (o webdev), considerando il numero di richieste in quel senso che avrebbero.
- questo sistema è legacy e non supporta ancora le versioni più recenti di HTML.
In alcuni casi, senza styleregole di utilizzo , può essere un'esperienza di progettazione molto scadente. Quindi, sì, questi utenti hanno bisogno di personalizzazione. Va bene, ma quali sarebbero le soluzioni, in questo scenario? Considerando i diversi modi per inserire CSS in una htmlpagina, suppongo che queste soluzioni:
1a opzione: chiedi al tuo sistema
Chiedi al tuo amministratore di sistema di includere alcune regole CSS da parte del sistema stylesheets. Questa sarà una soluzione CSS esterna o interna . Come già detto, potrebbe non essere possibile.
2a opzione: <link>attiva<body>
Usa un foglio di stile esterno sul bodytag, ovvero l'uso del linktag all'interno dell'area a cui hai accesso (che sarà, sul sito, all'interno del bodytag e non nel headtag). Alcune fonti dicono che va bene, ma "non è una buona pratica", come MDN :
Un <link>elemento può essere presente nell'elemento <head>o <body>, a seconda che abbia un tipo di collegamento che sia body-ok . Ad esempio, il stylesheettipo di collegamento è body-ok e quindi <link rel="stylesheet">è consentito nel corpo. Tuttavia, questa non è una buona pratica da seguire; ha più senso separare i tuoi <link>elementi dal contenuto del tuo corpo, inserendoli nel <head>.
Alcuni altri, limitalo alla <head>sezione, come w3schools :
Nota: questo elemento si trova solo nella sezione head, ma può apparire un numero qualsiasi di volte.
analisi
L'ho provato qui (ambiente desktop, su un browser) e funziona per me. Crea un file foo.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<link href="bar.css" type="text/css" rel="stylesheet">
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
</body>
</html>
E poi un file CSS, nella stessa directory, chiamato bar.css:
.test1 {
color: green;
};
Bene, questo sembrerà possibile solo se hai il modo di caricare un file CSS da qualche parte nel sistema delle istituzioni. Forse questo sarebbe il caso.
3a opzione: <style> attiva<body>
Usa il foglio di stile Internet sul bodytag, ovvero l'uso del styletag all'interno dell'area a cui hai accesso (che sarà, sul sito, all'interno del bodytag e non nel headtag). Queste sono le risposte di Charles Salvia e Sz qui. Scegliendo questa opzione, considera le loro preoccupazioni.
4a, 5a e 6a opzione: vie JS
Avviso Questi sono correlati alla modifica <head>dell'elemento della pagina. Forse non lo farà sarà consentito dagli amministratori di sistema dell'istituzione. Quindi, si consiglia di chiedere loro prima il permesso.
Va bene, supponendo il permesso concesso, la strategia è accedere al <head> . Come? Metodi JavaScript.
4a opzione: nuovo <link>acceso<head>
Questa è un'altra versione della seconda opzione. Utilizza un foglio di stile esterno sul <head>tag, ovvero l'uso <link>dell'elemento all'esterno dell'area a cui hai accesso (che sarà, sul sito, non all'interno del bodytag e sì all'interno del headtag). Questa soluzione è conforme alle raccomandazioni di MDN e w3schools , come sopra citato, sulla soluzione della seconda opzione. Verrà creato un nuovo Linkoggetto .
Per risolvere la questione tramite JS, ci sono molti modi, ma ai seguenti codici dimostrerò uno semplice.
analisi
L'ho provato qui (ambiente desktop, su un browser) e funziona per me. Crea un file f.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
All'interno del scripttag:
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
E poi nel file CSS, nella stessa directory, chiamato bar.css(come nella seconda opzione):
.test1 {
color: green;
};
Come ho già detto: questo sembrerà possibile solo se hai il modo di caricare un file CSS da qualche parte nel sistema delle istituzioni.
5a opzione: nuovo <style>acceso<head>
Usa il nuovo foglio di stile interno sul <head>tag, ovvero l'uso di un nuovo <style>elemento all'esterno dell'area a cui hai accesso (che sarà, sul sito, non all'interno del bodytag e sì all'interno del headtag). Verrà creato un nuovo Styleoggetto .
Questo è risolto tramite JS. Di seguito è dimostrato un modo semplice.
analisi
L'ho provato qui (ambiente desktop, su un browser) e funziona per me. Crea un file foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
All'interno del scripttag:
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
6a opzione: usando un esistente <style> su<head>
Utilizzare un foglio di stile interno esistente sul <head>tag, ovvero l'uso di un <style>elemento all'esterno dell'area a cui si ha accesso (che sarà, sul sito, non all'interno del bodytag e sì all'interno del headtag), se ne esiste qualcuno. StyleVerrà creato un nuovo oggetto o verrà utilizzato un CSSStyleSheetoggetto (nel codice della soluzione adottato qui).
Questo è ad un certo punto di vista rischioso.
Innanzitutto , perché potrebbe non esistere qualche <style> oggetto. A seconda del modo in cui si implementa questa soluzione, è possibile che venga undefinedrestituito (il sistema può utilizzare un foglio di stile esterno ).
Secondo , perché modificherai il lavoro dell'autore della progettazione del sistema (problemi di paternità).
Terzo , perché potrebbe non essere consentito dalle politiche di sicurezza IT della tua istituzione. Quindi, chiedi il permesso per farlo (come in altre soluzioni JS) .
Supponendo, ancora una volta, l'autorizzazione è stata concessa:
Avrete bisogno di prendere in considerazione alcune restrizioni del metodo a disposizione in questo modo: insertRule(). La soluzione proposta utilizza lo scenario predefinito e un'operazione all'inizio stylesheet, se ne esiste una.
analisi
L'ho provato qui (ambiente desktop, su un browser) e funziona per me. Crea un file foo_bar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
All'interno del scripttag:
function demoLoop(){ // remove this line
var elmnt = document.getElementsByTagName("style");
if (elmnt.length === 0) {
// there isn't style objects, so it's more interesting create one
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {" +
"color: green;" +
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
} else {
// Using CSSStyleSheet interface
var firstCSS = document.styleSheets[0];
firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
}
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too
Un altro approccio a questa soluzione è l'utilizzo CSSStyleDeclarationdell'oggetto (documenti su w3schools e MDN ). Ma potrebbe non essere interessante, considerando il rischio di sovrascrivere le regole esistenti sul CSS del sistema.
7a opzione: CSS in linea
Usa CSS in linea . Ciò risolve il problema, sebbene a seconda della dimensione della pagina (nelle righe di codice), la manutenzione del codice (da parte dell'autore stesso o di un'altra persona assegnata) possa essere molto difficile.
Ma a seconda del contesto del tuo ruolo presso l'istituzione o delle sue politiche di sicurezza del sistema web, questa potrebbe essere l'unica soluzione disponibile per te.
analisi
Crea un file _foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
Rispondendo rigorosamente alla domanda posta da Gagan
In che modo un browser dovrebbe eseguire il rendering di CSS che non è contiguo?
- Dovrebbe generare una struttura di dati usando tutti gli stili CSS in una pagina e usarla per il rendering?
- O esegue il rendering utilizzando le informazioni di stile nell'ordine in cui vede?
(citazione adattata)
Per una risposta più accurata, suggerisco a Google questi articoli:
- Come funzionano i browser: dietro le quinte dei moderni browser web
- Render-tree Construction, Layout e Paint
- Cosa significa "renderizzare" una pagina Web?
- Come funziona il rendering del browser - dietro le quinte
- Rendering - HTML standard
- 10 Rendering - HTML5