Declarar de estilo CSS fuera de la «CABEZA» de los elementos de un «HTML» en la página?

mi caso de uso es el siguiente :

Estoy componiendo una página HTML por el uso de partes que son HTML válido fragmentos pero no es válido páginas,
como Divs; estos elementos son el uso de CSS para administrar su estilo.

Me gustaría para permitir que cada fragmento a ser responsable de su propio estilo de requisitos y a no confiar en las declaraciones de estilo-en hojas en las principales fragmento (el uno con el «HTML» tag).

Así que aquí viene la pregunta : hay ningún estándar (de) manera de añadir algo de estilo CSS fuera de la CABEZA del elemento de (excluyendo la línea de estilo a través del atributo «style») ?

Supongo que podría utilizar marcos, pero prefiero evitar esta solución.

Gracias de antemano por su ayuda.

ÚLTIMA EDICIÓN :

Gracias a las propuestas de zzzzBov, JMC Creativo y moontear, y después de algunas pruebas, aquí está la respuesta :

  • uso JavaScript para cargar dinámicamente algunos estilos CSS hojas de : HTML4/XHTML y HTML5 compatible con,
  • embed «estilo» elementos directamente en el interior de los fragmentos : que no cumplen con HTML4/XHTML pero parece ser apoyó ampliamente, y es HTML5 compatible con.

Como yo debe apoyar a los clientes de correo electrónico que he utilizado en la segunda solución, que además es más sencillo.

Gracias a todos por su interés y participación.

  • se puede utilizar javascript para añadir <style> elementos a la cabeza, después del hecho?
  • Creativo : gracias, esta debe ser la mejor solución, de hecho, pero yo soy el envío de mensajes de correo por lo que no puedo confiar en JS.
InformationsquelleAutor Pragmateek | 2011-01-05

