Una mirada retrospectiva a la historia de CSS | Programar Plus

Cuando piensa en HTML y CSS, probablemente los imagina como un paquete. Pero durante años después de que Tim Berners-Lee creara la World Wide Web en 1989, no existía CSS. El plan original para la web no ofrecía ninguna forma de diseñar un sitio web en absoluto.

Hay una publicación ahora infame enterrada en los archivos de la lista de correo de la WWW. Fue escrito por Marc Andreessen en 1994, quien luego co-creó los navegadores Mosaic y Netscape. En la publicación, Andreessen comentó que debido a que no había forma de diseñar un sitio web con HTML, lo único que podía decirle a los desarrolladores web cuando se le preguntaba sobre el diseño visual era “sOry estás jodido.

Diez años después, CSS iba camino de la adopción total por parte de una comunidad web recientemente entusiasmada. * ¿Qué pasó en el camino? *

Encontrar un lenguaje de peinado

Había muchas ideas sobre cómo se podría diseñar teóricamente la web. Sin embargo, no era una prioridad para Berners-Lee porque sus empleadores en el CERN estaban interesados ​​principalmente en la web como directorio digital de empleados. En cambio, obtuvimos algunos idiomas competitivos para el diseño de páginas web de desarrolladores de toda la comunidad, sobre todo de Pei-Yaun Wei, Andreesen y Håkon Wium Lie.

Tomemos como ejemplo a Pei-Yuan Wei, quien creó el navegador gráfico ViolaWWW en 1991. Incorporó su propio lenguaje de hojas de estilo directamente en su navegador, con el objetivo final de convertir este idioma en un estándar oficial para la web. Nunca llegó allí, pero proporcionó una inspiración muy necesaria para otras especificaciones potenciales.

ViolaWWW tras su lanzamiento

Mientras tanto, Andreessen había adoptado un enfoque diferente en su propio navegador, Netscape Navigator. En lugar de crear un lenguaje desacoplado dedicado al estilo de un sitio web, simplemente extendió HTML para incluir etiquetas HTML de presentación y no estandarizadas que podrían usarse para diseñar páginas web. Desafortunadamente, no pasó mucho tiempo antes de que las páginas web perdieran todo su valor semántico y se vieran así:

<MULTICOL COLS="3" GUTTER="25">
  <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P>
</MULTICOL>

Los programadores se dieron cuenta rápidamente de que este tipo de enfoque no duraría mucho. Hubo muchas ideas de alternativas. Como RRP, un lenguaje de hojas de estilo que favorecía la abreviatura y la brevedad, o PSL96, un lenguaje que permitía funciones y declaraciones condicionales. Si está interesado en cómo se veían estos lenguajes, Zach Bloom escribió una excelente inmersión profunda en varias propuestas competitivas.

Pero la idea que llamó la atención de todos fue propuesta por primera vez por Håkon Wium Lie en octubre de 1994. Se llamó Hojas de estilo en cascada, o simplemente CSS.

Por qué usamos CSS

CSS se destacó porque era simple, especialmente en comparación con algunos de sus primeros competidores.

window.margin.left = 2cm
font.family = times
h1.font.size = 24pt 30%

CSS es un lenguaje de programación declarativo. Cuando escribimos CSS, no le decimos al navegador exactamente cómo representar una página. En su lugar, describimos las reglas para nuestro documento HTML una por una y dejamos que los navegadores manejen la representación. Tenga en cuenta que la web fue construida principalmente por programadores aficionados y aficionados ambiciosos. CSS siguió un formato predecible y quizás lo más importante, tolerante y casi cualquier persona podía aprenderlo. Esa es una característica, no un error.

Sin embargo, CSS fue único de una manera singular. Permitió que los estilos cayeran en cascada. Está ahí en el nombre. Hojas de estilo en cascada. La cascada significa que los estilos pueden heredar y sobrescribir otros estilos que se habían declarado previamente, siguiendo una jerarquía bastante complicada conocida como especificidad. Sin embargo, el gran avance fue que permitió varias hojas de estilo en la misma página.

¿Ves ese valor porcentual arriba? En realidad, eso es algo bastante importante. Lie creía que tanto los usuarios como los diseñadores definirían estilos en hojas de estilo independientes. El navegador, entonces, podría actuar como una especie de mediador entre los dos y negociar las diferencias para representar una página. Ese porcentaje representa cuánta propiedad está tomando esta hoja de estilo para una propiedad. Cuanto menor sea la propiedad, más probable será que los usuarios la sobrescriban. Cuando Lie hizo una demostración de CSS por primera vez, incluso mostró un control deslizante que le permitía alternar entre los estilos definidos por el usuario y los definidos por el desarrollador en el navegador.

