- Los primeros desarrolladores web se enfrentaban a diferencias en la implementación de estándares y fallas entre navegadores, por lo que era difícil garantizar de forma estable el diseño y el comportamiento deseados solo con HTML/CSS válido.
- Entornos como Netscape 4, Internet Explorer 5/6/7, Safari/WebKit y Outlook dieron origen a código de evasión específico por navegador en CSS, transparencia PNG, comentarios, selectores y vistas previas de correo.
- Los layouts con tablas HTML, sIFR, Chrome Frame y el diseño responsivo son ejemplos de intentos por superar restricciones de diseño y problemas de navegadores antiguos combinando tecnologías de formas distintas a su intención original.
- Aunque estos hacks tenían límites como menor accesibilidad, código no estándar y dependencia de Flash o plugins, en ese momento eran medios prácticos para asegurar compatibilidad y expresión visual.
- El ideal de los estándares web y las formas reales de uso chocaron continuamente, y las soluciones alternativas repetidas de desarrolladores y diseñadores dejaron una huella duradera en el diseño web, el HTML para email y las formas de adaptación móvil.
Hacks de CSS para esquivar fallas de los navegadores
- El hack de
@importen Netscape Navigator 4.0 consistía en cargar deliberadamente con@importCSS que Netscape no podía soportar, para impedir que ese navegador aplicara estilos avanzados.- La estructura consistía en cargar el CSS básico con
<link>y separar el CSS más avanzado para cargarlo mediante@import. - CSS Cookbook resume que este método tenía el efecto de cargar junto con la página archivos CSS que no funcionaban en Netscape.
- Netscape impulsó JSSS en lugar de CSS, y después de que el W3C eligiera CSS, implementó CSS de prisa en Netscape 4 durante el verano de 1997.
- En Netscape 4, desactivar JavaScript tenía el efecto secundario de desactivar también CSS.
- La estructura consistía en cargar el CSS básico con
- Los hacks de CSS dirigidos a Internet Explorer 6 consistían en anteponer un guion bajo a una propiedad, como
_width, para que solo IE6 interpretara esa declaración.- El modelo de caja del W3C consideraba que
widthexcluía el borde y el padding, pero Internet Explorer trataba el padding y el borde de otra forma, lo que generaba diferencias de layout entre navegadores. - Un ejemplo era usar una declaración no válida en CSS estándar como valor de corrección para IE6, por ejemplo
width: 300px; _width: 320px; padding: 10px;. - También existían hacks exclusivos de IE, como agregar otro signo de exclamación después de
!importantpara que se comportara de forma distinta solo en IE7 o versiones anteriores.
- El modelo de caja del W3C consideraba que
Torcer la estructura semántica en nombre del layout
- El layout con tablas HTML fue un hack representativo que usaba
<table>, originalmente pensado para representar datos tabulares, como herramienta de composición visual de páginas.- David Siegel se acercó a la web desde la mirada visual de un diseñador tradicional e intentó crear sitios web más atractivos yendo contra la convención de que el navegador decidía el resultado visual del HTML.
- En Creating Killer Web Sites, aborda cómo esquivar el marcado estructural, usar imágenes para crear composiciones bidimensionales y, cuando aparecieron las tablas, poner texto en columnas.
- Jay Hoffman, de The History of the Web, resume que los puristas de HTML/XML veían la mezcla entre diseño y estructura de código como un gran tabú.
- Los layouts con tablas dañaron la accesibilidad y tomó tiempo repararlo, pero demostraron el valor de que los desarrolladores pudieran estructurar visualmente portales web.
- El diseño responsivo, al igual que los layouts con tablas, combinó tecnologías existentes de una forma nueva, pero fue un método para cambiar el layout según el tamaño de pantalla dentro del alcance de los estándares web.
- En el diseño web de los años 2000, implementar con CSS el “Holy Grail layout”, con tres columnas que se extendían hasta el final de la página, era un tema muy discutido.
- Hubo varias soluciones alternativas, como crear columnas falsas con imágenes de fondo, y más adelante CSS pasó a soportar layouts basados en grillas.
- Con la popularización de los smartphones, el layout tradicional de tres columnas perdió sentido y surgió la situación de tener que gastar dinero en sitios web móviles separados.
- Ethan Marcotte, en su artículo sobre responsive web design en A List Apart, propuso usar media queries para adaptar la disposición de un sitio web al formato de la pantalla.
- En ese momento, el diseño responsivo parecía un hack que aprovechaba las media queries, todavía poco familiares, pero cambió el diseño web a largo plazo.
Imágenes y comentarios alternativos en la era de Internet Explorer
AlphaImageLoaderesquivaba el problema de que Internet Explorer 5 y 6 no soportaran correctamente la transparencia PNG mediante un filtro exclusivo de Microsoft.- Internet Explorer soportaba PNG desde la versión 4, pero en muchos casos no lo renderizaba bien, y en particular la falta de soporte para PNG transparentes en IE5/IE6 era un problema importante.
- Jeff Starr, de Perishable Press, trató en PNG fix for Internet Explorer que las soluciones de la época requerían el filtro de transparencia exclusivo de Microsoft AlphaImageLoader.
- Un ejemplo era aplicar
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...)en IE y, en navegadores que no fueran IE, aplicar una imagen de fondo normal mediante el selector[class]. - Estas pequeñas brechas de funcionalidad hicieron que, a fines de los años 2000 y comienzos de los 2010, los desarrolladores siguieran teniendo que considerar hacks específicos por navegador.
- Los comentarios condicionales (Conditional Comments) eran una extensión de los comentarios HTML creada por Microsoft para decidir si se renderizaba determinado HTML según la versión de IE.
- Como Internet Explorer exigía demasiados hacks para implementar sitios web, Microsoft introdujo otro hack para administrar esos hacks.
- Los comentarios HTML, que originalmente no estaban pensados para ejecutarse, pasaron a funcionar según condiciones de versión de IE.
- Se introdujeron por primera vez en Internet Explorer 5 y todavía pueden ser necesarios en diseños complejos de email para Microsoft Outlook en Windows.
- Jens Oliver Meiert criticó en un artículo de 2007 que los comentarios condicionales dañaban la separación entre estructura y presentación, porque obligaban a volver a ajustar el HTML de cada documento o plantilla al responder a versiones de IE.
- Los comentarios condicionales se eliminaron después de IE9, y la compilación condicional de JavaScript podía usarse como alternativa.
Combinaciones no estándar para fuentes, email y navegadores antiguos
- sIFR (Scalable Inman Flash Replacement) era un hack basado en JavaScript que reemplazaba el texto por embeds de Flash para mostrar la fuente deseada sin quedar atado a las fuentes web seguras.
- Core Fonts for the Web de Microsoft prácticamente recomendaba el uso de un conjunto limitado de fuentes web seguras, y luego fue descontinuado.
- Las primeras técnicas de sustitución de fuentes partieron del uso de imágenes, pero tenían límites de accesibilidad y expresividad.
- Shaun Inman propuso la idea de reemplazar la fuente deseada con un pequeño archivo de Adobe Flash, y Mike Davidson hizo que, mediante sIFR, las fuentes se escalaran según fuera necesario.
- Davidson consideró en su publicación de 2004 sobre el lanzamiento de sIFR que el problema de entregar tipografías personalizadas no instaladas por el usuario aún no estaba resuelto.
- sIFR fue una etapa intermedia hacia una verdadera solución de fuentes web, y no duró mucho cuando Flash no logró pasar al entorno móvil.
- El hack del texto de preheader consiste en insertar caracteres ocultos y espacios para evitar que, en la línea de vista previa de los clientes de correo, se concatene texto no deseado del cuerpo siguiente.
- El preheader es el texto breve que se ve después del asunto en la bandeja de entrada y funciona como un subtítulo del email.
- Como algunos clientes de correo toman etiquetas HTML o texto irrelevante del cuerpo para la vista previa, se inserta por la fuerza espacio entre el preheader previsto y el texto siguiente.
- Un ejemplo recomendado por Litmus consistía en repetir caracteres como
͏,,dentro de un área condisplay: none,max-height: 0pxyoverflow: hidden.
- Google Chrome Frame era un plugin de navegador que permitía usar el motor de renderizado de Chrome dentro de Internet Explorer, para habilitar funciones web modernas incluso en entornos dependientes de IE6.
- A algunas empresas les costaba migrar a navegadores modernos debido a departamentos de IT fuertes y a la dependencia de tecnologías basadas en IE6.
- Google creó Chrome Frame en 2009 para ofrecer un motor moderno a Internet Explorer antiguo y evitar que los desarrolladores tuvieran que crear múltiples versiones o renunciar a funciones nuevas.
- Según la publicación sobre el retiro de Chrome Frame, en ese momento muchos usuarios usaban navegadores que se habían quedado atrás en funciones modernas.
- Herramientas como Google Wave y YouTube necesitaban funciones HTML5, y el soporte para IE6 era una restricción para Google.
- Chrome Frame estuvo en el mercado durante 5 años, y después de ese período Chrome se convirtió en un navegador muy dominante.
Respuestas específicas para Safari/WebKit y la evolución real de la web
- Los hacks con selectores específicos de WebKit, como
@supports (-webkit-appearance:none) {}, aplican CSS solo a navegadores de la familia WebKit aprovechando el soporte de CSS exclusivo de determinados navegadores.- Cuando Safari apareció por primera vez, se basaba en un motor con raíces en la comunidad open source y, al inicio, tenía un fuerte soporte para los estándares HTML/CSS.
- Apple Mail usa WebKit, por lo que se consideraba un entorno que en general funcionaba bien para programar emails.
- Con el tiempo, surgió el problema de que el calendario de lanzamientos de Safari quedara atado a los calendarios de Mac e iOS, quedándose rezagado frente a la industria.
- Los desarrolladores criticaron a Apple por ignorar bugs o retrasar funciones que la dejaban en desventaja competitiva.
- Un usuario de Reddit escribió en una publicación de queja sobre el desarrollo para Safari que, aunque se implementen APIs, tienen muchos bugs o se rompen más adelante.
- Este hack también funcionaba en las primeras versiones de Chrome, que comenzaron basadas en WebKit.
- La intención del HTML y la forma en que realmente se usó la web se alejaron mucho, y diseñadores y especialistas en UI construyeron expresión visual sobre Internet a pesar del código extraño.
- Como explicó David Siegel, los organismos de estandarización querían que HTML funcionara de una forma que priorizara a los usuarios y la estructura por encima del diseño final, algo similar a RSS.
- Protocolos de la misma época como Gopher también funcionaban de una manera en la que el diseño no tenía gran influencia.
- Sin embargo, por la creatividad de los usuarios de Internet y la dependencia del Internet comercial respecto del lenguaje visual, esa filosofía no se volvió dominante.
- En HTML para email, incluso manejar degradados transparentes que serían fáciles con HTML/CSS estándar resulta difícil, y soluciones alternativas como un viejo glitch de tablas HTML mencionado en comentarios de StackOverflow todavía pueden servir como respuesta.
1 comentarios
Opiniones de Hacker News
Usar tablas para el layout es bastante entendible
Pero durante varios años después de que las tablas pasaran de moda, armar layouts con float era lo único que había. Esa época sí que fue dura, y me sorprende que no esté en la lista
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
“La propiedad float, que originalmente era para hacer flotar imágenes dentro de bloques de texto, se convirtió en una de las herramientas más usadas para crear layouts de varias columnas en páginas web. Con la llegada de flexbox y grid, ahora volvió a su propósito original”
Cuando ya estaba por terminar, lo abrí en IE y todo el diseño se rompió; como el público objetivo casi seguro iba a usar IE, al final tuve que reescribirlo con tablas. Fue un día triste
Después de que las tablas cayeron en desuso, vi a muchos equipos de frontend desperdiciar meses acumulados jugando con floats para sostener las creencias de los “puristas”, creando páginas web mucho menos fáciles de entender, y de ahí saqué una lección importante
Joel Spolsky, en un gran artículo, llamaba a esos desarrolladores Architecture Astronauts: el tipo de gente que olvida que su trabajo es crear software que realmente funcione con el mínimo esfuerzo. Creo que cosas como lo ridículo de la primera especificación de EJB o el burlado AbstractFactoryBuilderConstructor de Java también salieron de esa clase de gente
Con el tiempo aprendí a reconocer bien esa tendencia y a mantenerme lejos de ella
https://en.wikipedia.org/wiki/Holy_grail_(web_design)#Faux_c...
.clearfix::after { content: ""; clear: both; display: table; }[1] https://www.w3schools.com/howto/howto_css_clearfix.asp
float era complicado y difícil de ajustar bien, y mucha gente simplemente volvió a las tablas; sinceramente, no se los podía culpar
¿spacer.gif no merece respeto?
Claro que todavía está en HN y se incluye en cada solicitud de página
https://news.ycombinator.com/s.gif
Hay algunas cosas que me gustaban
Faux columns hacía que visualmente parecieran extendidas, para que la barra lateral se viera tan larga como el contenido: https://alistapart.com/article/fauxcolumns/
Yendo más allá, con 9-patch y 9 divs o una tabla 3x3 se podían repetir fondos en cada eje para imitar bordes a mano. En CSS3 apareció border-image y ayudó un poco, pero ese estilo de bordes ya no está muy de moda
Los bordes redondeados también se podían hacer con 9-patch, y mucha gente usaba generadores para crear varios elementos y producir HTML que simulara bordes redondeados. Este artículo lo explica: http://benogle.com/2009/04/29/css-round-corners.html Normalmente el marcado adicional ocupaba más bytes que una imagen, pero la percepción era que reducía las solicitudes de ida y vuelta y era bastante fácil de hacer
Estaba más cerca del lado de ActionScript, pero la idea de styling era la misma, así que también escribí sobre eso: https://brajeshwar.com/2005/splice9-bitmap-window-resizer-co...
Otra cosa que me gustaba era usar el cicada principle para patrones de estilos de fondo que no se repetían
Aun así, sigue viéndose limpio pese a todos estos años
Me gusta que HN todavía use una de estas cosas: maquetación con tablas HTML
Viéndolo un poco más en serio, esta lista muestra muy bien que, cuando se desarrolla sin estándares, la información de control termina codificada en varios canales secundarios “más o menos tolerables”.
Este desorden y la posibilidad de conflictos hacen que uno reconsidere el desprecio que a veces recibe el proceso actual del W3C. Ese proceso combina la evolución de tecnologías web impulsada por estándares con la innovación impulsada por navegadores, dejando que ambas se turnen para ir adelante o avancen en paralelo.
Aunque se burla mucho de él, también puede interpretarse como una forma más sostenible y estable que la anterior.
Me pregunto cuántos de los que critican la nueva norma W3C-vendedores querrían volver a esos tiempos emocionantes que evocan estos “10 hacks extraños”.
Cuando lo que quieres hacer no está cubierto como funcionalidad, terminas haciéndolo de forma creativa como sea. Si los estándares no son lo bastante maduros para captar todas las necesidades potenciales, pueden crear rigidez y producir precisamente estas situaciones. Sobre todo cuando estás atado a estándares que pueden o no ajustarse a tus necesidades, como en la web.
En otros ámbitos normalmente hay suficientes opciones, y una de ellas es lo bastante flexible para hacer lo que necesitas, así que eliges esa.
Si trabajas mucho tiempo en investigación, sorprende la cantidad de veces en que lo que quieres hacer exige un enfoque técnico hacky. Porque muchos estándares y conjuntos de funcionalidades surgen alrededor de las interacciones negocio/consumidor donde está el dinero, y de los sistemas que las rodean.
Muchos actores que dependen de funciones del navegador, por ejemplo los fabricantes de TV que ejecutan apps dentro de versiones de WebKit o Chromium, están completamente callados en los comités de estándares. Así que, en la práctica, ni siquiera llega a ser un tira y afloja entre Google, Apple y Mozilla.
Al final obtienes tablas metidas dentro de divs. Solo que de 12 columnas.
Aprendí con HTML 3.2, así que sé muy bien qué clase de estupideces bizantinas hacían falta por culpa de IE y Netscape. Pero esas fueron decisiones de MS y Netscape, y aunque el W3C hubiera tenido más presencia, no había garantía ni indicio de que MS y Netscape siguieran los nuevos estándares.
Aun así, aquella época era mejor que la basura actual, donde si una gran corporación quiere algo, el resto de la web tiene que cargar con ello.
De verdad, mucho mejor, qué maravilla /s
Falta mi hack “favorito”: poner un título para accesibilidad en la posición
-10000, de modo que no se renderice en pantalla pero los lectores de pantalla sí lo lean.Cosas como
aria-labelreemplazaron algunos usos de este patrón, pero no todos.No se menciona html5 shiv, que se instalaba antes que todo el CSS para eliminar los quirks del navegador.
https://paulirish.com/2011/the-history-of-the-html5-shiv/
Recuerdo los buenos viejos tiempos del GIF transparente de 1×1 píxel que se usaba para mantener quietas las celdas de las tablas.
https://news.ycombinator.com/item?id=38485665
Ya ni recuerdo por qué lo hacíamos. ¿Era para que cargaran más rápido?
Para agregar otro de los primeros tiempos, estaba el uso generalizado de la entidad de espacio sin salto
Se usaba para empujar texto hacia la derecha o la izquierda dentro de un contenedor y, si no recuerdo mal, también como un GIF espaciador de 1x1 para hacer que las celdas de las tablas se comportaran. Algunas páginas tenían cientos de
A veces no sé si los desarrolladores web modernos se malacostumbraron porque existe CSS Grid e IE murió, o si nosotros estábamos malacostumbrados porque en ese entonces no sufríamos la complejidad de los frameworks modernos y los procesos de build.
Aunque hoy quizá sea más fácil. Técnicamente no tienes por qué usar frameworks modernos ni procesos de build, y con CSS y JavaScript modernos puedes crear fácilmente sitios y apps que antes habrían sido complejos.
La industria adoptó la costumbre de reinventar la rueda una y otra vez, pero de formas más complejas.
La hipótesis más plausible es que es un efecto secundario de que la web sea un área que eligen con más frecuencia desarrolladores nuevos o con poca experiencia.
¿El diseño responsivo realmente es un hack? Las media queries son excelentes.
Poner la lógica condicional en CSS en vez de JavaScript es una gran victoria. Especialmente si quieres renderizado del lado del servidor.
Puedes consultar varias características del agente de usuario y entregar CSS distinto según el resultado. Llamar a eso hack es ignorancia, y es una parte necesaria para crear diseño responsivo.