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

La comunidad web ha sido, en su mayor parte, un lugar espectacularmente abierto. Como tal, muchas de las mejores técnicas de desarrollo ocurren abiertamente, en blogs y foros, y evolucionan a medida que se difunden y mejoran. Pensé que podría ser 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.

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 fácilmente en un diseño. Todo lo que podrías intentar hacer es colocar una barra lateral a la izquierda de tu 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 solucionar todo eso.

Pero para entender el clearfix, hay que retroceder aún más, en el año 2004 ya una técnica particular llamada Holly hack.

2004: El hack de Holly y el origen de Clearfix

El truco de Holly lleva el nombre de su creadora, Holly Begevin, desarrolladora y bloggera de CommunityMX. El truco de Holly combina dos técnicas CSS diferentes que funcionaron en la época de Netscape Navigator e Internet Explorer (IE) 4 para resolver algunos problemas de diseño. Comencé notando que si aplica una altura de solo 1% a cada uno de los elementos flotantes en el escenario anterior, el problema en realidad 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, curiosamente, bloqueaba reglas CSS individuales de IE para Mac en los viejos tiempos. El resultado fue un truco de CSS parecido a este:

y :after), para despejar los márgenes. Publicaron su nueva versión en su propio blog y la llamaron “clearfix reloaded”.

,.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 algunas cargas innecesarias de 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: tablese usaba en su lugar. La gente empezó a intercambiar diversas variaciones de la técnica en Twitter y blogs. Aproximadamente un año después del lanzamiento de clearfix reloaded, el desarrollador Nicolas Gallagher compiló estas variaciones en una versión mucho más compacta del truco, que denominó apropiadamente micro clearfix.

Después de años de idas y vueltas y ligeros ajustes, la solución clara ahora requeriría solo cuatro reglas CSS:

` 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?

Hoy en día, casi 15 años después de su primera propuesta, 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 truco clearfix?” En él, describe una manera de reemplazar el truco clearfix con una sola línea de código usando 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 en absoluto.

Incluso sin flow-root, hay muchas maneras de hacer una cuadrícula hoy en día. Si recién estuviera comenzando en la web, habría pocas razones para siquiera aprender sobre ella. ¡Eso es bueno! Desde el principio siempre fue concebido como una solución alternativa 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 perfeccionaron el clearfix durante tantos años, hoy no tendríamos las herramientas para no tener que volver a depender de él nunca más.

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