Supongo que esto puede ser un problema sobre contextos limitados, por ejemplo, editores WYIWYG en un sistema web utilizado por usuarios que no son programadores , que limita las posibilidades de seguir los estándares. A veces (como TinyMCE), es una biblioteca que pone su contenido / código dentro de una textareaetiqueta, que el editor representa como una divetiqueta grande . Y a veces, puede ser una versión antigua de estos editores.
Supongo que:
- estos usuarios que no son programadores no tienen un canal abierto con los administradores del sistema (o los webdevs de la institución), para solicitar la inclusión de algunas reglas CSS en el sistema
stylesheets . En realidad, no sería práctico para los administradores (o webdevs), considerando la cantidad de solicitudes en ese sentido que tendrían.
- Este sistema es heredado y aún no admite versiones más recientes de HTML.
En algunos casos, sin stylereglas de uso , puede ser una experiencia de diseño muy pobre. Entonces, sí, estos usuarios necesitan personalización. Bien, pero ¿cuáles serían las soluciones en este escenario? Considerando las diferentes formas de insertar CSS en una htmlpágina, supongo que estas soluciones:
Primera opción: pregunta a tu administrador de sistemas
Solicite a su adm sistema que incluya algunas reglas CSS en el sistema stylesheets. Esta será una solución CSS externa o interna . Como ya se dijo, podría no ser posible.
2da opción: <link>en<body>
Use una hoja de estilo externa en la bodyetiqueta, es decir, use la linketiqueta dentro del área a la que tiene acceso (es decir, en el sitio, dentro de la bodyetiqueta y no en la headetiqueta). Algunas fuentes dicen que está bien, pero "no es una buena práctica", como MDN :
Un <link>elemento puede aparecer en el elemento <head>o <body>, dependiendo de si tiene un tipo de enlace que sea body-ok . Por ejemplo, el stylesheettipo de enlace es body-ok y, por <link rel="stylesheet">lo tanto, está permitido en el cuerpo. Sin embargo, esta no es una buena práctica a seguir; tiene más sentido separar sus <link>elementos del contenido de su cuerpo, colocándolos en el <head>.
Algunos otros lo restringen a la <head>sección, como w3schools :
Nota: Este elemento va solo en la sección de encabezado, pero puede aparecer cualquier número de veces.
Pruebas
Lo probé aquí (entorno de escritorio, en un navegador) y funciona para mí. Crea un archivo 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>
Y luego un archivo CSS, en el mismo directorio, llamado bar.css:
.test1 {
color: green;
};
Bueno, esto solo parece posible si tiene cómo cargar un archivo CSS en algún lugar del sistema de la institución. Quizás este sea el caso.
3a opción: <style>en<body>
Use la hoja de estilo de Internet en la bodyetiqueta, es decir, use la styleetiqueta dentro del área a la que tiene acceso (es decir, en el sitio, dentro de la bodyetiqueta y no en la headetiqueta). De esto se tratan las respuestas de Charles Salvia y Sz . Al elegir esta opción, considere sus preocupaciones.
4ta, 5ta y 6ta opciones: formas JS
Alerta Estos están relacionados con la modificación del <head>elemento de la página. Quizás esto no sea permitido por los administradores del sistema de la institución. Por lo tanto, se recomienda pedirles permiso primero.
Bien, suponiendo que se otorgue el permiso, la estrategia es acceder al <head> . ¿Cómo? Métodos JavaScript
4a opción: nuevo <link>en<head>
Esta es otra versión de la segunda opción. Use una hoja de estilo externa en la <head>etiqueta, es decir, use el <link>elemento fuera del área a la que tiene acceso (es decir, en el sitio, no dentro de la bodyetiqueta y sí dentro de la headetiqueta). Esta solución cumple con las recomendaciones de MDN y w3schools , como se mencionó anteriormente, en la solución de segunda opción. Se creará un nuevo Linkobjeto .
Para resolver el problema a través de JS, hay muchas formas, pero en las siguientes líneas de código demuestro una simple.
Pruebas
Lo probé aquí (entorno de escritorio, en un navegador) y funciona para mí. Crea un archivo 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>
Dentro de la scriptetiqueta:
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
Y luego en el archivo CSS, en el mismo directorio, llamado bar.css(como en la segunda opción):
.test1 {
color: green;
};
Como ya dije: esto solo parece posible si tiene cómo cargar un archivo CSS en algún lugar del sistema de la institución.
5ta opción: nuevo <style>en<head>
Use una nueva hoja de estilo interna en la <head>etiqueta, es decir, use un nuevo <style>elemento fuera del área a la que tenga acceso (es decir, en el sitio, no dentro de la bodyetiqueta y sí dentro de la headetiqueta). Se creará un nuevo Styleobjeto .
Esto se resuelve a través de JS. Una manera simple se demuestra a continuación.
Pruebas
Lo probé aquí (entorno de escritorio, en un navegador) y funciona para mí. Crea un archivo 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>
Dentro de la scriptetiqueta:
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
6ta opción: usar un existente <style>en<head>
Use una hoja de estilo interna existente en la <head>etiqueta, es decir, use un <style>elemento fuera del área a la que tenga acceso (es decir, en el sitio, no dentro de la bodyetiqueta y sí dentro de la headetiqueta), si existe. Se Stylecreará un nuevo objeto o se usará un CSSStyleSheetobjeto (en el código de la solución adoptada aquí).
Esto es, en algún punto de vista, arriesgado.
Primero , porque puede que no exista algún <style> objeto. Dependiendo de la forma en que implemente esta solución, puede obtener un undefinedretorno (el sistema puede usar una hoja de estilo externa ).
En segundo lugar , porque editará el trabajo del autor del diseño del sistema (problemas de autoría).
Tercero , porque puede no estar permitido en las políticas de seguridad de TI de su institución. Entonces, solicite permiso para hacer esto (como en otras soluciones JS) .
Suponiendo, nuevamente, que se concedió el permiso:
Tendrá que tener en cuenta algunas limitaciones del método disponible para de esta manera: insertRule(). La solución propuesta utiliza el escenario predeterminado y una operación en la primerastylesheet , si existe alguna.
Pruebas
Lo probé aquí (entorno de escritorio, en un navegador) y funciona para mí. Crea un archivo 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>
Dentro de la scriptetiqueta:
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
Otro enfoque para esta solución es usar CSSStyleDeclarationobject (documentos en w3schools y MDN ). Pero puede no ser interesante, teniendo en cuenta el riesgo de anular las reglas existentes en el CSS del sistema.
Séptima opción: CSS en línea
Usa CSS en línea . Esto resuelve el problema, aunque dependiendo del tamaño de la página (en líneas de código), el mantenimiento (por el propio autor u otra persona asignada) del código puede ser muy difícil.
Pero dependiendo del contexto de su rol en la institución, o sus políticas de seguridad del sistema web, esta podría ser la solución única disponible para usted.
Pruebas
Crea un archivo _foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
Respondiendo estrictamente la pregunta hecha por Gagan
¿Cómo se supone que un navegador representa css que no es contiguo?
- ¿Se supone que genera alguna estructura de datos usando todos los estilos CSS en una página y la usa para renderizar?
- ¿O se procesa utilizando información de estilo en el orden que ve?
(cita adaptada)
Para una respuesta más precisa, le sugiero a Google estos artículos:
- Cómo funcionan los navegadores: detrás de escena de los navegadores web modernos
- Construcción, diseño y pintura del árbol de renderizado
- ¿Qué significa "renderizar" una página web?
- Cómo funciona la representación del navegador: detrás de escena
- Renderizado - Estándar HTML
- 10 Renderizado - HTML5