Las técnicas de hacking HTML que dieron forma a internet

El ingenio del hacking HTML

• La necesidad del hacking HTML: A veces, debido a fallas en el código HTML o a implementaciones deficientes de los navegadores, hay que escribir código poco elegante para obtener el resultado esperado. Estos hacks a veces son creativos y vale la pena recordarlos.
• El hack de @import en Netscape Navigator 4.0: Permitía bloquear estilos CSS que Netscape no soportaba. Netscape apoyaba JSSS en lugar de CSS, pero cuando el W3C eligió CSS, la implementación de CSS en Netscape 4 se apresuró, por lo que su desempeño fue inferior al de navegadores posteriores.
• Usar tablas HTML para maquetación: Permitía diseños más experimentales. Usar tablas HTML como herramienta de maquetación encaja con la definición de hack, y en el mundo del correo electrónico todavía se usa.
• Usar guion bajo antes de los estilos CSS: Permitía aplicar ciertos estilos solo a IE6. Aprovechaba las limitaciones de IE al analizar caracteres especiales.
• Usar AlphaImageLoader para dar transparencia PNG: Renderizaba la transparencia de archivos PNG que IE6 no soportaba. Procesaba la imagen a través de un filtro.
• Comentarios condicionales: Permitían usar ciertos trucos solo en versiones específicas de IE. Hackeaban la función de comentarios HTML para que el código pudiera ejecutarse.
• Scalable Inman Flash Replacement (sIFR): Permitía usar tipografías no seguras para la web. Usaba un hack de JavaScript que reemplazaba texto con una incrustación Flash.
• El hack del texto preheader: Evitaba que texto adicional en correos electrónicos se colara en la línea descriptiva. Usaba una secuencia no estándar o inusual de caracteres de espacio en blanco.
• Google Chrome Frame: Reemplazaba IE6 con una ventana de Chrome. Se implementaba mediante un complemento del navegador.
• El hack de selectores solo para Webkit: Aplicaba código CSS solo a navegadores Webkit. Detectaba si un navegador específico soportaba cierto código CSS específico.
• Diseño responsivo: Organiza la información de forma efectiva en distintas configuraciones, especialmente en tabletas y móviles. En la mayoría de los casos usa media queries para acomodar la información según el dispositivo.

La opinión de GN⁺

• Lo más importante es el esfuerzo de los desarrolladores por encontrar soluciones creativas fuera de los estándares de HTML y CSS.
• Este artículo resulta interesante y atractivo porque muestra cómo los desarrolladores web usaron hacks creativos para superar las limitaciones de los navegadores y mejorar la experiencia de usuario.
• Estos hacks reflejan la evolución de los estándares web y el esfuerzo constante de los desarrolladores por lograr un mejor diseño web.

[GN⁺]

Opiniones de Hacker News

• Se puede entender usar tablas para el layout.

  Cuando las tablas dejaron de estar de moda, durante algunos años lo más común para el layout fue usar float. Me sorprende que ese método no aparezca en la lista. Según la documentación de MDN, la propiedad float se usó originalmente para hacer flotar imágenes dentro de bloques de texto, pero con frecuencia se utilizó para crear layouts web de múltiples columnas. Ahora, con la llegada de flexbox y grid, volvió a su propósito original.

• No hay respeto por spacer.gif.

  En HN todavía se usa y viene incluido en todas las solicitudes de página: s.gif

• Mis técnicas favoritas:

  • 'Faux columns' para hacer que la barra lateral pareciera tan larga como el contenido
  • Hackear bordes con nine-patch y 9 div o una tabla 3x3, repitiendo el fondo en algunos ejes. En CSS3 apareció border-image para ayudar con eso. Pero estos estilos de borde ya no se prefieren.
  • Se podía usar nine-patch para crear bordes redondeados, pero mucha gente usaba generadores que producían HTML para simular bordes redondeados. Como se explica en este artículo, la sabiduría convencional decía que el markup extra ocuparía más bytes que una imagen, pero requería menos round trips y era más fácil de ejecutar.

• HN sigue usando una de estas técnicas incluso hoy:

  • Usa tablas HTML para el layout
  • Esta lista resalta cómo el desarrollo sin estándares codifica información de control en varios canales secundarios tolerables.
  • La posible confusión y los conflictos derivados de esto a veces resaltan el desprecio que se siente por el proceso del W3C. Ese proceso combina la evolución de tecnologías web basadas en estándares con la innovación impulsada por los navegadores. A veces una guía a la otra, o avanzan al mismo tiempo.
  • Aunque a menudo se critica, este proceso puede interpretarse como más sostenible y estable que el anterior.
  • Me pregunto cuántos de quienes critican las nuevas normas W3C-vendors recordarían estos más de 10 hacks extraños y querrían volver a esa época.

• No incluye ocultar visualmente los encabezados para accesibilidad colocándolos en la posición -10000.

• No se menciona instalar HTML5 shiv antes del CSS para eliminar las rarezas entre navegadores.

  La historia de HTML5 shiv

• Recuerdo los buenos viejos tiempos de usar un gif transparente de 1×1 píxel para controlar las celdas de las tablas.

• Una mención adicional al uso muy extendido en los primeros años de  , es decir, la entidad de carácter de espacio no separable:

  Se usaba para mover texto hacia la derecha o la izquierda dentro de un contenedor. O se usaba de forma similar a un gif espaciador de 1x1 para que las celdas de las tablas funcionaran correctamente. Algunas páginas usaban cientos de  . En general, se utilizaba como forma de agregar margen o padding.

• A veces no sé si los desarrolladores web modernos se malacostumbraron por CSS Grid y el fin de IE, o si en esa época nosotros estábamos malacostumbrados por no tener que lidiar con frameworks modernos complejos y procesos de build.

• Duda sobre si el diseño responsivo realmente es un hack:

  Las media queries son sorprendentes. Poner la lógica condicional en CSS en lugar de JavaScript es una gran ventaja cuando quieres renderizado del lado del servidor.