¿Han de lucir igual los sitios web en todos los navegadores?

La pregunta la plantea Jeffrey Zeldman en su muro en Facebook: «Do websites need to look the same in every browser? » y para ilustrarla usa la siguiente imagen:

Captura de pantalla proporcionada por Zeldman
Captura de pantalla de dos navegadores presentando el mismo sitio web y que lucen muy diferentes.

Aparte de las diferencias que no estoy segura de si se deben a un recorte en la imagen o realmente a cómo presenta el sitio el segundo navegador, es decir, como más cuadrado y con mayor espacio por abajo; lo que realmente me llamó la atención es cómo luce el cuadro, cómo luce la persona retratada en la segunda imagen, que parece desequilibrada mentalmente, con unos ojos muy abiertos y como con rosácea.

Por eso investigué y descubrí que ¡se trata de una obra creada sólo mediante CSS! Lo aclara la autora en los metatags del código fuente:

Vista del código fuente
Vista del código fuente de la página en el que se indica que se trata de un cuadro al óleo creado mediante CSS solamente.

Me resulta asombroso el nivel que han alcanzado las hojas de estilo y los navegadores en su entendimiento y representación de las mismas, desde aquellos años en los que apenas servían para poner algo de color a los textos y posicionar elementos en la pantalla. Hoy en día las hojas de estilo sirven incluso como pinceles para crear una obra de arte.

Precisamente por ello, aunque la mayoría si no todos los que respondían a Zeldman en su muro lo hacían con un rotundo NO, no puedo estar más en desacuerdo… en parte. Es decir, claramente los sitios no tienen que lucir exactamente igual en todos los navegadores, lo fundamental es que cubran al menos la accesibilidad y usabilidad; pero dado el nivel de riqueza pictórica, sí pictórica, que han alcanzado las hojas de estilo, resulta esencial una correcta representación de las mismas. Queda claramente demostrado con la siguiente captura en la que presento el mismo sitio en cuatro navegadores distintos:

Captura de pantalla de cuatro navegadores distintos
Cuatro navegadores representando la misma página: Google Chrorme, Firefox, Microsoft Edge y Opera.

El resultado es asombroso, casi tanto como la obra original. De izquierda a derecha y de arriba abajo: La primera, una representación bastante aceptable, la segunda, nuevamente una desequilibrada con rosácea y con reborde y píxeles en el óvalo del rostro, la tercera una caricatura y encima mal y la cuarta, la mejor de todas, muy delicada y excelente representación.

Desvelo el misterio:

  1. Google Chrome, 78.0.3904.87 (Build oficial) (32 bits)
  2. Firefox Browser 70.0.1 (64-bit)
  3. Microsoft Edge 44.17763.771.0
  4. Opera, 64.0.3417.92

<ironía>Microsoft Edge a la vanguardia siempre</ironía>. Realmente criminal.

Las capturas no permiten ver el detalle. Comprobad por vosotros mismos con diversos navegadores entrando en: Pure CSS Lace

Creo que Zeldman iba precisamente por ahí, que realmente no preguntaba si todos los sitios han de verse igual en todos los navegadores, sino que destacaba la importancia de que los navegadores representen de manera correcta las reglas de las CSS u hojas de estilo.

Definitivamente y siempre ha sido así, Opera es el navegador que mejor implementa los estándares. Aunque aún echo en falta el elemento <link> y cómo lo implementaba Opera.

Y bueno, por otra parte, es realmente asombroso lo que se puede hacer hoy en día con las hojas de estilo, cuando tienes talento y conocimiento. Mi enhorabuena para la artista y experta, realmente experta, en CSS Diana A. Smith. Diana ha sido entrevistada por su trabajo y en el vídeo muestra otras vistas de representación de sus obras en diversas versiones de navegadores, lo que resulta incluso hilarante:

Nueva extensión para destacar landmarks, encabezados o enlaces

Desde hoy contamos con una nueva extesión para Firefox o Bookmarklet para Chrome útil tanto para desarrolladores como para usuarios. Se trata de una extensión que saca un listado de las landmarks, de los encabezados o de los enlaces existentes en una página.

Esa funcionalidad es similar a la que ofrecen lectores de pantalla como JAWS o NVDA y, por tanto, resulta útil para los desarolladores al poder hacerse una idea de cómo percibirán esos elementos las personas usuarias de lectores de pantalla, sin necesidad de utilizar un lector.

Puede instalarse desde los siguientes enlaces:

Extensión para Firefox:

Bookmarklet:

 Dado que es muy nueva, ira mejorando también con el tiempo. Por el momento se ha detectado un funcionamiento poco práctico en Firefox al utilizar el atajo Ctrl+7 dado que ese atajo en ese navegador lleva a una pestaña abierta. De todas maneras al volver al página en la que se ha querido activar el visor éste aparece y es funcional. El autor está avisado y seguramente llevará a cambios en los próximos días.
El tema de las landmarks me resulta especialmente interesante y tengo pendiente hacer una entrada más extensa sobre ello.