Selectores CSS: la intersección entre diseño y programación

El uso de selectores CSS en los "frameworks" para JavaScript más conocidos ha permitido lo que hace unos años era impensable: los diseñadores entienden el código de los programadores y los programadores pueden comprender el CSS de los diseñadores.

jQuery es especialmente adecuado: no distingue entre selectores "por id" ni selectores por "clase" (Prototype tiene dos funciones diferentes, $() y $$(), para estas tareas).

$('.lateral a.externo').click(function(ev) {
    // Código  a ejecutar
})

Este sencillo código es fácil de entender y un diseñador al verlo rápidamente intuye que en todos los tags A dentro de la "capa" lateral que tengan la clase externo se hará algo al hacer click.

.lateral a.externo {color: red; padding: 5px; margin: 0;}

Este fragmento de CSS afecta a los mismos elementos que el javascript anterior. Un desarrollador enseguida ve también a qué elementos afecta.

Lo bueno es que si el diseñador y el programador hablan en el mismo lenguaje (selectores CSS), el desarrollo es muy fácil y se puede trabajar en paralelo fácilmente.

Cada uno a su bola

Escribíamos hace unas semanas sobre lo difícil que es para un diseñador de páginas web conseguir que el mismo diseño se vea igual de bien en todos los navegadores. Hoy ahondamos un poco más en la cuestión.

Para formatear y dar estilo a las páginas web actualmente se utiliza una tecnología llamada CSS (Cascading Style Sheets u Hojas de Estilo en Cascada).
La CSS permite que los elementos de una página web se vean de una forma u otra sin necesidad de tocar el contenido. Esto es una práctica muy aconsejable, puesto que conseguimos separar e independizar por un lado el texto o contenido de la página y por otro la presentación.

Hasta hace unos años, las páginas web se maquetaban y se les daba estilo con etiquetas HTML dentro del texto que no aportaban contenido, si no formato. Afortunadamente, casi nadie trabaja así actualmente.

El problema es que cada navegador interpreta un poco a su aire estas reglas CSS, con lo que surge el problema que comentábamos en la entrada anterior: los diseñadores tienen que saberse un montón de "trucos" para conseguir que la misma CSS sirva para todos los navegadores.

Existe una organización llamada "Web Standards Project" que promueve el uso de estándares y tecnologías compatibles en las páginas web. Se les conoce sobre todo porque han preparado una serie de pruebas para ver si un navegador es compatible e implementa correctamente las especificaciones de los distintos estándares (CSS, HTML, etc).
Esta prueba se llama "Acid Test" y tiene varias versiones, la que se supone que deberían pasar los navegadores actuales es la versión 2 (la versión 1 de la prueba la pasan los 5 navegadores más utilizados (Firerox, Explorer 6 y 7, Opera y Safari).

Vean la prueba Acid 2 en estos cinco navegadores. Lo que el navegador debería mostrar es una carita como ésta:



Y así la muestran ...

Internet Explorer 6


Internet Explorer 7:


Mozilla Firefox:


Opera:


Safari:


La prueba Acid tiene detractores, pero para el propósito de esta entrada nos vale: es sorprendente comprobar cómo los distintos navegadores interpretan las mismas reglas. También es sorprendente cómo los navegadores menos usados (Opera y Safari) son los que mejor implementan las tecnologías web.

Resumen: la próxima vez que Ud. visite una página web en la que se vea algo extraño o descolocado, verifique (si tiene tiempo y ganas, claro) cómo se ve la página con otro navegador, especialmente si usa alguna versión de Internet Explorer.