plantillas - templates html5 responsive free
¿Declarar estilo CSS fuera del elemento "HEAD" de una página "HTML"? (3)
tl; dr:
Si no se siente cómodo con las funciones HTML que no han alcanzado el nivel de madurez de la Recomendación W3C , no hay una forma estándar de agregar <style> al <body> de una página.
Si te sientes cómodo utilizando funciones menos maduras, HTML5.2 parece estar estandarizando elementos de <style> para permitirlos en cualquier lugar donde se espere contenido de flujo (es decir, el <body> y la mayoría de sus elementos).
Si ya está utilizando el atributo [scoped] , deje de usar el atributo [scoped] , ya que nunca fue estandarizado y está perdiendo soporte del navegador.
Historia:
HTML 4.01
En HTML4.01, el elemento de estilo solo estaba permitido en <head> . Los navegadores, al ser diligentes a la hora de intentar reproducir lo que el autor desea, en lugar de lo que escribió el autor, han respetado los elementos <style> en el <body> pesar de que técnicamente esas páginas no son válidas.
HTML 5
El elemento <style> continúa siendo inválido en el <body>
HTML 5.1
En algunos borradores de trabajo de la especificación HTML5.1, el elemento <style> permitía un atributo [scoped] , que permitía utilizar el elemento <style> en el contenido de flujo (es decir, en <body> ).
Como ejemplo de cómo se podría haber usado eso sería:
<!DOCTYPE html>
<title>Example of using the scoped attribute</title>
<div>
<style scoped>
p {
color: darkred;
}
</style>
<p>this text would be dark red</p>
</div>
<p>this text would be black</p>
El soporte para la función de alcance se agregó a Firefox en la versión 21 y se agregó en Chrome detrás de una bandera en la versión 20 . La función no recibió suficiente soporte, por lo que luego se eliminó del borrador de trabajo HTML5.1 .
Chrome fue el primero en eliminar la función en la versión 36 . Desde entonces, Firefox configuró la función detrás de una bandera en la versión 55.
HTML 5.2
En el borrador de trabajo de julio de 2017 de la especificación HTML5.2 , se agregó compatibilidad con el elemento <style> para permitir el contenido de flujo:
Contextos en los que se puede usar este elemento:
- Donde se espera el contenido de metadatos.
- En un elemento
<noscript>que es hijo de un elemento<head>.- En el cuerpo, donde se espera el contenido de flujo.
Énfasis mío
En el momento de la escritura, esta adición se ha mantenido en la especificación HTML5.2, que actualmente se encuentra en el nivel de madurez de la Recomendación del candidato .
Si bien esto hace que el uso de elementos <style> en el <body> siga siendo un poco de riesgo, este cambio particular está estandarizando algo que los navegadores han soportado durante muchos años.
mi caso de uso es el siguiente:
Estoy redactando una página HTML utilizando partes que son fragmentos válidos de HTML pero no páginas válidas, como Divs ; estos elementos usan CSS para administrar su estilo.
Me gustaría permitir que cada fragmento sea responsable de sus propios requisitos de diseño y no confiar en las declaraciones de las hojas de estilo en el fragmento principal (el que tiene la etiqueta "HTML").
Así que aquí viene la pregunta: ¿hay alguna manera (estándar) de agregar un poco de estilo CSS fuera del elemento HEAD (excluyendo el estilo en línea a través del atributo "estilo")?
Creo que podría usar marcos, pero preferiría evitar esta solución.
Gracias de antemano por tu ayuda.
EDICION FINAL:
Gracias a las proposiciones de zzzzBov , JMC Creative y moontear , y después de algunas pruebas, aquí está la respuesta:
- use JavaScript para cargar dinámicamente algunas hojas de estilo CSS : compatible con HTML4 / XHTML y HTML5 ,
- incruste elementos de "estilo" directamente dentro de los fragmentos: no cumple con HTML4 / XHTML pero parece ser ampliamente compatible , y es compatible con HTML5 .
Como debo apoyar a los clientes de correo electrónico, he usado la segunda solución, que además es más simple.
Gracias a todos por su interés y participación.
He encontrado dos hacks para hacer eso. Ambos deberían ser perfectamente válidos html.
La forma SVG
Envuelva su elemento <style /> dentro de un elemento <svg /> .
<div class="foo">Red text</div>
<svg><style>.foo { color: red }</style></svg>
El enlace Data-Uri
Formatee su css como un uri de datos y utilícelo en un elemento <link /> .
<div class="foo">Red text</div>
<link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />
No existe una forma estándar ( EDIT: ¡ al parecer de HTML5 existe!) De agregar un elemento <style> fuera de la etiqueta <head> : solo está permitido allí y NO dentro de la etiqueta <body> ( Consulte la DTD aquí ) .
Si desea diseñar sus fragmentos HTML individualmente y no usar estilos CSS en su cabeza, deberá recurrir al estilo en línea. Sin embargo: la mayoría de los navegadores entienden las etiquetas <style> en el cuerpo, por lo que puede utilizarlas, pero su página no será compatible con los estándares.
De cualquier manera:
- No deberías usar el estilo en línea
- Debes cumplir con los estándares
- Debes poner el CSS en la cabeza donde pertenece
Por lo que entiendo, utiliza algún tipo de plantilla, donde inserta diferentes fragmentos de HTML en la página con diferentes diseños. ¿Es tan malo si pones todos los estilos dentro de un gran archivo CSS?
¿Sería imposible para usted cargar dinámicamente otro archivo CSS (a través de JS o secuencias de comandos del lado del servidor), cuando su fragmento de HTML se inserta en la página (este sería el método preferido)?