Finalmente aprendimos a centrar un div, y luego los navegadores añadieron barras laterales

Artículo original ↗ Discusión en Hacker News ↗

Centrar el contenido de una página en relación con toda la ventana del navegador —en lugar de solo con el viewport visible— ha provocado rechazo entre desarrolladores y usuarios que dependen de barras laterales, pestañas verticales y configuraciones de ventanas en mosaico. Los críticos sostienen que intentar mantener una columna de ancho fijo “centrada” físicamente en medio de la pantalla lleva a que el contenido quede oculto por la interfaz del navegador, rompe el comportamiento esperado del diseño, complica la accesibilidad y la adaptabilidad, y filtra información adicional sobre el entorno del usuario. Muchos comentaristas ven este tipo de trucos, en el mejor de los casos, como cuestiones del navegador, o directamente como hostiles al usuario, y prefieren que los sitios centren solo dentro del viewport e ignoren el chrome circundante.

Qué significa “centrar un div”

  • Algunos lectores interpretan “centrar un div” como centrado horizontal solamente (margin: 0 auto), mientras que otros lo entienden como centrado tanto horizontal como vertical.
  • El uso de la frase meme en el artículo es visto por algunos como desalineado con su tema principal, centrado sobre todo en lo horizontal y en las barras laterales.

Centrado en el viewport frente a la ventana/pantalla

  • La discrepancia central: ¿debería el contenido “centrado” centrarse en el viewport (el área visible de la página) o en relación con la ventana del navegador / la pantalla cuando hay barras laterales abiertas?
  • Muchos sostienen con firmeza que el contenido debe estar centrado dentro del viewport: la barra lateral reduce el ancho utilizable, así que el contenido debería moverse en consecuencia.
  • Una minoría aprecia la idea de que el contenido permanezca fijo en el centro físico de la pantalla incluso cuando se abren barras laterales del navegador, pero en general lo ven como una preferencia personal adecuada para una extensión, no como comportamiento web predeterminado.
  • Varios señalan que la posición de la ventana, múltiples monitores, gestores de ventanas en mosaico y ventanas no maximized hacen que la semántica de “centrado en la pantalla” sea absurda o activamente incorrecta.

Opiniones sobre usabilidad y diseño

  • Un grupo amplio considera que tapar contenido con barras laterales del navegador es claramente mala UX y “no es asunto de la página”.
  • Otros dicen que el trabajo de un navegador es gestionar superposiciones/barras laterales; si una barra lateral debe comportarse como una superposición, eso debería ser una configuración del navegador, no lógica de la página.
  • Algunos objetan el diseño de la propia página del artículo: falso “papel” con contenedores de desplazamiento internos, comportamiento de scroll distinto del desplazamiento nativo y anchos de contenido muy estrechos.
  • Los contraargumentos invocan investigación tipográfica que favorece líneas más cortas; estas reglas de “ancho óptimo” son vistas por algunos como útiles y por otros como dogmáticas y en conflicto con la preferencia del usuario.

Cuestiones técnicas y de implementación

  • Múltiples informes dicen que la demostración no se comporta como se describe en Firefox o Chromium, o solo lo hace a veces, y que presenta parpadeo y condiciones de carrera al alternar barras laterales.
  • Usar JS adicional para pelearse con el layout del navegador es criticado por ser frágil, visualmente brusco y probable de romperse en casos límite.

Preocupaciones sobre privacidad y la API web

  • Usar screenX/screenY, el tamaño de la ventana y APIs relacionadas para inferir la posición de la ventana se ve como otro vector de fingerprinting y fuga de información.
  • Algunos expresan un escepticismo más amplio hacia las nuevas APIs web que permiten a los sitios razonar sobre la UI del host fuera del viewport.