CSS Style Attributes. La especificación del W3c

En español: la especificación "CSS Style Attributes" para declarar estilos en línea y un par de respuestas al porqué no se puede hacer según qué cosas por esta vía.

CSS Style Attributes. La especificación del W3c

Por Kseso ✎ 9
CSS Style Attributes

Sí. Has leído bien. Después de lo pesado que soy con el uso correcto de la terminología en Css y abominar de quienes hablan de atributos Css y otros disparates por el estilo, voy ahora y pongo junto, y nada menos que en el título de un artículo, las tres palabras: CssStyleAttributes.

Y para más desconcierto, inicial, lo hago en base al documento del consorcio W3c con status de recomendación del mismo título.

No. No debes alarmarte. Ni he cambiado de opinión ni mi opinión al respecto se ha visto desautorizada por el documento aludido. ;-)

El documento, ahora ya recomendación, marca cómo se deben incluir los estilos (o declaraciones Css) en el cuerpo del documento generado (html, xml...) utilizando para ello el atributo style='' en la etiqueta de apertura de los elementos. Lo que tradicionalmente se ha llamado estilos en línea.

Sintaxis de los estilos incluidos en el atributo style

El valor del atributo 'style' debe coincidir con la sintaxis de los contenidos de un bloque de declaraciones CSS con exclusión de los corchetes que lo delimitan. Su sintaxis formal (en sus términos y convenciones) es la misma que la sintaxis básica de CSS.

Esta sintaxis es la utilizada desde siempre al incluir estilos en línea en el documento. Los caracteres permitidos son los mismos que ya fueron recogidos en la especificación de Css2.1

Lo anterior es así porque el 'intérprete' que debe calcula los valores de los estilos incluidos en el atributo style es el mismo que utiliza el navegador para los incluidos en las hojas de estilos.

style='Xºdeclaracion [ ; Xºdeclaracion ]'

Donde Xºdeclaracion es cualquier par propiedad: valor según la nomenclatura Css. El corchete indica que puede haber tantas declaraciones como sean necesarias, estando separadas una de otra por un ; (punto y coma).

Cadenas de texto y caracteres prohibidos

La especificación ahora aprobada incluye expresamente dos notas aclaratorias relativas a los comentarios y a los corchetes de apertura y cierre de los bloques de declaraciones:

CSS Style Attributes
  1. Comentarios Css /* */

    La recomendación no los incluye al exponer la sintaxis de los estilos en línea, pero ello es porque lo hace así siempre. Sin embargo sí puedes incluirlos en los estilos incluidos en el atributo style. Bien conformados ni anulan las declaraciones ni son marcados como errores o advertencias ni por el validador de Html ni por el de Css.
  2. corchetes de apertura y cierre de los bloques de declaraciones { }

    Expresamente prohibidos en una nota exprofeso. Exáctamente indica que como no hay un corchete de apertura { no puede haber otro de cierre } y por lo tanto son invalid token.

La segunda nota (y su razón de ser) relativa a los corchetes delimitadores de los bloques de declaraciones es la responsable de que no sea posible declarar estilos en línea para cualquier pseudoclase o pseudoelemento de cualquier elemento. Como por ejemplo los estylos relativos al :hover en línea para un enlace.

Tampoco se pueden incluir en el atributo style las reglas de reglas o at-rule (@nombre) que se identifican por la '@' inicial, como las keyframes, media queries, étc. La razón es la misma: por no estar permitido el carácter {.

El consorcio W3c recomienda encarecidamente que las especificaciones de los lenguajes de documentos web (como html, xml...) no permitan que haya más de 1 atributo style en cada elemento. Y en caso de que algún lenguaje de marcado lo permita cada atributo style ha de ser tratado como una regla de estilo diferente.

Apuntes finales

1

Para terminar y por si tienes alguna duda sobre qué es un elemento y qué lo conforma o sobre la terminología Css te sugiero estos artículos para aclarar conceptos:

  1. No es lo mismo, no da igual, elemento que tag.
  2. CSS básico: Sintaxis de Css y Glosario de términos (1)
  3. CSS básico: Vocabulario y Glosario de términos Css (2)

2

El crédito de las dos imágenes del artículo: provienen de la página del equipo de diseño gráfico francés Helmo. Todos los créditos a su autor original. Su uso aquí es méramente a efectos de ornamentar el post.

3

Artículo publicado originalmente en Noviembre de 2013. Revisado, corregido y ampliado en Mayo de 2016.

Amigos que hacen cosas

Dronic Servicios AéreosDronic Servicios Aéreos
Dronic Servicios Aéreos: imágenes aéreas de calidad

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 9

  1. Un poco compleja esta explicación

    ResponderEliminar
  2. Interesante articulo muchas gracias!. Osea el uso de la incluso de atributo style, es una cultura de la mayoría de personas que opinan que su uso "inline", es inapropiado para el mantenimiento y "belleza de un sitio". Sin embargo librerías de JS, hacen la inclusión a la fuerza de los estilos en lineas cuando vemos en debug en firebug. Osea... que aún así se implementa su uso.

    Ahora bien.. el uso de la etiqueta "style" a la fuerza, ya éso si sería un costo en el mantenimiento y la estructura. Siempre será importante excluirlo del código HTML e impotarlo mediante un tag "link"

    Una pregunta. Dijiste: "La misma imposibilidad y razón aplica para las reglas de reglas (@nombre) que se identifican por la '@' inicial como las keyframes, media queries, étc."

    Osea que ésto no es valido o no funciona?:

    @media only screen and (max-width: 600px) {
    a:hover{
    background: #96F;
    }
    }

    Aclárame ésa duda por favor.Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Raylin
      Mira a ver si con la nueva redacción de ese punto ya está más claro:
      Tampoco se pueden incluir en el atributo style las reglas de reglas (@nombre) que se identifican por la '@' inicial, como las keyframes, media queries, étc. La razón es la misma: por no estar permitido el carácter '{'.

      Por cierto, una puntualización que no creí oportuno incluir en el artículo: no hay que confundir el elemento <style>...</style> (ya esté en el head o en el body) con el atributo style.

      En el primero (el elemento style) no hay restricciones esté donde esté, porque las reglas se deben escribir completas: grupo_de_selectores { bloque_de_declaraciones }

      Sobre si el uso del elemento <style>...</style> (ya sea en el head o en el body) sea "bueno o malo" dependerá de cada caso en particular y de lo que suponga (pros/contras) el hacerlo así o mediante un link.

      Un saludo

      Eliminar
  3. Estas etiquetas inline, sino estoy mal son las que usan los Editores WYSIWYG tipo TinyMCEditor o afines, no? Además de esto también en el caso de los mailings veo mucho que siempre se recomiendan usar estos.

    Siento que faltaron ejemplos donde, sigue siendo necesaria la inclusión de estilos Inline.

    ResponderEliminar
    Respuestas
    1. Hola G3kdigital
      No creí oportuno introducir valoraciones personales y/o ejemplos sobre el uso de los estilos en línea (dentro del atributo style del elemento afectado).
      La razón, sólo pretendía hacerme eco de la especificación que regula su uso.

      El hecho de su uso (recomendado) en los mails es debido a la disparidad de gestores de correo existente y el soporte que ofrecen a Css.
      Si te parece que lo de los navegadores es de locos, lo que hay en los gestores de mail es demoníaco xD
      Por si te es de ayuda, mira esta chuleta

      Un saludo

      Eliminar
  4. Que modales los mios, me he faltado lo más importante.

    Gracias por el articulo y un grato saludo desde Colombia.

    ResponderEliminar
  5. Hello,

    I speak english but no spanish.

    Can somebody explain me, how can I make graphics like this in red/blue?
    This looks very nice :)

    thx

    ResponderEliminar
    Respuestas
    1. Hello,

      The blog "speak" Css code but no graphic design.

      We use code editors but no images editors (bitmaps or another modes)

      Eliminar
    2. Thanks for your answer :)

      So this graphic is produced with 2 individual images (1 blue, 1 red) and united with CSS-code in one single graphic?

      Because its jpeg. I mean the graphic in the content (women and cat), not the bg.

      thx

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap