¿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:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al continuar utilizando este sitio aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar