CSS Style Attributes. La especificación del W3c 18.5.16
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
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: Css ⌘ Style ⌘ Attributes.
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:
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.
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 soninvalid 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 atributostyleen cada elemento. Y en caso de que algún lenguaje de marcado lo permita cada atributostyle
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:
- No es lo mismo, no da igual, elemento que tag.
- CSS básico: Sintaxis de Css y Glosario de términos (1)
- 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.
Kseso
the obCSServer ᛯ 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 Kseso
Un poco compleja esta explicación
ResponderEliminarInteresante 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.
ResponderEliminarAhora 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!
Hola Raylin
EliminarMira 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
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.
ResponderEliminarSiento que faltaron ejemplos donde, sigue siendo necesaria la inclusión de estilos Inline.
Hola G3kdigital
EliminarNo 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
Que modales los mios, me he faltado lo más importante.
ResponderEliminarGracias por el articulo y un grato saludo desde Colombia.
Hello,
ResponderEliminarI speak english but no spanish.
Can somebody explain me, how can I make graphics like this in red/blue?
This looks very nice :)
thx
Hello,
EliminarThe blog "speak" Css code but no graphic design.
We use code editors but no images editors (bitmaps or another modes)
Thanks for your answer :)
EliminarSo 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