the
Old Fashioned

CSS Quiz #1

Empezamos con la serie de quizzes sobre CSS y XHTML.

CSS 2.x tiene 10 tipos de medios para utilizar. Sin mirar y sin soplar (no vale consultar las especificaciones), estos medios son:

1. All, Braille, PSP, PDA, Print, Screen, Aural, Tty, TV, Tivo.
2. All, Braille, Embossed, Handheld, Print, Projection, Screen, Speech, Tty, TV.
3. All, Braille, Embossed, PDA, Handheld, Print, Monitor, Speech, Tty, TV.
4. All, Braille, Handheld, Morse, Print, Screen, AS/400, Neutral, Default, TV.
5. All, Braille, Embossed, Handheld, Print, Projection, Screen, Aural, Tty, TV.

Respuestas y su fundamentación (hay 2 que pueden dar problemas si no conocen a fondo las especificaciones) en los comentarios. ¡A participar colegas!

Respuesta: Pueden ser dos opciones: 2 o 5, depende de que especificación se trate. Como bien dijeron Federico y Juan en los comentarios, CSS 2 define Aural como tipo de medio, lo cual es válido, pero está deprecado a favor de Speech (el cual es levemente nombrado en la especificación CSS 2.1, dejando su uso para una posible especificación, tal vez CSS 3).

Pequeña duda sobre tipos de medios en CSS y XHTML

Para los que saben más que yo de CSS y XHTML(1, 2, 3, chicas, el orden es arbitrario, ninguno es mejor que los otros a mis ojos), una preguntilla:

¿El tipo de medio por defecto para una hoja de estilo es screen o all? Según la especificación HTML 4.0 (las negritas son mías):

(..) This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is “screen”.

Sin embargo, Eric Meyer, en Print Different, dice:

(..) The most important is all, which is the default value for any stylesheet which does not have a defined media.

Joe Clark, en Building Accessible Websites dice lo mismo:

If you do not specify a medium for a stylesheet, graphical Web browsers default to an interpretation of media=”all”. That may not be true for cellphones, toaster-ovens, or other Internet-connected devices, not that any of them actually make use of media CSS.

¿De donde han sacado estos señores que el tipo de medio por defecto es all? ¿Alguien puede apuntarme un enlace a donde se especifique eso en las especificaciones de CSS 2.0 y/o CSS 2.1?

Para agregar un poco más de leña al fuego, HTML 4.0 dice:

Note. Style sheets may include media-dependent variations within them (e.g., the CSS @media construct). In such cases it may be appropriate to use “media=all”

Lo cual es una razón perfectamente válida para suponer que el valor por defecto de media sea all. ¿Algún sabio lecturón de especificaciones que pueda hechar luz al respecto?

Pequeño hack para IE: El hack del selector universal

Sinceramente detesto los hacks en CSS. Sólo agregan código que solamente ensucia tu CSS por culpa de algún navegador con errores de interpretación en las especificaciones (léase Internet Explorer). Tal vez los dolores de cabeza más conocidos por los desarrolladores, sean los misteriosos márgenes duplicados, o el tener que usar —en ciertas ocasiones y en ciertos elementos— padding en vez de margin, sin ninguna razón aparente, todo porque IE así ha dicho que sea.

Hay hacks de todo tipo y para todos los navegadores, buscando un poco en Position Is Everything tal vez puedas encontrar la solución a tu problema. Pero si no la has encontrado, todavía puedes usar el último recurso: * html.

Vamos por partes. El selector universal, representado por el caracter asterisco (*) selecciona todos los elementos del árbol del documento. Esto quiere decir que la siguiente regla:

* { color: red; }

Le asignaría el color rojo a todos los elementos del árbol del documento, sobreescribiendo así su herencia (Eric tiene un excelente artículo sobre el poder de los selectores universales). Así, cualquier elemento de un documento HTML tendría el color rojo asignado.

Ahora bien, volviendo a nuestro hack:

* html { }

Esta regla en CSS, quiere decir “aplica esta regla a todos los HTML hijos del elemento universal”, o lo que es lo mismo, “aplica esta regla a todos los HTML descendientes de *“, o “selecciona todos los HTML hijos/descendientes de todos los elementos”. Ahora bien, como HTML es el elemento root por defecto (es decir, es el elemento por el cual comienza el árbol del documento ), no selecionariamos nada, ya que HTML no puede ser hijo de ningún otro elemento. La regla entonces no tiene sentido, pero es válida en CSS y nos servirá para ocultar reglas a navegadores buenos y mostrarlas al navegador malo (IE), ya que cualquier regla empezando por * html, es interpretada por IE (lo veremos más adelante) y puede ser usada a nuestro beneficio.

Esta regla, aunque sencilla, puede prestarse a confusión. ¿Por qué decimos “selecciona todos los HTML hijos de *” y no “selecciona todos los HTML”, o en todo caso, “selecciona EL HTML”? Si estamos pensando en “selecciona todos los HTML”, estamos pensando en D.O.S., en donde poner un dir *.txt quiere decir “muestra todos los archivos .txt”. Aquí, el espacio en blanco hace la diferencia. Al tener el espacio en blanco, estamos aplicando selectores descendentes y el elemento universal se toma simplemente como eso, como el elemento que quiere decir “todos los elementos”. La clave es esa, el elemento * significa “todos los elementos”, y no “todos los elementos X”.

Volviendo al hack, Firefox y Opera simplemente ignoran cualquier regla que empiece con * html, sin embargo, IE la interpreta. Entonces, el siguiente código:

* html body h1 { color:blue; }

Es interpretado por Internet Explorer como html body h1 { color:blue; } (noten que no interpreta el asterisco) y el resultado sería que todos los H1 (hijos de BODY y obviamente de HTML) tendrían color azul. En Firefox y Opera, no pasaría nada.

El hack funciona siempre poniendo a BODY como elemento hijo de HTML y luego poniendo el elemento que queremos estilizar, es decir, poniendo siempre * html body mi-elemento, lo cual es lógico, pues según el árbol del documento, no hay elementos para dar estilo entre HTML y BODY, es decir, no podríamos poner algo como * html h1 (nos estaríamos salteando a BODY, lo cual es incorrecto, pero sin embargo valida perfectamente).. Funciona si se pone * html h1, no hace falta ser tan estrictos con el árbol del documento siempre y cuando respetemos qué elemento contiene a quién (gracias Fede).

Nota: No lo piensen mucho ni se descerebren como yo, según el blog de IE, este hack ya está deprecado. Pero quien sabe, hasta que salga IE7 todavía puede serles útil :)