En realidad, este fue un gran debate en los primeros días de CSS. Algunos creían que los desarrolladores deberían tener un control total. Otros que el usuario debe tener en control. Al final, los porcentajes se eliminaron en favor de reglas más claramente definidas sobre qué definiciones CSS sobrescribirían otras. De todos modos, por eso tenemos especificidad.

Poco después de que Lie publicara su propuesta original, encontró un socio en Bert Bos. Bos había creado el navegador Argo y, en el proceso, su propio lenguaje de hoja de estilo, cuyas piezas finalmente se abrieron paso en CSS. Los dos comenzaron a elaborar una especificación más detallada, y finalmente acudieron al grupo de trabajo HTML recién creado en el W3C en busca de ayuda.

Tomó algunos años, pero a fines de 1996, el ejemplo anterior había cambiado.

html {
  margin-left: 2cm;
  font-family: "Times", serif;
}

h1 {
  font-size: 24px;
}

CSS había llegado.

El problema con los navegadores

Si bien CSS todavía era solo un borrador, Netscape había seguido adelante con elementos HTML de presentación como multicol, layer, y el temido blink etiqueta. Internet Explorer, por otro lado, había comenzado a incorporar algo de CSS poco a poco. Pero su apoyo fue irregular y, a veces, incorrecto. Lo que significa que en los primeros años, después de cinco años de CSS como recomendación oficial, todavía no había navegadores con soporte completo de CSS.

Eso vino de un lugar extraño.

Cuando Tantek Çelik se unió a Internet Explorer para Macintosh en 1997, su equipo era bastante pequeño. Un año después, se convirtió en el desarrollador principal del motor de renderizado al mismo tiempo que su equipo se redujo a la mitad. La mayor parte de la atención de Microsoft (por razones obvias) estaba en la versión de Windows de Internet Explorer, y el equipo de Macintosh se dejó en su mayor parte a sus propios dispositivos. Entonces, comenzando con el desarrollo de la versión 5 en 2000, Çelik y su equipo decidieron enfocarse donde nadie más estaba, el soporte de CSS.

Al equipo le tomaría dos años terminar la versión 5. Durante este tiempo, Çelik habló frecuentemente con miembros del W3C y diseñadores web usando su navegador. A medida que cada pieza se colocó en su lugar, el equipo de IE para Mac verificó en todos los frentes que estaban haciendo las cosas bien. Finalmente, en marzo de 2002, enviaron Internet Explorer 5 para Macintosh. El primer navegador con soporte completo de CSS Nivel 1.

Cambio de Doctype

Pero recuerde, la versión de Windows de Internet Explorer había agregado CSS a su navegador con más de unos pocos errores y un modelo de caja retorcido, que describe la forma en que los elementos se calculan y luego se renderizan. Internet Explorer incluía atributos como borde y relleno dentro del ancho y alto total de un elemento. Pero IE5 para Mac y la especificación oficial de CSS exigían que estos valores se agregaran al ancho y al alto. Si alguna vez jugaste con box-sizing sabes exactamente la diferencia.

Çelik sabía que para que CSS funcionara, estas diferencias tendrían que reconciliarse. Su solución llegó después de una conversación con el defensor de los estándares Todd Fahrner. Se llama cambio de tipo de documento y funciona así.

Todos conocemos los tipos de documentos. Se encuentran en la parte superior de nuestros documentos HTML.

<!DOCTYPE html>

Pero en los viejos tiempos, se veían así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

Ese es un ejemplo de un tipo de documento compatible con los estándares. El //W3C//DTD HTML 4.0//EN es la parte crucial. Cuando un diseñador web agregó esto a su página, el navegador sabría que debe representar la página en “modo estándar” y CSS coincidiría con la especificación. Si faltaba el tipo de documento, o si se usaba uno desactualizado, el navegador cambiaba al “modo peculiaridades” y mostraba las cosas de acuerdo con el modelo de caja anterior y con los errores antiguos intactos. Algunos diseñadores incluso optaron intencionalmente por poner su sitio en modo peculiar para recuperar el modelo de caja anterior (e incorrecto).

Eric Meyer, a veces conocido como el padrino de CSS, ha dejado constancia y dijo que el cambio de tipo de documento salvó CSS. Probablemente tenga razón. Todavía estaríamos usando navegadores repletos de viejos errores de CSS si no fuera por ese simple truco.

El truco del modelo de caja

Había una última cosa que averiguar. El cambio de Doctype funcionó bien en los navegadores modernos en sitios web más antiguos, pero el modelo de caja aún no era confiable en los navegadores más antiguos (particularmente Internet Explorer) para los sitios web más nuevos. Ingrese al Box Model Hack, un ingenioso truco de Çelik que aprovechó un atributo CSS poco utilizado llamado voice-family para engañar a los navegadores y permitir múltiples anchos y alturas en la misma clase. Çelik indicó a los autores que pusieran primero el ancho del modelo de caja anterior y luego cerraran la etiqueta en un pequeño truco con voice-family, seguido de su nuevo ancho de modelo de caja. Algo así:

div.content { 
  width: 400px; 
  voice-family: ""}""; 
  voice-family: inherit;
  width: 300px;
}

La familia de voces no se reconocía en los navegadores más antiguos, pero aceptaba una cadena como definición. Entonces, agregando un extra } los navegadores más antiguos simplemente cerrarían la regla CSS antes de llegar a ese segundo ancho. Fue simple y efectivo y permitió que muchos diseñadores comenzaran a experimentar con nuevos estándares rápidamente.

Los pioneros del diseño basado en estándares

Internet Explorer 6 fue lanzado en 2001. Eventualmente se convertiría en una espina importante en el costado de los desarrolladores web en todas partes, pero en realidad se envió con un soporte de estándares y CSS bastante impresionante. Por no hablar de su cuota de mercado que ronda el 80%.

El escenario estaba listo, las piezas estaban en su lugar. CSS estaba listo para la producción. Ahora la gente solo necesitaba usarlo.

En los 10 años que la web se precipitó hacia la ubicuidad sin un lenguaje de estilo coherente o estándar, no es como si los diseñadores simplemente hubieran dejado de diseñar. Para nada. En su lugar, se basaron en una acumulación de hacks del navegador, diseños basados ​​en tablas y archivos Flash incrustados para agregar algo de estilo cuando HTML no podía. El diseño basado en CSS y compatible con los estándares era un territorio nuevo. Lo que necesitaba la web eran algunos pioneros para abrir un camino a seguir.

Lo que obtuvieron fueron dos rediseños importantes con solo unos meses de diferencia. El primero de Wired seguido poco después por ESPN.

Douglas Bowman estuvo a cargo del equipo de diseño web de la revista Wired. En 2002, Bowman y su equipo miraron a su alrededor y vieron que ningún sitio importante usaba CSS en sus diseños. Bowman sintió casi una obligación para con una comunidad web que buscaba en Wired ejemplos de mejores prácticas para rediseñar su sitio utilizando lo último en HTML y CSS compatible con los estándares. Empujó a su equipo a derribar todo y rediseñarlo desde cero. En septiembre de 2002, lo lograron y lanzaron su rediseño. El sitio incluso se validó.

ESPN lanzó su sitio solo unos meses después, utilizando muchas de las mismas técnicas en una escala aún mayor. Estos sitios hicieron una gran apuesta por CSS, una tecnología que algunos pensaron que ni siquiera duraría. Pero valió la pena de una manera importante. Si aparta a alguno de los desarrolladores que trabajaron en estos rediseños, le darán una larga lista de beneficios importantes. Más rendimiento, cambios de diseño más rápidos, más fácil de compartir y, sobre todo, bueno para la web. Wired incluso hizo cambios de color diarios al principio.

Examine el código de estos rediseños y seguramente encontrará algunos trucos. La web todavía vivía solo en unos pocos tamaños de monitor diferentes, por lo que puede notar que ambos sitios usaban una combinación de columnas de ancho fijo y posicionamiento relativo y absoluto para colocar una cuadrícula en su lugar. Se utilizaron imágenes en lugar de texto. Pero estos sitios sentaron las bases para lo que vendría después.

CSS Zen Garden y la web semántica

Al año siguiente, en 2003, Jeffrey Zeldman publicó su libro Designing with Web Standards, que se convirtió en una especie de manual para diseñadores web que buscan cambiar al diseño basado en estándares. Fue el inicio de un legado de técnicas y trucos de CSS que ayudaron a los diseñadores web a imaginar lo que CSS podía hacer. Un año después, Dave Shea lanzó CSS ​​Zen Garden, que alentó a los diseñadores a tomar una página HTML básica y diseñarla de manera diferente usando solo CSS. El sitio se convirtió en un escaparate de los últimos consejos y trucos, y contribuyó en gran medida a convencer a la gente de que era hora de establecer estándares.

De forma lenta pero segura, el impulso se fue construyendo. CSS avanzado y agregado nuevos atributos. Los navegadores realmente se apresuraron a implementar los últimos estándares, y los diseñadores y desarrolladores agregaron nuevos trucos a su repertorio. Y finalmente, CSS se convirtió en la norma. Como si hubiera estado ahí todo el tiempo.

¿Disfrutas aprendiendo sobre la historia web? Jay Hoffmann tiene un boletín semanal llamado La Historia de la Web al que puede suscribirse aquí.