3 Kommentare

  1. 62

    tl;dr:

    Si usted no se siente cómodo con el uso de HTML características que no han alcanzado un nivel de madurez de Recomendación del W3C, no hay una manera estándar de la adición de <style> a la <body> de una página.

    Si usted se siente cómodo usando menos maduros características de HTML5.2 parece ser la estandarización de <style> elementos a ser permitido en cualquier parte del flujo de contenido que se espera (es decir, el <body> y la mayoría de sus elementos).

    Si usted ya está usando la [scoped] atributo, deje de usar el [scoped] atributo, como nunca fue estandarizado y es perder el soporte de los navegadores.

    Historia:

    HTML 4.01

    En HTML4.01 el elemento de estilo en el <head> sólo. Navegadores, ser diligente a la hora de intentar representar lo que el autor quiere en lugar de lo que el autor escribió han respetado <style> elementos en la <body> a pesar de esas páginas técnicamente no es válido.

    HTML 5

    La <style> elemento continuo de no ser válida en el <body>

    HTML 5.1

    En algunos borradores de trabajo del HTML5.1 spec la <style> elemento fue para permitir una [scoped] atributo, lo cual permitiría a la <style> elemento para ser utilizado en contenido de flujo de (es decir, en el <body>).

    Como un ejemplo de cómo podría haber sido utilizado 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>

    Apoyo para el ámbito de característica se agregó a Firefox en su versión 21 y añadió en Chrome detrás de una bandera en la versión 20. La función no recibe el apoyo suficiente, por lo que más tarde fue eliminado de la HTML5.1 borrador de trabajo.

    Chrome fue el primero en eliminar la característica en la versión 36. Firefox tiene desde entonces la característica de estar detrás de una bandera en la versión 55.

    HTML 5.2

    En el De julio de 2017 de trabajo proyecto de HTML5.2 spec, se añadió soporte para el <style> elemento en el flujo de contenido:

    Contextos en los que este elemento puede ser utilizado:

    • Donde metadatos de contenido que se espera.
    • En un <noscript> elemento que es hijo de un <head> elemento.
    • En el cuerpo, donde el flujo de contenido que se espera.

    el Énfasis es mío

    En el momento de escribir esta adición se ha mantenido en el HTML5.2 spec, que en la actualidad es el El candidato de Recomendación nivel de madurez.

    Mientras que esto hace que el uso de <style> elementos en la <body> todavía un poco de un riesgo, este cambio en particular es la estandarización de algo que los navegadores han apoyado durante muchos años.

    • HTML5.2 desde entonces ha llegado a Recomendación de la W3C nivel. Yo espero que la actualización de este post cuando tengo algo de tiempo libre.
  2. 13

    No hay estándar manera (EDICIÓN: como de HTML5 aparentemente no es!) de adición de un <style> elemento fuera de la <head> tag – sólo está permitido y NO dentro de la <body> etiqueta (Ver el DTD aquí).

    Si quieres estilizar tu fragmentos de HTML de forma individual y no utilizar los estilos CSS en su cabeza, será necesario recurrir a en línea de estilo. Sin embargo: la Mayoría de los navegadores entender <style> etiquetas en el cuerpo, así que usted puede utilizar, pero su página no ser compatibles con los estándares.

    De alguna manera:

    • Usted no debe usar inline estilo
    • Usted debe adherirse a los estándares de
    • Debe poner el CSS en la cabeza, que es donde pertenece

    Por lo que entiendo que el uso de algún tipo de plantillas, en la que se insertan los diferentes fragmentos de código HTML en la página con diferentes diseños. Es tan malo si usted pone todos los estilos dentro de un gran archivo CSS?

    Sería imposible para usted para cargar dinámicamente un otro archivo CSS (a través de JS de servidor o de scripting del lado), cuando el fragmento de HTML se inserta en la página (este sería el método preferido)?

    • Esto es cierto, sin embargo <style>@import url('path/to/file.css')</style> dentro de la etiqueta body funciona en la mayoría de los navegadores modernos. Sé que desobedecer los estrictos requisitos de los santo W3C está mal visto, pero vamos, la web está evolucionando con rapidez, y sus normas no son. Ejemplo de ello está siendo usado por un popular servicio de terceros con éxito: ZenDesk.com código del botón de … servir con éxito a un desconocido-alto número de solicitudes diarias.
    • Gracias por esta respuesta clara. «se puede utilizar algún tipo de plantillas» : bueno supongo que esto es exactamente mi situación. «poner todos los estilos dentro de un gran archivo CSS» : si yo no era el envío de algunas de las páginas html por correo electrónico, de hecho, que podría ser una solución. «cargar dinámicamente un otro archivo CSS (a través de JS de servidor o de scripting del lado)» : realmente buena solución en el caso general, pero no voy a ser capaz de utilizar JS dentro de los clientes de correo también. «La mayoría de los navegadores entender <estilo> etiquetas en el cuerpo» : bueno, supongo que esta es la única solución viable en mi caso.
    • usted está en lo correcto en la medida en que HTML4+XHTML1, pero el HTML5 estándar (bien es que no se hayan finalizado todavía, pero que está siendo apoyada de todos modos) que hace es definir una manera de utilizar style etiquetas dentro de la body de una página HTML.
    • gracias por este truco, parece ser la solución perfecta.
    • muchas gracias por esta info que me hará sentir menos culpable 😉
    • Gracias por esta actualización, difícil de mantener hasta a veces 🙂
    • Hacen que suene como si inline estilo es intrínsecamente malo y lo malo, y no cumple con los estándares. Malo. Seguro, el estilo en la cabeza o a través del enlace tiene muchas ventajas, y por supuesto, te deseo el ámbito de atributo fue apoyado y compatible con versiones anteriores, y claro, me gustaría tratar de rediseñar mi sistema por lo que este problema no era un problema, pero no hay nada de malo con el uso en línea de estilo, especialmente si no tengo la mejor de las opciones.
    • Cosa segura. En línea estilo está muy bien cual es la razón por la que escribí «debería» no usar en lugar de «debe» no uso. Por ejemplo, los correos electrónicos se suele buscar la mejor de la cruz-cliente al ser de estilo en línea.

  3. 10

    He encontrado dos hacks a hacer eso. Ambos deben ser perfectamente válido html.

    El SVG manera

    Envolver su <style /> elemento dentro de un <svg /> elemento.

    HTML:

    <div class="foo">Red text</div>
    <svg><style>.foo { color: red }</style></svg>

    Los Datos-Uri Link

    Formato de tu css como datos de uri y el uso que en un <link /> elemento.

    HTML:

    <div class="foo">Red text</div>
    <link rel="stylesheet" href="data:text/css,.foo%20%7B%20color%3A%20red%20%7D" />

    • Gracias por las ideas. Es compatible con la mayoría de los navegadores?
    • Datos uri debe trabajo en IE8+ (caniuse#datauri), SVG debe trabajo en IE9+ (caniuse#svg-html5)
    • OK muy interesante, obtener mi +1. 🙂
    • eBay no permite el enlace externo estilos. Sin embargo, yo era capaz de agregar los datos de la uri de la solución. Gracias por la info.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea