Je suppose que cela peut être un problème concernant des contextes limités, par exemple les éditeurs WYIWYG sur un système Web utilisé par des utilisateurs non programmeurs , ce qui limite les possibilités de suivre les normes. Parfois (comme TinyMCE), c'est une bibliothèque qui place votre contenu / code dans une textareabalise, qui est rendue par l'éditeur comme une grande divbalise. Et parfois, il peut s'agir d'une ancienne version de ces éditeurs.
Je suppose que:
- ces utilisateurs non programmeurs n'ont pas de canal ouvert avec les administrateurs système (ou les webdev de l'institution), pour demander l'inclusion de certaines règles CSS au niveau du système
stylesheets. En fait, il serait peu pratique pour les administrateurs (ou webdevs), compte tenu du nombre de demandes en ce sens qu'ils auraient.
- ce système est hérité et ne prend toujours pas en charge les nouvelles versions de HTML.
Dans certains cas, sans stylerègles d' utilisation , il peut s'agir d'une expérience de conception très médiocre. Donc, oui, ces utilisateurs ont besoin de personnalisation. D'accord, mais quelles seraient les solutions, dans ce scénario? Compte tenu des différentes façons d'insérer CSS dans une htmlpage, je suppose que ces solutions:
1ère option: demandez à votre administrateur système
Demandez à votre administrateur système d'inclure certaines règles CSS au niveau du système stylesheets. Ce sera une solution CSS externe ou interne . Comme déjà dit, cela pourrait ne pas être possible.
2ème option: <link>sur<body>
Utilisez une feuille de style externe sur la bodybalise, c'est-à-dire l'utilisation de la linkbalise à l' intérieur de la zone à laquelle vous avez accès (qui sera, sur le site, à l'intérieur de la bodybalise et non dans la headbalise). Certaines sources disent que c'est correct, mais "pas une bonne pratique", comme MDN :
Un <link>élément peut apparaître dans l' élément <head>ou <body>, selon qu'il a un type de lien qui est body-ok . Par exemple, le stylesheettype de lien est body-ok et <link rel="stylesheet">est donc autorisé dans le corps. Cependant, ce n'est pas une bonne pratique à suivre; il est plus logique de séparer vos <link>éléments de votre contenu corporel, en les mettant dans le <head>.
Certains autres, limitez-le à la <head>section, comme w3schools :
Remarque: Cet élément ne va que dans la section head, mais il peut apparaître un certain nombre de fois.
Essai
Je l'ai testé ici (environnement de bureau, sur un navigateur) et cela fonctionne pour moi. Créez un fichier 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>
Et puis un fichier CSS, dans le même répertoire, appelé bar.css:
.test1 {
color: green;
};
Eh bien, cela semble possible si vous savez comment télécharger un fichier CSS quelque part dans le système de l'institution. Ce serait peut-être le cas.
Option 3: <style>sur<body>
Utilisez une feuille de style Internet sur la bodybalise, c'est-à-dire l'utilisation de la stylebalise à l'intérieur de la zone à laquelle vous avez accès (ce sera, sur le site, à l'intérieur de la bodybalise et non dans la headbalise). C'est à cela que répondent les réponses de Charles Salvia et Sz . En choisissant cette option, tenez compte de leurs préoccupations.
4e, 5e et 6e options: voies JS
Alerte Ceux-ci sont liés à la modification de l' <head>élément de la page. Peut-être que cela ne sera pas autorisé par les administrateurs système de l'institution. Il est donc recommandé de leur demander d'abord la permission.
D'accord, en supposant l'autorisation accordée, la stratégie est d'accéder à la <head> . Comment? Méthodes JavaScript.
4ème option: nouveau <link>sur<head>
Ceci est une autre version de la 2e option. Utilisez une feuille de style externe sur la <head>balise, c'est-à-dire l'utilisation de l' <link>élément en dehors de la zone à laquelle vous avez accès (ce sera, sur le site, pas à l'intérieur de la bodybalise et oui à l'intérieur de la headbalise). Cette solution est conforme aux recommandations de MDN et w3schools , telles que citées ci-dessus, sur la solution de 2ème option. Un nouvel Linkobjet sera créé.
Pour résoudre le problème via JS, il existe de nombreuses façons, mais dans les lignes de code suivantes, je démontre une solution simple.
Essai
Je l'ai testé ici (environnement de bureau, sur un navigateur) et cela fonctionne pour moi. Créez un fichier 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>
À l'intérieur du scripttag:
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
Et puis dans le fichier CSS, dans le même répertoire, appelé bar.css(comme à la 2ème option):
.test1 {
color: green;
};
Comme je l'ai déjà dit: cela semblera possible si vous savez comment télécharger un fichier CSS quelque part dans le système de l'institution.
5ème option: nouveau <style>sur<head>
Utilisez une nouvelle feuille de style interne sur la <head>balise, c'est-à-dire l'utilisation d'un nouvel <style>élément en dehors de la zone à laquelle vous avez accès (ce sera, sur le site, pas à l'intérieur de la bodybalise et oui à l'intérieur de la headbalise). Un nouvel Styleobjet sera créé.
Ceci est résolu via JS. Une manière simple est illustrée ci-dessous.
Essai
Je l'ai testé ici (environnement de bureau, sur un navigateur) et cela fonctionne pour moi. Créez un fichier 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>
À l'intérieur du scripttag:
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
6ème option: utiliser un existant <style> sur<head>
Utilisez une feuille de style interne existante sur la <head>balise, c'est-à-dire l'utilisation d'un <style>élément en dehors de la zone à laquelle vous avez accès (qui sera, sur le site, pas à l'intérieur de la bodybalise et oui à l'intérieur de la headbalise), s'il en existe. Un nouvel Styleobjet sera créé ou un CSSStyleSheetobjet sera utilisé (dans le code de la solution adoptée ici).
C'est à un certain point de vue risqué.
Tout d'abord , car il peut ne pas exister un <style> objet. Selon la façon dont vous implémentez cette solution, vous pouvez obtenir un undefinedretour (le système peut utiliser une feuille de style externe ).
Deuxièmement , parce que vous éditez le travail de l'auteur de la conception du système (problèmes de paternité).
Troisièmement , parce que cela peut ne pas être autorisé dans la politique de sécurité informatique de votre établissement. Alors, demandez l'autorisation de le faire (comme dans les autres solutions JS) .
En supposant, encore une fois, l'autorisation a été accordée:
Vous devrez considérer certaines restrictions de la méthode à la disposition de la façon suivante : insertRule(). La solution proposée utilise le scénario par défaut, et une opération au premier stylesheet, s'il en existe.
Essai
Je l'ai testé ici (environnement de bureau, sur un navigateur) et cela fonctionne pour moi. Créez un fichier 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>
À l'intérieur du 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
Une autre approche de cette solution consiste à utiliser un CSSStyleDeclarationobjet (documentation sur w3schools et MDN ). Mais cela peut ne pas être intéressant, compte tenu du risque de remplacer les règles existantes sur le CSS du système.
7ème option: CSS en ligne
Utiliser le CSS en ligne . Cela résout le problème, bien qu'en fonction de la taille de la page (en lignes de code), la maintenance (par l'auteur lui-même ou une autre personne affectée) du code puisse être très difficile.
Mais selon le contexte de votre rôle au sein de l'institution, ou ses politiques de sécurité du système Web, cela pourrait être la solution unique disponible pour vous.
Essai
Créez un fichier _foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
Répondre strictement à la question posée par Gagan
Comment un navigateur est-il censé afficher des CSS non contigus?
- Est-il censé générer une structure de données en utilisant tous les styles CSS sur une page et l'utiliser pour le rendu?
- Ou rend-il en utilisant les informations de style dans l'ordre qu'il voit?
(devis adapté)
Pour une réponse plus précise, je suggère à Google ces articles:
- Fonctionnement des navigateurs: dans les coulisses des navigateurs Web modernes
- Construction, disposition et peinture de l'arbre de rendu
- Que signifie «rendre» une page Web?
- Fonctionnement du rendu du navigateur - dans les coulisses
- Rendu - HTML Standard
- 10 Rendu - HTML5