Clearfix: una lección sobre la evolución del desarrollo web | Programar Plus

La comunidad web ha sido, en su mayor parte, un lugar espectacularmente abierto. Como tal, muchas de las mejores técnicas de desarrollo surgen al aire libre, en blogs y foros, evolucionando a medida que se difunden y mejoran. Pensé que sería divertido (y fascinante) seguir este intercambio creativo hasta el final. Eche un vistazo a un truco popular de CSS, el clearfix, y descubra exactamente cómo surge una técnica de diseño web.

El clearfix, para aquellos que no lo saben, es un truco de CSS que resuelve un error persistente que ocurre cuando dos elementos flotantes se apilan uno al lado del otro. Cuando los elementos se alinean de esta manera, el contenedor principal termina con una altura de 0 y puede causar estragos en un diseño fácilmente. Todo lo que podría estar intentando hacer es colocar una barra lateral a la izquierda de su bloque de contenido principal, pero el resultado serían dos elementos que se superponen y colapsan entre sí. Para complicar aún más las cosas, el error es inconsistente en todos los navegadores. El clearfix se inventó para resolver todo eso.

Una ilustración temprana del problema de Position is Everything

Pero para entender el clearfix, debes remontarte aún más, al 2004 y una técnica particular llamada Holly hack.

2004: The Holly Hack y el origen de Clearfix

El truco de Holly lleva el nombre de su creadora, Holly Begevin, una desarrolladora y bloguera de CommunityMX. El truco de Holly combina dos técnicas CSS diferentes que funcionaron en los días de Netscape Navigator e Internet Explorer (IE) 4 para resolver algunos problemas de diseño. Begevin notó que si aplica una altura de solo el 1% a cada uno de los elementos flotantes en el escenario anterior, el problema se solucionaría solo (y solo porque activó un error completamente diferente) en Internet Explorer para Windows.

Desafortunadamente, el truco del 1% no funcionó en una Mac. Para eso, Begevin agregó un comentario condicional que usaba una barra invertida dentro de su CSS, que extrañamente bloqueaba las reglas de CSS individuales de IE para Mac en los viejos tiempos. El resultado fue un truco de CSS que se veía así:

/* Hides from IE5-mac */
* html .buggybox {height: 1%;}
/* End hide from IE5-mac */

Extraño, lo sé, pero solo se vuelve más complicado.

Ese mismo año, en mayo, hubo algunos navegadores más con los que lidiar, y no todos se pudieron parchear con una línea de CSS. Tony Aslett publicó un nuevo hilo en su tablero de mensajes, CSS Creator, proponiendo un nuevo enfoque. Llamó al truco una solución clara porque se centraba en eliminar los elementos flotantes para solucionar el problema.

El enfoque de Aslett aprovechó lo que eran, en ese momento, pseudo-selectores CSS muy nuevos (específicamente :after) para limpiar automáticamente dos elementos flotantes. Hubo un inconveniente bastante masivo en la primera versión de Clearfix de Aslett. Como nunca había oído hablar de Holly Hack, el código de Aslett requería un poco de JavaScript para solucionar problemas que estaban apareciendo específicamente en IE para Mac. En aquellos días, JavaScript era una tecnología relativamente no probada, y depender de ella de una manera tan fundamental era menos que ideal.

Afortunadamente, la web es un lugar de iteración, y un usuario del tablero de mensajes señaló a Aslett en la dirección del mencionado Holly Hack. Al agregar el comentario condicional de Begevin, Aslett pudo hacer que su código funcionara en casi todos los navegadores sin JavaScript.

.floatcontainer:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

/* Mark Hadley's fix for IE Mac */     
.floatcontainer {
  display: inline-block;
}

/* Hides from IE Mac */
* html .floatcontainer {height: 1%;}
.floatcontainer{display:block;}
/* End Hack */

Si desea separar una parte importante de la historia y la innovación web, la discusión que siguió a la publicación de Aslett sobre clearfix es un excelente lugar para comenzar. Una por una, la gente comenzó a experimentar con la nueva técnica, probándola en navegadores y dispositivos oscuros. Cuando terminaban, publicaban sus resultados en el hilo del mensaje, a veces junto con un ajuste útil.

Por ejemplo, el usuario zulaica señaló que en los navegadores de Mozilla, el borde inferior de los elementos flotantes tenía que estar definido explícitamente. El usuario pepejeria notó que se podía omitir el punto en el contenido, y el usuario co2 probó el clearfix en la primera versión del navegador Safari de Apple. Cada vez, Aslett actualizaba un poco su código hasta que, después de más de unas pocas iteraciones rápidas, el clearfix estaba listo y, gracias a la comunidad, bastante a prueba de balas.

2006: Clearfix recibe una actualización

Pero los navegadores siguieron avanzando. Algunas de las partes más extravagantes del código clearfix funcionaron debido a errores que estaban integrados en los navegadores más antiguos. Cuando los navegadores corrigieron esos errores, en versiones nuevas, clearfix dejó de funcionar. Cuando apareció IE 7 a finales de 2006, se necesitaron algunos ajustes en la técnica para que funcionara.

Afortunadamente, John “Big John” Gallant estaba manteniendo una página en su blog Position is Everything con una versión actualizada de clearfix. Después de recibir algunos comentarios de sus lectores, Gallant actualizó su blog para reflejar algunas nuevas correcciones para IE 7 utilizando un nuevo tipo de comentario condicional que funcionaría dentro de Internet Explorer.

<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
  }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

Y una vez más, los usuarios utilizaron sus propios navegadores para probar el código más reciente y asegurarse de que funcionaba en todas partes. Y una vez más, por un tiempo, lo hizo.

2010: Clearfix recargado

De hecho, esta iteración del clearfix duraría hasta aproximadamente 2010, cuando el equipo de Yahoo! La biblioteca de interfaz de usuario (YUI) notó algunos problemas con clearfix. El Holly Hack, por ejemplo, había desaparecido hace mucho tiempo (IE 5 no era más que una memoria de distancia), y después de cambiar el modelo de caja, los navegadores modernos manejaban los márgenes de manera un poco diferente.

Pero la gente de YUI todavía necesitaba alinear un elemento junto a otro. De hecho, la necesidad solo había aumentado a medida que los diseñadores experimentaban con diseños de cuadrícula más avanzados. En 2010, había muy pocas opciones para el diseño de la cuadrícula, por lo que clearfix tuvo que funcionar. Finalmente, se les ocurrieron algunos ajustes adicionales al conjunto de reglas CSS, sobre todo aprovechando los dos pseudo-selectores disponibles (:before y :after), para eliminar los márgenes. Publicaron su nueva versión en su propio blog y lo llamaron “clearfix recargado”.

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;        
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1 ;} /* IE < 8 */

2011: el Micro Clearfix

Pero incluso cuando se publicó en 2010, clearfix reloaded trajo consigo un equipaje innecesario de los navegadores más antiguos. El truco de altura igual a 0 ya no era realmente un requisito y, de hecho, el truco era mucho más confiable cuando display: table se utilizó en su lugar. La gente comenzó a intercambiar varias variaciones de la técnica en Twitter y blogs. Aproximadamente un año después del lanzamiento de clearfix recargado, el desarrollador Nicolas Gallagher compiló estas variaciones en una versión mucho más compacta del truco, que adecuadamente etiquetó como micro clearfix.

Después de años de ida y vuelta y pequeños ajustes, la solución clara ahora requería solo cuatro reglas CSS:

/*
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *  contenteditable attribute is included anywhere else in the document.
 *  Otherwise it causes space to appear at the top and bottom of elements
 *  that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 * `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
  zoom: 1;
}

¿El fin de Clearfix?

En estos días, casi 15 años después de que se propuso por primera vez, el clearfix está perdiendo un poco de relevancia. CSS Grid y Flexbox están llenando los vacíos para el diseño avanzado en la web. En enero de 2017, Rachel Andrew escribió un artículo para su blog titulado “¿El fin del hack de clearfix?” En él, describe una forma de reemplazar el truco clearfix con una sola línea de código utilizando una nueva regla de modo de visualización conocida como flow-root.

.container {
  display: flow-root;
}

Nos acercamos al día en que clearfix ya no será necesario.

Incluso sin flow-root, hay muchas formas de hacer una cuadrícula en estos días. Si recién comenzara en la web, habría pocas razones para aprender al respecto. ¡Eso es bueno! Desde el principio, siempre se pensó como una solución para aprovechar al máximo lo que estaba disponible. La ironía es que sin la dedicación y la experimentación de los desarrolladores que piratearon el clearfix durante tantos años, hoy no tendríamos las herramientas para no tener que volver a depender de él.

¿Disfrutas aprendiendo sobre el historial web con historias como esta? Jay Hoffmann tiene un boletín semanal llamado La Historia de la Web al que puede suscribirse aquí.

(Visited 69 times, 1 visits today)