Me interesé en el diseño y desarrollo web a finales de los 90. Maldita sea, hace cuánto tiempo. Y qué terrible fue. Quiero decir, crear un sitio web y publicarlo fue un negocio complicado, y los clientes podían contarse con los dedos.

Me pareció que la mayoría de los desarrolladores recuerdan esos días, o al menos la próxima década, pero no. Recientemente me encontré con un tweet , cuyo autor se sorprendió de la técnica de configurar esquinas redondeadas antes de aparecer border-radius(haga una imagen separada para cada esquina redondeada y colóquela con precisión). Todavía recuerdo cómo esperamos con la respiración contenida cuando se border-radiusconvirtió en el estándar y se eliminó el prefijo en los navegadores.

Por otro lado, muchos solo han intentado ligeramente el diseño web en los viejos tiempos y creen que nada ha cambiado desde entonces.

Este artículo es para todos. La historia del CSS y el diseño web, tal como lo recuerdo.

(Tenga en cuenta que los recuerdos y la investigación están estrechamente entrelazados en este artículo. Por lo tanto, no puedo garantizar que todo esté realmente establecido correctamente, especialmente en relación con la causalidad. Puede leer el historial oficial de CSS del W3C , que es mucho más corto y mejor coincide realidad y contiene significativamente menos maldiciones).

(Además, el artículo se beneficiaría enormemente de más ilustraciones, pero solo escribir el texto me llevó demasiado tiempo).

Primeros dias

No había CSS al principio.

Fue muy malo.

Mi artefacto favorito de la época es el libro de O'Reilly, que estudié HTML: la guía definitiva . Varias ediciones de esta guía se publicaron a mediados y finales de los 90. El libro realmente solo habla sobre HTML, sin ninguna mención de CSS. Ya no lo tengo y no puedo encontrar escaneos en Internet, pero hay una página de la última edición de este libro HTML & XHTML: The Definitive Guide (hablaremos sobre XHTML más adelante). Estos son algunos consejos para el diseño web de vanguardia de los 90:

"Resalte claramente el encabezado y el pie de página con líneas horizontales".

No, eso no es todoborder-top. Eso<hr>. El título de la página está casi seguramente centrado en<center>.

La página tiene un fondo estándar, fuente y color de texto. En parte porque esta guía presenta primero los conceptos iniciales; en parte porque es un libro en blanco y negro, y en parte porque reflejaba la realidad: colorear algo en una página era una gran hemorroide.

Digamos que quieres hacer que todos los encabezados sean rojos. Para hacer esto, coloque las siguientes etiquetas:

<H1><FONT COLOR=red>...</FONT></H1>

... para cada titular . ¡Espero que nunca decidas cambiar a azul!

Ah, y las etiquetas HTML fueron escritas a medida en mayúsculas. No recuerdo por qué todos decidimos que era una buena idea. Quizás esto fue antes de que apareciera el resaltado de sintaxis en los editores de texto (tenía 12 años y usaba el Bloc de notas), y las etiquetas de encabezado son más fáciles de distinguir del texto principal.

Por lo tanto, mantener el sitio fue una verdadera pesadilla. Muchos decidieron que era más fácil no usar ningún diseño, solo la configuración predeterminada. En cierto sentido, incluso fue agradable: los navegadores le permiten cambiar estos valores predeterminados, para que pueda leer el texto en Internet en la forma que desee.

Recuerdo cómo apareció una solución alternativa interesante en muchos sitios de Geocities: un aspecto completamente nuevo para cada nueva página web. Maldita sea, ¿verdad? Simplemente haz lo que quieras en cada página nueva.

Quizás este fue el pináculo del diseño web.

Demonios, extraño esos días. Web completamente abierta, sin twitter, sin facebook. Si tiene algo que decir, debe crear su propio sitio web. Eso fue asombroso. Nadie sabía lo que estaba haciendo; Apuesto a que la gran mayoría de los diseñadores web en ese momento eran adolescentes aficionados ignorantes (como yo) que copiaban páginas de otros adolescentes aficionados ignorantes. La mitad de Internet era portales creados por fanáticos sobre animorfos, con pantallas de advertencia inexplicables de que el sitio funciona mejor con una resolución de pantalla de 640x480 (presumiblemente cada niño de 12 años con una resolución de pantalla insuficiente debería comprar un monitor nuevo). Todos los chicos geniales usan Internet Explorer 3, el navegador más avanzado. Sin embargo, algunos perdedores todavía están sentados en Netscape Navigator, por lo que en la página principal debe colocar el GIF animado "Best in IE".

También fue la era de los "colores seguros para Internet": una paleta de 216 colores, donde cada canal equivalía a00, 33, 66, 99, ccO ff, debido a que algunos todavía permanecía 256 de color del monitor! Hoy no lo pensamos, damos por sentado el color de 24 bits.

De hecho, gran parte de lo que ahora damos por sentado era incomprensible y difícil. ¿Quieres la misma navegación en cada página del sitio? De acuerdo, no hay problema: copie / pegue el código de navegación en cada página. Si actualiza este código, asegúrese de actualizar cada página, pero lo más probable es que se olvide de hacer esto en algunas páginas, y el sitio se verá como un sitio arqueológico, con varias capas de páginas de diferentes "eras".

Es mucho más fácil usar marcos.cuando la ventana del navegador se divide en una cuadrícula y se carga una página separada en cada celda ... pero luego las personas se confunden si acceden a una página separada sin marcos, como suele ser el caso cuando provienen de un motor de búsqueda como AltaVista (no puedo creer que Explico los marcos, pero nadie los usó realmente desde 2001 ... ¿sabes qué son los iframes? Aquí la letra 'i' significa en línea , es decir, marcos incorporados para distinguirlos de los marcos normales en toda la pantalla).

PHP ni siquiera ha recibido ese nombre todavía, y nadie ha oído hablar de él. Esta extraña combinación de Perl y CGI fue realmente difícil de entender, y no funcionó en su propia computadora, los errores fueron difíciles de encontrar y diagnosticar, y Geocities no lo soportó de todos modos. Si eres un desarrollador realmente afortunado y avanzado, entonces tu host trabajó en el servidor web Apache, y luego puedes usar su lenguaje dinámico incorporado de Ensamblaje El lado del servidor incluye y escribir algo como esto:

<BODY>
    <TABLE WIDTH=100% BORDER=0 CELLSPACING=8 CELLPADDING=0>
        <TR>
            <TD COLSPAN=2>
                <!--#include virtual="/header.html" --> 
            </TD>
        </TR>
        <TR>
            <TD WIDTH=20%>
                <!--#include virtual="/navigation.html" --> 
            </TD>
            <TD>
                (actual page content goes here)
            </TD>
        </TR>
    </TABLE>
</BODY>

Está bien. Apache verá comentarios especiales e insertará el contenido de los archivos referenciados. La desventaja es que no pudo verificar nada en su computadora, faltaba toda la navegación, porque aquí su navegador web interpretó estas instrucciones como comentarios HTML normales. Por supuesto, instalar Apache en casa era imposible, porque tienes una computadora , no un servidor .

Desafortunadamente, todos los sitios antiguos han desaparecido durante mucho tiempo y quedan cubiertos por las cenizas de la historia, en las que todo lo que no se ha hecho esta semana ya está desactualizado y olvidado hace mucho tiempo. Se suponía que la web haría que la información fuera eterna, pero en su lugar, gran parte de ella se volvió efímera. Echo de menos esos momentos en que casi todos mis amigos tenían sus propios sitios. Tu Twitter e Instagram como presencia en línea es un pobre sustituto.

... Entonces, echemos un vistazo al sitio web de Space Jam.

Ejemplo: Space Jam

Si no lo sabes, Space Jam es la mejor película de todos los tiempos. Él habla sobre la carrera de baloncesto extremadamente corta del conejo Bugs Bunny, quien, junto con el vivo Michael Jordan, salva al planeta de algún tipo de amenaza de extraterrestres. Luego vino una serie de secuelas muy exitosas y extremadamente divertidas de esta película.

¡Y tenemos mucha suerte de que 24 años después de su lanzamiento, el sitio web de Space Jam todavía funciona ! Aquí y ahora tenemos la oportunidad de estudiar el mejor logro de diseño web del modelo de 1996.

Primero, tenga en cuenta que cada página del sitio es estática. Y esta es una página estática con una extensión .htm, no.htmlporque antes de Windows 95 todavía estábamos vinculados a los nombres de archivo 8.3 (ocho caracteres para el nombre, tres caracteres para la extensión). No sé por qué esto importó en la URL, porque nadie estaba ejecutando Windows 3.11 en un servidor web, pero está bien.

Aquí está el CSS para la página principal:

<body bgcolor="#000000" background="img/bg_stars.gif" text="#ff0000" link="#ff4c4c" vlink="#ff4c4c" alink="#ff4c4c">

Jaja, solo estoy bromeando! ¿Qué demonios de CSS? "Cosmic jam" se lanzó un mes antes de la publicación de este estándar (de hecho, hay una línea en el código fuente de la página, pero estoy seguro de que se agregó mucho más tarde para estilizar algunos enlaces a las reglas que debían insertarse porque obligaciones legales).

Presta atención a la ubicación extremadamente precisa de los hipervínculos para la navegación. Esta hazaña se logró de la misma manera que todos en 1996: usando tablas.

De hecho, las tablas tienen una ventaja funcional sobre CSS en el diseño, lo cual era muy importante en esos días, porque con Ctrl presionado podía seleccionar una celdamesas o incluso algunas. Un peculiar "retro-depurador" muestra cómo se ubican las celdas en el diseño. Fue genial porque el primer depurador Firebug normal salió solo en 2006, ¡toda una década después!

El marcado de esta tabla por algún motivo desconocido se llena con líneas en blanco, pero si las elimina, se ve así:

<table width=500 border=0>
<TR>
<TD colspan=5 align=right valign=top>
</td></tr>
<tr>
<td colspan=2 align=right valign=middle>
<br>
<br>
<br>
<a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height=56 width=131 alt="Press Box Shuttle" border=0></a>
</td>
<td align=center valign=middle>
<a href="cmp/jamcentral/jamcentralframes.html"><img src="img/p-jamcentral.gif" height=67 width=55 alt="Jam Central" border=0></a>
</td>
<td align=center valign=top>
<a href="cmp/bball/bballframes.html"><img src="img/p-bball.gif" height=62 width=62 alt="Planet B-Ball" border=0></a>
</td>
<td align=center valign=bottom>
<br>
<br>
<a href="cmp/tunes/tunesframes.html"><img src="img/p-lunartunes.gif" height=77 width=95 alt="Lunar Tunes" border=0></a>
</td>
</tr>
<tr>
<td align=middle valign=top>
<br>
<br>
<a href="cmp/lineup/lineupframes.html"><img src="img/p-lineup.gif" height=52 width=63 alt="The Lineup" border=0></a>
</td>
<td colspan=3 rowspan=2 align=right valign=middle>
<img src="img/p-jamlogo.gif" height=165 width=272 alt="Space Jam" border=0>
</td>
<td align=right valign=bottom>
<a href="cmp/jump/jumpframes.html"><img src="img/p-jump.gif" height=52 width=58 alt="Jump Station" border=0></a>
</td>
</tr>
...
</table>

Estas son las dos primeras líneas, incluido el logotipo. Tienes la idea. Todo se coloca dentro de las celdas con aligny valign; a menudo se aplica rowspany colspanhay poco <br>para ajustar el posicionamiento vertical en una línea, cuando sea necesario.

Se pueden encontrar otros artefactos fantásticos en la página, ¡incluido un encabezado que contiene la sintaxis de Apache SSI! Debe haberse roto silenciosamente para todos cuando el sitio se mudó al alojamiento durante muchos años de su vida. Ahora está alojado en Amazon S3. Bueno, sabes Amazon? Tienda de libros?

<table border=0 cellpadding=0 cellspacing=0 width=488 height=60>
<tr>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234&page.allowcompete=no"--></td>
<td align="center" width="20"></td>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234"--></td>
</tr>
</table>

Bien, mira la página de Jam Central . Para mayor autenticidad, reduje la resolución en el navegador a 640 × 480 (aunque para una inmersión completa, debería haber reservado un poco más de espacio vertical para la barra de título, la barra de tareas y cinco a seis barras de herramientas de IE).

Preste atención a los marcos: el logotipo en la esquina superior izquierda conduce de nuevo a la página de destino, guardando correctamente un lugar en la pantalla para no repetir toda esta navegación, y en la esquina superior derecha hay un jodido banner publicitario que fue bloqueado de siete maneras diferentes. Las tres partes son páginas separadas.

También tenga en cuenta el texto rojo completamente ilegible sobre un fondo texturizado, uno de los signos más seguros del diseño web de los 90. Puede preguntar, ¿por qué no usar un fondo normal para el texto? Eres un idiota. ¿Cómo hacerlo? Después de todo, el atributo backgroundes solo con <body>! Puede poner una tabla, pero las tablas solo admiten un fondo sólido, ¡se verá aburrido!

Pero espera, ¿qué es este nuevo widget de navegación? ¿Cómo lograste colgar todos los enlaces? Otra mesa? Bueno, no, aunque a menudo los diseñadores llenaron la mesa con piezas de una imagen en rodajas. Pero aquí tenemos imagemap , una función HTML olvidada hace mucho tiempo. Solo muestra la fuente:

<img src="img/m-central.jpg" height=301 width=438 border=0 alt="navigation map" usemap="#map"><br>

<map name="map">
<area shape="rect" coords="33,92,178,136" href="prodnotesframes.html" target="_top">
<area shape="rect" coords="244,111,416,152" href="photosframes.html" target="_top">
<area shape="rect" coords="104,138,229,181" href="filmmakersframes.html" target="_top">
<area shape="rect" coords="230,155,334,197" href="trailerframes.html" target="_top">
</map>

Creo que todo está más o menos claro aquí. El atributo usemapadjunta un mapa de imagen, que se define como un conjunto de áreas en las que se puede hacer clic, bellamente codificadas por algunas coordenadas.

¡Y todavía funciona! En HTML! ¡Puedes usarlo ahora mismo! Aunque, probablemente no.

Cuadrícula de miniaturas

Considere otra página al azar. Por ejemplo, "Foto de la película". (¿Espera, foto ? En ese momento, ¿no conocía las palabras "marco" y "captura de pantalla"? Bueno, está bien ...)

Otro conjunto de marcos, pero de forma diferente.

<body bgcolor="#7714bf" background="img/bg-jamcentral.gif" text="#ffffff" link="#edb2fc" vlink="#edb2fc" alink="#edb2fc">

Aquí, los desarrolladores hicieron algo importante: indicaron no solo la imagen de fondo (opaca), sino también el color de fondo. De lo contrario, el texto blanco saldría sobre un fondo blanco si la imagen de fondo no se cargara.

(Otra diferencia interesante del desarrollo moderno. Hoy en día, muchos diseñadores suponen que se descargarán todos los recursos y, a veces, presentan la descarga como un inconveniente que debe evitarse. Pero de todos modos, están sentados en una conexión de fibra óptica desde San Francisco a diez metros del principal canal).

Pero volvamos a la página en sí. Las cuadrículas en miniatura eran un problema clásico de diseño web de la época. El principal problema es que desea colocar imágenes una al lado de la otra.y HTML, de forma predeterminada, los apila en una columna grande. En ese momento, el diseñador solo tenía una herramienta: una mesa. En nuestro sitio, está estructurado de la siguiente manera:

<table cellpadding=10>
<tr><td align=center><a href="..."><img src="..."></a></td>...</tr>
<tr>...</tr>
<tr>...</tr>
<table>

Una cuadrícula de miniaturas de 3 × 3 formateada a discreción del navegador (la última imagen en una línea separada no es realmente parte de la tabla). El número de columnas no depende del ancho de la pantalla, pero en aquellos días todos tenían pantallas pequeñas, por lo que esto no molestó demasiado al diseñador. Aquí las imágenes no tienen subtítulos, pero dado que cada una de ellas se coloca en una celda separada, se pueden agregar fácilmente.

Este fue el enfoque de visualización de miniaturas más avanzado en 1996. Volveremos a este pequeño rompecabezas de la interfaz de usuario unas pocas veces más; Puede ver ejemplos reales (y código fuente con marcado de muestra) en una página separada .

Echemos un vistazo al tamaño de los cuadros de "tamaño completo, a todo color y con calidad de Internet" de la película por interés.

¡Hola, sí, son menos de 16 KB! ¡Esta imagen se cargará más rápido que en nueve segundos!

(Recuerdo el problema con el video incrustado, no se pudo resolver hasta que apareció la etiqueta HTML5 <video>unos años más tarde. Hasta entonces, tuve que usar algunos complementos patentados, y todos fueron terribles).

(Sí, por cierto: se agregó un marco de color a las imágenes dentro de los enlaces de forma predeterminada. Aquí, la presencia del enlace es obvia, por lo que el marco se ve redundante y molesto. Antes de CSS, deben desactivarse para cada imagen individual usando el atributo <img border=0>).

El diseño habitual de aquellos tiempos.

Ahí es donde comenzamos, y apestaba. Si quería un estilo común en más de unas pocas páginas, sus posibilidades eran muy limitadas y copiar y pegar seguía siendo la única herramienta. El sitio web de Space Jam decidió no preocuparse por la coherencia del diseño, como tantos otros.

Luego vino CSS. Fue un verdadero milagro . Todos estos códigos se repiten en cada página han desaparecido. ¿Quieres hacer todos los titulares de nivel superior de un color en particular? No hay problema:

H1 {
    color: #FF0000;
}

Bam! Y es todo. No importa cuántos encabezados haya <h1>en su documento, cada uno de ellos tendrá un color rojo intenso y nunca más tendrá que pensar en ello. Aún mejor: ¡puede poner este fragmento en su propio archivo y aplicar esta dudosa elección estética a cada página de su sitio sin casi ningún esfuerzo! Lo mismo se aplica a su magnífico fondo de mosaico, color de enlace y tamaño de fuente en las tablas.

(Solo recuerde incluir el contenido de las etiquetas <style>en comentarios HTML, de lo contrario, los navegadores más antiguos sin soporte CSS los mostrarán como texto).

No es necesario aplicar etiquetas a todo en una fila. CSS introdujo los conceptos de "clases" e "ID", por lo que el estilo solo se extiende a elementos especialmente marcados. Selector de tipoP.importantse aplica solo a los párrafos de la clase <P CLASS="important">, pero #headersolo afecta <H1 ID="header">(la diferencia es que los identificadores deben ser únicos en el documento y las clases se pueden usar cualquier número de veces). Con estas herramientas, puede crear sus propias etiquetas de manera efectiva, ¡obteniendo una versión individual de HTML única para su sitio!

Fue un gran avance, pero en ese momento nadie (probablemente) pensó en usar CSS para el diseño. Cuando se publicó la recomendación CSS 1 en diciembre del 96 , apenas tocó el diseño, solo separó las funciones HTML existentes de las etiquetas a las que están adjuntas. Tuvimos colores de fuente y fondo gracias a <FONT COLOR>y<BODY BACKGROUND>. Lo único que al menos afectó remotamente la ubicación de los objetos en la página fue la propiedad floatequivalente <IMG ALIGN>, que empujó la imagen hacia un lado e incluyó el flujo de texto a su alrededor, como en un periódico. No es tan impresionante

Pero esto no es sorprendente. No había herramientas de diseño reales en HTML, excepto tablas, y las propiedades de la tabla son demasiado difíciles de generalizar en CSS o relacionarse con la estructura de la etiqueta, por lo que no había nada que agregar a CSS 1. Simplemente automatizamos un poco, por ejemplo, el uso de etiquetas <FONT>, por lo que el diseño web se volvió menos tedioso y menos propenso a errores, el código de página se volvió más limpio y mucho más fácil de mantener. Un buen paso adelante, y todos felizmente lo aceptaron, pero las tablas siguieron siendo la herramienta principal para el diseño.

Sin embargo, eso fue normal. En general, su blog solo necesita un titular y una barra lateral. Las tablas funcionan bien con esto, y esta estructura básica es adecuada para la mayoría de las situaciones. No es tan difícil copiar / pegar algunas líneas <TABLE BORDER=0>y <TD WIDTH=20%>.

Durante varios años, este fue el estándar. Tablas para maquetación, CSS para ... bueno, para estilo. Colores, tamaños, negrita, subrayado. Incluso hubo un truco tan estúpido cuando se enfatizó un enlace solo cuando el cursor del mouse estaba sobre él. ¡La belleza!

(Dato curioso: el código HTML para la mayoría de los servicios de correo electrónico aún no proviene de esa época).

(Y luego llegué a la industria, a la edad madura de 11 años, sin tener idea de lo que estaba haciendo, y básicamente estudié con otros niños de 11 años que tampoco tenían idea de lo que estaban haciendo. Los niños de 11 años crearon una gran parte de la Red. niños haciendo sus propios sitios web, y eso fue genial, ¿por qué ir a un sitio comercial si puedes conocer un pasatiempo muy específico de algún chico o chica de todo el planeta?)

Tiempos oscuros

Un año y medio después, a mediados de 1998, nos presentaron CSS 2 (por cierto, me encanta el fondo de esa página). Esta fue una actualización modesta, que eliminó algunas deficiencias en varias áreas, pero lo más interesante fue la adición de un par de primitivas de posicionamiento: la propiedad positionle permitía colocar el elemento en coordenadas exactas, y el modo de visualización inline-blockle permitía organizar bloques en una fila uno tras otro.

¡Una fruta tan tentadora, pero inaccesible! El uso positionparecía normal, pero el posicionamiento exacto en píxeles contradecía seriamente el diseño flexible de HTML, y cuando se redimensionó la pantalla, todo se vino abajo necesariamente o surgieron otros defectos graves. Este humilde inline-block parecíaBastante interesante; sin embargo, resolvió el problema principal del diseño HTML, que consistía en colocar objetos en una fila. Pero al principio, ningún navegador implementó esta propiedad, por lo que los diseñadores la ignoraron.

No puedo decir con certeza por qué razón, tal vez debido a la apariencia de posicionamiento o bajo la influencia de algún otro factor, pero alrededor de ese tiempo, los entusiastas decidieron intentar hacer un diseño usando CSS. Idealmente, podría separar completamente el contenido de su página de su apariencia. Incluso había un sitio web CSS Zen Garden (todavía está vivo), lo que llevó esta idea al extremo. En él, el mismo código HTML se convierte en proyectos completamente diferentes después de aplicar diferentes hojas de estilo.

El problema era que el soporte temprano de CSS era bastante defectuoso. Mirando hacia atrás, sospecho que los desarrolladores de navegadores simplemente duplicaron el procesamiento de etiquetas HTML y terminaron con esto. El sitio web RichInStyle todavía tiene una extensa lista de errores de CSS en los navegadores de esos años. Aquí están algunos de mis favoritos:

IE 3 ignora todas las etiquetas <style> en el documento, excepto la última.
IE 3 ignora las pseudo-clases, por lo que se a:hoverlee como .
IE 3 e IE 4 tratan los bordes autocomo nulos. De hecho, este error persistió casi hasta la versión IE 6. Pero esto era normal, porque IE 6 también se usaba incorrectamente text-align: centerpara elementos de bloque.
Si especifica una URL absoluta para la imagen de fondo, IE 3 intentará abrir la imagen en el programa local, como si la hubiera descargado.
Netscape 4 , #id, h1#id .
Netscape 4 — ! — .
Netscape 4 <li> , .
float clear ( ), Netscape 4 Mac .

Con eso tuvimos que trabajar. ¿Y la gente quería hacer un diseño de página completo en CSS? Decir ah.

Sin embargo, la popularidad de esta idea fue creciendo. Incluso se convirtió en una especie de eslogan unificador para la parte avanzada de la élite del diseñador: la mejor práctica, que se citó como el único argumento verdadero en el debate. Usar tablas para el diseño es malo, dijeron. ¡Las tablas confunden a los lectores de pantalla (lectores de pantalla), son semánticamente incorrectos, interactúan mal con el posicionamiento CSS! Todo esto es cierto, pero fue muy difícil de aceptar.

Bueno, volvamos a eso en un minuto. Primero, echemos un vistazo a la atmósfera en la que se desarrolló el desarrollo web en el área 2000.

El fin de las guerras del navegador y el estancamiento posterior

La versión corta es la siguiente: Netscape ganó dinero vendiendo el navegador Navigator (pagado por negocios, gratis para uso personal), y luego Microsoft ingresó al mercado con Internet Explorer completamente gratis, y luego Microsoft tuvo la audacia de conectar IE con Windows. ¿Puedes imaginar? ¿Operando con un navegador ? Eso fue un gran problema. Microsoft demandó , perdió, pero como resultado, casi nada ha cambiado.

Microsoft hizo lo que quería de todos modos, y funcionó. Ella prácticamente destruyó Netscape. Ambos navegadores eran infernalmente con errores, pero con errores de diferentes maneras. Por lo tanto, un sitio probado en un navegador seguramente se desmoronará en otro. Esto significó que cuando la cuota de mercado de Netscape disminuyó, los diseñadores web le prestaron menos atención, por lo que se abrieron menos sitios web normalmente, como resultado de lo cual la cuota de Netscape Navigator se redujo aún más.

Probablemente no sean muy buenas noticias para los usuarios de sistemas operativos que no sean Windows. Lo cual es divertido porque había IE 5.5 para Mac, y en general tenía menos errores que IE 6 (por cierto, Bill Gates en ese momento no era tanto un geek brillante como un empresario agresivo y despiadado que hizo una fortuna para destruir intencionalmente cualquier competencia que se interponga en el camino, lo que finalmente causó daños a toda la industria, esto es así, por cierto).

Cuando Windows XP con Internet Explorer 6 salió a mediados de 2001, Netscape Navigator se convirtió de un enorme Juggernaut en un pequeño enano para aplicaciones de nicho.

Y luego, habiendo tomado completamente y completamente el mercado, Microsoft se detuvo. Desde su inicio, Internet Explorer se ha lanzado cada año más o menos, pero después de IE 6 ha habido un retraso de más de cinco años. Seguía teniendo errores, pero en ausencia de competidores no era evidente. Por lo tanto, Windows XP también se veía lo suficientemente bueno como para capturar el mercado de computadoras de escritorio, y la próxima versión de Windows tampoco salió al mismo tiempo.

También detuvo el trabajo del consorcio W3C, que acepta estándares (que no deben confundirse con W3Schools, sanguijuelas SEO). A mediados de los 90, el HTML se revisó varias veces, y luego se congeló como HTML 4. CSS se actualizó de la primera a la segunda versión en solo un año y medio, pero también se congeló en esto. Actualización menor de CSS 2.1no alcanzará el estado de "recomendación de candidato" hasta principios de 2004, y tomó otros siete años aceptar la versión final.

En esta situación de dominio completo de IE 6, parecía que toda la red parecía estar congelada en el tiempo. Los estándares no importaban, porque de hecho solo había un navegador. Todo lo que hizo se convirtió en el estándar de facto. A medida que Internet creció en popularidad, el control de estrangulamiento de IE también dificultó el uso de cualquier plataforma que no sea Windows, ya que IE solo estaba disponible para Windows. Nunca fue posible garantizar que el sitio web funcionará en ningún otro navegador.

(Existe la idea de que los monopolios son malos. ¡Debe haber algún tipo de ley contra ellos!)

Al mismo tiempo, Netscape ha empeorado su posición, habiendo comenzado una alteración a gran escala del motor. Como resultado, se lanzó un estándar Netscape 6 mucho más consistente, y el precio fue de varios años de ausencia del mercado, donde en ese momento IE continuó aumentando su participación. El navegador Netscape 6 nunca alcanzará incluso el 10%, mientras que IE alcanzará un pico del 96%. Por otro lado, el nuevo motor salió con código abierto como parte de Mozilla Application Suite, que luego jugará un papel importante.

Pero antes de eso hubo algunos años más, pero por ahora ...

Modo de compatibilidad

Todas las primeras implementaciones de CSS en los navegadores estaban llenas de errores. Quizás el más notorio de ellos es un error con el modelo de contenedor (modelo de caja).

Verá, un contenedor (el espacio rectangular ocupado por un elemento) tiene varias dimensiones: su propio ancho y alto, luego relleno, luego un borde opcional y luego el campo que lo separa de los contenedores vecinos. CSS indica que todas estas distancias se apilan juntas. Por ejemplo, un contenedor con los siguientes estilos:

    width: 100px;
    padding: 10px;
    border: 2px solid black;

... tendrá 124 píxeles de ancho, de borde a borde.

Sin embargo, IE 4 y Netscape 4 adoptaron un enfoque diferente: vieron el ancho y la altura como una dimensión de borde a borde, de la cual se restan los bordes y los márgenes para obtener el ancho del elemento en sí. El mismo campo en estos navegadores tendrá un ancho de 100 píxeles de borde a borde, y quedarán 76 píxeles para el contenido.

IE 6 decidió corregir esta contradicción con la especificación. Desafortunadamente, solo hacer cambios rompería el diseño de varios sitios web que funcionaron bien tanto en IE como en Netscape.

Por lo tanto, el equipo de IE llegó a un compromiso muy extraño: declararon el comportamiento anterior (junto con varios otros errores importantes) como el "modo de compatibilidad" (modo peculiar, literalmente "trabajando con peculiaridades") y lo activaron de forma predeterminada . Para cambiar al nuevo "modo estricto" o "modo estándar", era necesario especificar "doctype" al comienzo del documento, antes de la etiqueta <html>. Se parecía a esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Durante muchos años, todos tuvieron que insertar esta estúpida línea al comienzo de cada documento HTML (más adelante HTML5 lo simplificaría <!DOCTYPE html>). Si lo piensa, esta es una forma realmente extraña de elegir el comportamiento CSS correcto. La declaración doctype ha sido parte de la especificación HTML desde mediados de los 90 , pero nadie la ha usado. Supongo que la idea de Microsoft era permitir la elección sin introducir extensiones propietarias. El uso de dicha declaración puede evitar el comportamiento que inicialmente era incorrecto. ¡Salida conveniente para el equipo de IE!

Lo curioso es que todavía existe el modo de compatibilidad con "peculiaridades". Y todavía está instalado por defectoen todos los navegadores, veinte años después! La lista exacta de "peculiaridades" ha cambiado con el tiempo. En particular, ni Chrome ni Firefox usan el modelo de contenedor IE incluso en este modo, pero se emulan muchos otros errores.

Los navegadores modernos también tienen un modo "casi estándar" que emula solo una peculiaridad. Quizás esta sea la segunda función más escandalosa: si una celda de la tabla contiene solo una imagen, entonces se elimina el espacio a continuación. De acuerdo con las reglas habituales de CSS, la imagen está en la línea de texto (vacía), que requiere un poco de espacio debajo, para elementos interlineales de letras, como "y". Los primeros navegadores no podían manejar esto normalmente, sin embargo, algunos sitios web creados después de aproximadamente 2000 confiaban en esta característica, aunque todo lo demás era totalmente compatible. Por ejemplo, cortaron una imagen grande en pedazos, que se colocaron en las celdas de la mesa, una cerca de la otra. Si, de acuerdo con el estándar, agrega espacio vacío, la imagen se desmoronará.

Pero volviendo al pasado. Aunque los estándares prevalecieron formalmente, creó un nuevo problema. Como IE 6 dominaba la Web y las declaraciones de DOCTYPE eran opcionales, no era necesario pensar en admitir estos estándares en el "modo estricto" del navegador. Otros navegadores finalmente lo emularon , y el comportamiento personalizado se convirtió en el estándar de facto. Los diseñadores web que se preocuparon por tales cosas (para nuestro crédito, éramos muchos) lanzaron una campaña de alto perfil para habilitar el modo estricto, ya que este era un primer paso absolutamente necesario para garantizar la compatibilidad con otros navegadores.

Ascenso y caída de XHTML

Mientras tanto, W3C ha perdido interés en HTML a favor de XHTML. Este es un intento de rediseñar el HTML utilizando la sintaxis XML en lugar de SGML.

(¿Qué es SGML, preguntas? No lo sé. Nadie lo sabe. Esta es la gramática en la que se basa HTML, y esto es lo único que se sabe al respecto).

Para crédito del consorcio, en ese momento había razones razonablemente buenas para tal decisión. Como regla general, el HTML se escribió manualmente (como lo es ahora), y esto significa la presencia obligatoria de errores aleatorios. Los navegadores no rechazaron el HTML con errores, pero involucraron varios métodos para corregir errores, y, como en todo lo demás, los diferentes navegadores manejan los errores de manera diferente. El HTML ligeramente distorsionado parecía funcionar bien en IE 6 (donde "funcionó bien" significa "hizo lo que esperaba de él"), pero se desmoronó por completo en otros navegadores.

El consorcio W3C eligió XML porque a principios de la década de 2000 vieron XML como una solución universal para todos los problemas. Si no sabe, XML tiene un enfoque mucho más explícito y agresivo para el manejo de errores: si su documento contiene un error de análisis, entonces todo el documento no es válido. Esto significa que si seleccionó XHTML e hizo un error tipográfico, no se mostrará nada en el navegador . Solo un error.

Apesta. A primera vista, todo parece normal, pero tenga en cuenta: el XML universal generalmente se ensambla dinámicamente usando bibliotecas que tratan el documento como un árbol que manipula, y al final lo convierte en texto. Esto es ideal para el uso general de XML para serializar datos cuando sus datos ya son un árbol y la mayor parte de la estructura XML es simple y repetible, por lo que es fácil esconderse en las funciones.

HTML no es así. Un documento HTML tiene poca estructura repetitiva confiable; incluso este artículo en la página está formateado principalmente por etiquetas <p>, pero también contiene contenido inesperado <em>dentro del texto principal y aleatorio<h3>entre párrafos No es muy divertido codificar esto en forma de árbol. Y esto es importante, porque aproximadamente al mismo tiempo, la representación del lado del servidor estaba ganando impulso, ¡y el HTML generado en ese momento! - Entregado con plantillas que lo consideran como una secuencia de texto.

Si las páginas HTML eran documentos puramente estáticos, entonces XHTML podría funcionar: usted escribe un documento, lo ve en un navegador y sabe que todo funciona. No hay problema. ¿Pero crear un documento de forma dinámica y arriesgarse a que en alguna situación límite todo el sitio sea engañado y el visitante vea solo un error en el navegador? Esto apesta.

Por supuesto, la difusión del nuevo estándar Unicode en ese momento también jugó un papel importante. ¡Entonces no siempre estaba claro cómo usarlo, y una secuencia incorrecta de UTF-8 fue suficiente para considerar todo el documento XML como distorsionado e "inválido"!

Entonces, después de algunos mimos, casi nos olvidamos de XHTML. Solo dejó dos huellas:

¡Todos dejaron de usar nombres de etiquetas en mayúsculas! Adiós <BODY>, hola <body>! XML distingue entre mayúsculas y minúsculas y todas las etiquetas XHTML estaban en minúsculas, por lo que las etiquetas de título simplemente no funcionaron (hecho curioso: la API de JavaScript aún pasa los nombres de las etiquetas HTML en mayúsculas). Esto probablemente se deba a la creciente popularidad del resaltado de sintaxis; ya no escribimos en el Bloc de notas, como en 1997.
. , HTML : , <p>...</p>, <br>. <br> , </br>. XML : , <br/>, <br></br>.

XHTML , - , <br/> HTML-. XML ; HTML5 , . , <script/> <script> — HTML !

Solo extraño una cosa en XHTML. Allí podría usar el metalenguaje XSLT para hacer que la plantilla "dentro del navegador" (es decir, inserte el contenido de la página en el diseño general del sitio) sin escribir scripts. Era la única forma posible de hacer esto, y era genial si todo funcionaba. Pero una pequeña falla podría arruinarlo todo.

La apariencia del diseño CSS

De vuelta a CSS!

Usted es un diseñador web principiante y, por alguna razón, desea probar el uso de estilos CSS para el diseño, aunque claramente están destinados solo a colores y otras cosas. ¿Qué hacer?

Como mencioné, el problema principal es la posición horizontal de los objetos uno al lado del otro . El posicionamiento vertical no es un problema: este es un comportamiento HTML normal. La única razón por la que todos usan tablas es porque pueden dividir el material en celdas y organizarlas una al lado de la otra en columnas.

CSS 2 introdujo algunos modos de visualización que corresponden a partes de la tabla. Pero para usarlos, necesita los mismos tres niveles de anidamiento que en las tablas reales: la tabla en sí, luego la fila y luego la celda. No están aquí y, en cualquier caso, IE pronto no comenzará a admitir dichos modos.

Hay más position, pero constantemente busca colocar objetos uno encima del otro. Hmm

¿Lo que queda?

De hecho, una sola herramienta: float.

Dije que le floatpermite hacer que el periódico fluya alrededor de la imagen con texto, pero esta es una descripción muy general. En principio, se puede aplicar a cualquier elemento. Si necesita una barra lateral, puede inclinarla hacia el borde izquierdo, asignar un ancho del 20% de la página y obtener algo como esto:

+ --------- +
El | barra lateral | ¡Hola y bienvenidos a mi sitio web!
El | El |
+ --------- +

Desafortunadamente, las propiedades floatson tales que el texto fluirá a su alrededor. Por lo tanto, si el texto en la página es más largo que la barra lateral, aparecerá debajo, y la ilusión se destruirá. Pero se puede evitar. Las especificaciones de CSS aclaran que el contenido floatno puede fluir uno alrededor del otro, por lo que basta con poner uno más float.

+ --------- + + ----------------------------------- +
El | barra lateral | El | ¡Hola y bienvenidos a mi sitio web! El |
El | El | El | El |
+ --------- + | Aquí hay un párrafo más largo para mostrar |
            El | que mi cerebro de galaxia CSS flotante |
            El | tonterías evita el ajuste de texto. El |
            + ----------------------------------- +

Este enfoque funcionó, pero sus limitaciones fueron mucho peores que las limitaciones de la tabla. Por ejemplo, si agrega un pie de página, se elevará a la derecha del texto principal, porque para el navegador el "cursor" todavía está en la parte superior, a la derecha de los bloques flotantes. Por lo tanto, debe usarlo clearpara clavar un elemento debajo de todos los flotadores. Y si creó la barra lateral al 20% del ancho de la página y el cuerpo al 80%, cualquier espacio entre ellos empujará la página fuera de la pantalla y mostrará una barra de desplazamiento horizontal fea. Siempre debes recordar esta estúpida aritmética. Si tiene bordes o fondos establecidos en ambos lados, entonces serán de diferentes alturas, por lo que debe hacer cosas realmente grotescas para quearreglalo. Y los lectores de pantalla leerán toda la barra lateral antes de pasar al texto principal, lo cual es bastante grosero para los usuarios. Por lo tanto, debe usar una configuración aún más compleja con tres columnas, de las cuales el medio aparece primero en HTML.

Como resultado, obtenemos un diseño que se ve hermoso, funciona bien y se escala correctamente, pero se describe mediante un código CSS extremadamente caótico. Nada de lo que escribió en realidad correspondió a lo que quería , ¡y estas son las partes principales del diseño, y no los marcos laterales! Fue difícil entender cómo se conecta el código CSS y qué aparece en la pantalla. Y luego la situación empeorará mucho antes de que finalmente mejore.

Cuadrícula de miniaturas - 2

Armados con un juguete nuevo, podemos mejorar nuestra cuadrícula en miniatura. El diseño original de la tabla era increíblemente tedioso, incluso si no proporcionaba semántica de etiquetas. ¡Ahora puedes hacerlo mejor!

<ul class="thumbnail-grid">
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    ...
</ul>

Esto es ideal: HTML almacena el contenido de la página de una forma razonable, y luego CSS describe cómo se ve realmente.

Desafortunadamente, la implementación floatserá un poco grosera. Esta nueva versión se adapta mejor a diferentes tamaños de pantalla, pero requiere algunos trucos: las celdas deben tener una altura fija, centrar toda la cuadrícula es bastante difícil y el efecto de cuadrícula desaparece con elementos más anchos. Queda claro que obtuvimos casi la misma tabla, pero con un número flexible de columnas. Solo estamos tratando de imitarlo.

También necesitas este hechizo extraño clearfix, notorio en esa época. Como el flotador no mueve el "cursor", entonces<ul>con elementos flotantes de altura cero. Termina exactamente donde comienza, y todas las miniaturas flotantes duermen lo suficiente desde abajo. Peor aún, dado que todos los elementos subsiguientes no tienen flotantes adyacentes , ignorarán por completo las miniaturas y continuarán renderizando debajo de una "cuadrícula" vacía, ¡creando un desastre!

La solución es agregar un elemento ficticio al final de la lista, que no ocupa espacio, pero con un atributo CSS clear: both, que lo omite en todos los flotantes. Esto empuja efectivamente a este último <ul>debajo de las miniaturas, y se adhiere perfectamente a ellas desde abajo.

Más tarde, los navegadores comenzarán a admitir pseudoelementos de "contenido generado" ::beforey::after, que abandonará por completo el elemento ficticio. Las hojas de estilo de mediados de la década de 2000 a menudo incluían las siguientes líneas:

.thumbnail-grid::after {
    content: '';
    display: block;
    clear: both;
}

Y sin embargo, era mejor que las mesas.

DHTML

Como una breve digresión al mundo de JavaScript, la nueva propiedad position realmente ha permitido un diseño algo dinámico. Me opongo sinceramente a esa herejía, sobre todo porque nadie lo ha hecho bien, pero fue divertido de jugar.

Así comenzó la era del "HTML dinámico", es decir, HTML con efectos de JavaScript. Ahora este término ha pasado de moda por completo, porque ahora no podemos hacer ni un jodido blog estático sin JavaScript. Todo comenzó de manera mucho más inofensiva: los adolescentes insertaron brillos en la página que seguía el cursor del mouse, o un pequeño reloj analógico que funcionaba en tiempo real.

La colección más popular de dichos scripts fue Dynamic Drive. - Este sitio todavía existe milagrosamente. Probablemente contiene cientos de juguetes que no se han actualizado desde principios de la década de 2000.

Si no desea profundizar en esta colección, aquí hay un ejemplo: cada año (excepto el actual, cuando lo olvidé, lo siento) en mi cumpleaños, me gusta agregar confeti y otras tonterías a mi blog. Soy muy vago, así que comencé la tradición con la ayuda de este script, que encontré en alguna parte . Originalmente estaba destinado a los copos de nieve y colocó en la página un montón de imágenes position: absolute, y luego cambió repetidamente sus coordenadas.

Compare esto con la versión que escribí desde cero hace un par de años : aquí solo hay un pequeño código JSpara personalizar las imágenes, y luego el navegador las anima usando CSS. Este es un script un poco menos funcional, pero permite que el navegador haga todo el trabajo, posiblemente incluso con aceleración de hardware. Así de lejos hemos llegado.

web 2.0

Los tiempos oscuros no pueden durar para siempre. Tuvo lugar una serie de eventos que nos sacaron a la luz.

Uno de los principales eventos fue el lanzamiento de Firefox, o, para los más avanzados, inicialmente Phoenix y luego Firebird. La versión 1.0 apareció en noviembre de 2004 y comenzó a mordisquear bien IE. El navegador funcionó en el núcleo reescrito de Netscape 6, que se extrae del corazón de Mozilla Suite a una aplicación separada. Fue rápido, simple y mucho mejor para mantener los estándares, aunque absolutamente nada de esto importó.

Lo real era que Firefox tenía pestañas. En IE 6 no estaban. Si desea abrir una segunda página web, abrió una nueva ventana. Eso es una mierda, chicos. Firefox se ha convertido en un verdadero milagro.

Por supuesto, Firefox no fue el primer navegador con pestañas; en el navegador completo de Mozilla Suite, también existieron, y en la Opera avanzada han existido durante años. Pero por varias razones, fue Firefox quien despegó, entre otras cosas debido al hecho de que no tenía un panel de publicidad gigante en la parte superior, como Opera.

Por supuesto, los diseñadores promovieron Firefox en relación con el soporte de estándares, pero este argumento atrajo solo a otros diseñadores, no a sus padres. Una de las demostraciones más populares y espectaculares fue la prueba Acid2 , diseñada para probar estándares web modernos. Mostró una bonita sonrisa, si los estándares se resolvieron correctamente, y una imagen infernal en IE 6 .

Resultado de la prueba Acid2 en el navegador IE 6

Los primeros Firefox no fueron perfectos. Pero, por supuesto, soportó los estándares mucho mejor, y se podía ver el progreso hasta que el navegador pasó por completo todas las pruebas con el lanzamiento de Firefox 3.

Firefox también recibió ayuda del motor JavaScript más rápido: esto fue antes de JIT. Fue mucho, mucho más rápido que IE. Por ejemplo, hasta donde recuerdo, IE 6 implementó la getElementByIditeración a través de todo el documento, incluso en el caso de identificadores únicos. Eche un vistazo a los antiguos anuncios de lanzamiento de jQuery , generalmente iban acompañados de gráficos de rendimiento, y allí todos los navegadores son un orden de magnitud más rápido que IE 6-8.

Ah, y luego IE 6 era un agujero de seguridad gigante, especialmente con soporte nativo para componentes binarios arbitrarios que solo necesitaban hacer clic en "Sí" en el cuadro de diálogo abstruso para obtener acceso completo e ilimitado a su sistema. Esto probablemente no contribuyó a la reputación de IE.

En cualquier caso, con el advenimiento de la más mínima alternativa a IE, incluso los diseñadores más viciosos no podrían simplemente optimizar el sitio para IE 6 y terminar allí. Ahora había una razón para usar el modo estricto, había una razón para preocuparse por la compatibilidad y los estándares, y Firefox hizo esfuerzos constantes para cumplirlos en la mayor medida posible, mientras que IE 6 permaneció estancado.

(Diría que este efecto abrió la puerta para OS X, así como para el iPhone. ¡No estoy bromeando! Piénselo: si el navegador del iPhone realmente no funcionaba con nada, porque todos seguían creando sitios para IE 6, seguiría siendo una alternativa costosa a Palm. Recuerde que al principio Apple ni siquiera quería lanzar sus propias aplicaciones, confiaba en Internet).

(Por cierto, Safari se lanzó en enero de 2003, basado en la bifurcación KHTML del navegador KDE Konqueror. Creo que usé KDE en ese momento, así que fue muy interesante, pero nadie pensó realmente en OS X con él cuota de mercado ridícula del 2%).

Otro factor importante apareció el 1 de abril de 2004, cuando Google anunció Gmail. Jaja Es ridículo. Interfaz web conveniente para el correo? Buena broma, google.

Oh, mierda. No están bromeando.¿Cómo funciona esta cosa interactiva?

Hoy, cada desarrollador web sabe la respuesta: esta es XMLHttpRequest, llamada así porque nadie la ha usado nunca para consultas XML. Fue inventado por Microsoft para el correo de Exchange, y luego clonado por Mozilla (solo cito de Wikipedia ).

Lo importante es que XMLHttpRequest le permite realizar una solicitud HTTP desde JavaScript. Ahora puede actualizar solo una parte de la página con los nuevos datos, completamente en segundo plano, sin volver a cargar. Nadie había oído hablar de esto antes, y cuando Google lanzó un cliente de correo electrónico completo, fue una magia absoluta.

Quizás todo esto sea un error que conducirá a un futuro infernal donde las páginas estáticas cargan tres párrafos de texto en segundo plano usando XHR sin razón aparente, pero este es el tema de otro artículo .

En una línea similar, jQuery, un milagro similar, fue lanzado en agosto de 2006. No solo describió las diferencias entre las API de IE "JScript" y los enfoques estándar adoptados por todas las demás (lo cual fue hecho anteriormente por otras bibliotecas), sino que también simplificó enormemente el trabajo con grupos enteros de elementos al mismo tiempo, lo que históricamente siguió siendo una gran molestia. ¡Ahora es bastante fácil aplicar CSS en todas partes desde JavaScript! Esta es una mala idea, ¡pero en esa situación no había mejor opción!

Te escucho: JavaScript otra vez! ¿Es este un artículo sobre CSS?

¡Tienes toda la razón! Menciono la creciente popularidad de JavaScript, porque fue lo que condujo directamente al estado moderno de CSS, gracias a otro gran factor:

Ambición

Firefox ha demostrado que los navegadores pueden crecer bastante rápido: cada nueva mejora en Acid2 fue emocionante. Gmail nos mostró que la web es capaz de más que solo mostrar texto plano con copos de nieve cayendo.

Y la gente comenzó a fantasear .

El problema era que los navegadores no mejoraron. Firefox fue en algunos aspectos más rápido y se adhirió con mayor precisión a la especificación CSS, pero básicamente no hizo nada nuevo. Solo la caja de herramientas ha mejorado , y esto ha afectado principalmente a JavaScript. CSS es un lenguaje estático, por lo que no podría escribir una biblioteca para mejorarlo. Crear CSS usando JavaScript era posible, pero maldita sea, siempre es una mala idea.

Otro problema era que CSS 2 solo es bueno para diseñar rectángulos. Fue maravilloso en los años 90, cuando cada sistema operativo tenía una interfaz de estilo rectangular. Pero ha llegado el momento de Windows XP y OS X, donde todo se ha vuelto brillante, brillante y redondeado. Fue un poco incómodo que las esquinas redondeadas y las marcas de verificación ordenadas con sombras estén en su navegador de archivos , pero en ninguna parte de Internet.

Entonces volvieron los tiempos oscuros.

The CSS Hack Age

Los diseñadores querían mucho de lo que CSS simplemente no podía ofrecer.

Esquinas redondeadas. Los cuadrados pasaron de moda, y ahora todos querían botones con esquinas redondeadas, ya que "el futuro está con ellos" (los botones nativos también pasaron de moda por alguna razón). Por desgracia, CSS no pudo hacer esto. Sus opciones:
1. . , . .
2. , . , .
3. , 3×3 . JavaScript.
4. , - lol
, IE 6 PNG 8- - ; 1-, , , GIF. , :
```
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bite-my-ass.png');
```
: ! . .
. CSS 3 opacity… IE, filter. , PNG, … , .
jQuery , fadeIn, . - , 2000- Linux ( ) .

, , JavaScript, . , , .
! . , , , . CSS , <tr class="odd"> (, !) - jQuery.
CSS 2 >, , ul.foo > li , , IE 6 — — !

Pero todas estas son consideraciones puramente estéticas. Si estaba interesado en el diseño, bueno, la apariencia de Firefox inmediatamente hizo su vida mucho más fácil y mucho más complicada.

¿Te acuerdas inline-block? ¡Firefox 2 en realidad lo admite! Tenía errores y estaba oculto detrás del prefijo del proveedor, pero funcionaba más o menos, lo que permitía a los diseñadores intentar usarlo. Y luego salió Firefox 3, que lo soportó más o menos normalmente, lo que parecía un milagro. La tercera versión de nuestra cuadrícula de miniaturas no es más complicada que el ancho y inline-block:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
}

La idea general inline-blockes que el interior actúa como un bloque, pero el bloque en sí se coloca en texto plano, como una imagen. Por lo tanto, cada miniatura se coloca en un contenedor, pero todos estos contenedores se encuentran uno al lado del otro, y debido a su ancho igual, entran en la cuadrícula. Y dado que es funcionalmente una línea de texto, no hay ningún efecto extraño en el resto de la página, como lo fue con el flotador.

Por supuesto, hubo algunos inconvenientes. Por ejemplo, no se puede hacer nada con el espacio restante, por lo que existe el riesgo de que aparezca un campo grande a la derecha en pantallas grandes no estándar. También estaba el problema de la ruptura de la malla por una celda ancha. Pero al menos no es una carroza.

Quedaba un pequeño problema: IE 6. Técnicamente soportadoinline-block, pero solo en elementos incorporados naturalmente como <b>y <i>, pero no <li>. No es así como realmente quieres (o piensas) usarlo inline-block. Eh

Afortunadamente, en algún momento, un genio absoluto descubrió una hasLayoutoptimización interna en IE que marca si el elemento tiene ... uh ... marcado. Escucha, no lo sé. Básicamente, cambia la ruta de representación de los elementos, por lo que estos no son estos, sino otros errores que aparecen , como el modo de compatibilidad basado en cada elemento. Como resultado, resulta que todo lo anterior funciona en IE 6, si agrega un par de líneas:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
    *zoom: 1;
    *display: inline;
}

Los asteriscos al principio hacen que la propiedad sea inválida, por lo que los navegadores deben ignorar toda la cadena ... pero por alguna razón desconocida, IE 6 ignora los asteriscos y acepta el resto de la regla (casi cualquier puntuación funcionó, incluido un guión o, mi favorito personal, subrayado). Una propiedad zoom es una extensión de Microsoft que escala todo, con el efecto secundario de establecer la propiedad de diseño en el elemento. Y display: inline debería forzar a cada elemento a insertar su contenido en una gran línea de texto, pero IE procesa el elemento inlinecon la propiedad "marcado" algo así inline-block.

Y aquí vemos el verdadero potencial de los hacks CSS. Las reglas específicas del navegador, con una sintaxis intencionalmente pobre que un navegador ignoraría, reproducen un efecto que todavía es incomprensible de lo que está escribiendo. Libros de texto completos explican cómo hacer algo simple, como una cuadrícula, pero para que esto funcione en la mayoría de los navegadores de la época. También verá * html, html > /**/ bodyy todo tipo de otras tonterías. Aquí está la lista completa ! ¿Y recuerdas el truco "clearfix"? La versión completa , compatible con todos los navegadores, es un poco peor:

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

¿Es de extrañar que la gente comenzó a quejarse de CSS?

Fue una era de copiar y pegar a ciegas en vanos intentos de hacer que esto funcionara. Ejemplo: alguien (una vez desenterré el código fuente, pero no lo encuentro ahora) tuvo la extraña idea de instalar siempre body { font-size: 62.5% }, ya que las unidades relativas son supuestamente "buenas", por el deseo de anular el tamaño de fuente predeterminado predeterminado del navegador de 16px (que, resulta correcto) y la necesidad de lidiar con los errores de IE. Después de un tiempo, dejó de hacer esto, pero el daño ya estaba hecho y miles de sitios web han actuado de esta manera, considerándolo "mejores prácticas". Esto significa que si desea cambiar el tamaño de fuente predeterminado de su navegador en cualquier dirección, obtendrá tonterías: si lo reduce y un montón de páginas web se vuelven microscópicas, si lo aumenta, todo seguirá siendo pequeño si lo aumenta aún más , los sitios que respetan su decisión se volverán enormes. Al menos hoy tenemos una mejor escala, creo.

Sí, y recuerde: StackOverflow aún no ha aparecido. Todo el conocimiento se pasó de boca en boca. Si tienes suerte, conoces algunos sitios con consejos como QuirksMode y Eric Meyer's.

En realidad, mira el sitio css / edge de Mayer . Hay algunos ejemplos salvajes que la gente hizo, incluso con solo CSS 1, en 2002. Todavía creo que complexspiral es un genio puro, aunque en estos días todo se hace con opacityuna sola imagen. ¡Los métodos de raggedfloat solo recibieron soporte nativo de CSS hace solo unos años, con el advenimiento de shape-outside! Este autor también nos dio un reinicio de CSS , eliminando las diferencias entre los estilos de navegador predeterminados.

(El papel de Eric Meyer en CSS es difícil de sobreestimar. Cuando su pequeña hija Rebecca murió hace seis años, ella fue inmortalizada con su propio color CSS, rebeccapurple, un caso único ¡Eso es lo que aprecia su comunidad en línea! Bueno, ahora tengo que llorar un poco por esta historia).

El futuro se acerca, pero poco a poco

Los diseñadores y desarrolladores ampliaron gradualmente los límites de lo que son capaces los navegadores. Los navegadores hasta ahora se han manejado algo mal. Todas las correcciones, soluciones alternativas y bibliotecas eran secretas, frágiles, propensas a errores y / o pesadas.

Obviamente, los navegadores necesitaban una nueva funcionalidad. Pero solo soltarlo no fue suficiente; Microsoft hizo mucho de esto, y básicamente condujo a un nuevo desastre.

Pero tuvieron lugar varios intentos desesperados. Dado que la cabeza del W3C todavía estaba sentada en su propio vacío, rechazando incluso las mejoras HTML propuestas a favor de XML, algunos de los desarrolladores de navegadores activos (Apple, Mozilla y Opera) decidieron establecer su propio club. En junio de 2004, se formó el grupo de trabajo WHATWG, y comenzó a trabajar en el estándar HTML5. En última instancia, elimina por completo la necesidad de XHTML y elimina una serie de problemas de seguridad cuando se trabaja con HTML normal. Además, proporcionó algunos beneficios nuevos, como el soporte nativo para audio, video y controles de formulario para fechas y colores. Y otras cosas que son torpemente compatibles con los controles de JavaScript. Y, um, todavía son torpemente compatibles allí.

Luego vino CSS 3. No sé en qué punto sucedió esto. Apareció lentamente, con todas sus fuerzas, como un pollito nacido de un huevo y no apurado, maldición, para no ir a ninguna parte.

Puedo hacer muchas suposiciones razonables. Creo que empezó con border-radius. Específicamente, con -moz-border-radius. No sé cuándo se introdujo por primera vez, pero el rastreador de errores de Mozilla lo menciona en 1999.

Mira, la propia interfaz de usuario de Firefox se renderiza usando CSS. Si Mozilla quería hacer algo que no podía hacerse con CSS, agregaba su propia propiedad con un prefijo -mozpara indicar que era su propia invención. Y si no hay un daño real en esto, entonces la propiedad estará disponible para sitios web.

Supongo que el impulso para CSS 3 realmente comenzó cuando Firefox despegó, y los diseñadores descubrieron la propiedad -moz-border-radius. De repente aparecieron esquinas redondeadas incorporadas! No más alboroto en Photoshop, ¡solo escribe una línea! Casi de la noche a la mañana, se aserraron esquinas redondas y redondas en todas partes.

Y a partir de ahí todo rodó como una bola de nieve. Los problemas comunes se resolvieron uno por uno con la ayuda de nuevas funciones CSS, que se combinaron en una nueva versión de CSS - CSS 3. Los principales resolvieron los problemas de diseño mencionados anteriormente:

Esquinas redondeadas con border-radius.
Gradientes que usan linear-gradient(), etc.
El fondo múltiple en sí mismo no fue un problema, pero facilitó algunas otras cosas.
Transparencia utilizando opacityy canal alfa en colores.
Sombras en los contenedores.
, CSS 2, 2.1 .
(border image), , .
jQuery ( JS ).
:nth-child(), CSS.
. , ? SVG, , . , , , CSS! . .
Fuentes web que han estado en CSS durante algún tiempo, pero implementadas solo en IE y solo con algunas fuentes tontas cargadas con DRM. ¡Ahora no estamos limitados a las cuatro fuentes malas que vienen con Windows y que nadie más tiene!

¡Fue genial! Estas características no resolvieron ningún problema de diseño, pero sí resolvieron los problemas estéticos que los diseñadores solían resolver con torpeza utilizando muchas imágenes y / o JavaScript. Esto significó menos descargas y menos imágenes que se usaron en lugar de texto, lo cual fue bastante bueno para la web.

La gran ironía es que estos efectos de diseño pasaron de moda casi de inmediato, y ahora volvemos a los rectángulos planos.

Prefijos del vendedor del infierno en los navegadores

¡Pobre de mí! El mundo todavía no estaba bien.

Algunos de estos nuevos artilugios fueron desarrollados originalmente por fabricantes de navegadores y tienen el prefijo. Algunos de los últimos fueron desarrollados por el comité CSS, luego implementados por los navegadores cuando el diseño aún estaba en desarrollo. Así que también hubo prefijos aquí.

Y comenzó el infierno de prefijos , que continúa hasta nuestros días.

Mozilla era -moz-border-radius, por lo tanto, cuando Safari lo implementó, lo llamó -webkit-border-radius("WebKit" es el nombre de Apple fork KHTML). Luego, la especificación CSS 3 lo estandarizó y lo nombró simplemente border-radius. Esto significa que si desea utilizar bordes redondeados, en realidad necesita deletrear tres reglas:

element {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

Los dos primeros en realidad incluyeron el efecto en los navegadores actuales, y el último está registrado para el futuro: cuando los navegadores implementen la regla real y eliminen los prefijos, surtirá efecto.

Tenías que hacer esto cada maldita vez, porque CSS no es un lenguaje de programación y no tiene macros, funciones o similares. A veces, Opera e IE introdujeron sus propias implementaciones con prefijos -o-y -ms-, como resultado, el número total de líneas llegó a cinco. Con gradientes empeoró mucho; la sintaxis pasó por varias revisiones serias incompatibles, por lo que ni siquiera podía confiar en copiar / pegar y cambiar el nombre de la propiedad.

Y muchos diseñadores, bueno, se equivocaron. No puedo culparlos demasiado; Quiero decir, apesta. Pero muchas páginas indicaron solo formularios de prefijo, no el final, por lo que los navegadores tuvieron que mantener los formularios de prefijo más tiempo del que quisieran para no romper nada. Y si el formulario de prefijo sigue funcionando y está acostumbrado a usarlo, entonces tal vez realmente no necesite una opción universal.

Peor aún, algunos solo usarán el formulario que funciona en su navegador favorito. Las cosas se pusieron especialmente mal con el auge de los navegadores web móviles. Los navegadores integrados en iOS y Android son Safari (WebKit) y Chrome (originalmente WebKit, ahora fork), por lo que solo necesita el prefijo -webkit-. Lo que hizo que Mozilla fuera más difícil cuando lanzó Firefox para Android.

¿Recuerdas esa falla con IE 6? ¡Aquí estamos de nuevo! La situación era tan mala que, en última instancia, Mozilla decidió implementar una serie de características -webkit-que aún son compatibles incluso en Firefox de escritorio. La situación es tan estúpida que Firefox ahora solo admite algunos efectos a través de estas propiedades, como -webkit-text-stroke , que no está estandarizado.

Además, el motor Chrome bifurcado actual se llama Blink, por lo que técnicamente no debería usar propiedades -webkit-. Y sin embargo lo son. Al menos esto no es tan malo como las cadenas de agente de usuario confusas .

Ahora los creadores de los navegadores han abandonado en gran medida los prefijos; en cambio, ocultan las funciones experimentales detrás de las banderas (por lo tanto, solo funcionarán en máquinas de desarrollo que las fuercen). Teóricamente, las nuevas características deberían ser más pequeñas y más fáciles de estabilizar.

Este desorden probablemente se ha convertido en un gran factor de motivación para el desarrollo de Sass y LESS , los dos lenguajes que producen código CSS (preprocesadores). Tienen objetivos muy similares: ambos agregan variables, funciones y algunas formas de macros a CSS, lo que le permite excluir muchas repeticiones, ataques de navegador y otras tonterías de su código. Demonios, todavía uso SCSS , aunque el uso general de la industria está disminuyendo gradualmente.

Flexbox

Pero entonces, como si un ángel bajara del cielo ... flexbox .

Flexbox ha existido durante mucho tiempo: supuestamente el soporte parcial estaba de vuelta en Firefox 2, ¡ya en 2006! Pasó por varias revisiones incompatibles y le llevó una eternidad estabilizarse. Entonces, IE no pudo implementar el soporte durante años, y no desea confiar en un diseño que funcione solo para la mitad de su audiencia. Solo relativamente recientemente (¿2015? ¿Más tarde?) Flexbox obtuvo suficiente soporte amplio para un uso seguro. Y puedo jurar que todavía me encuentro con personas cuyo Safari no lo reconoce en absoluto sin prefijos, aunque Safari parece haber eliminado los prefijos hace cinco años ...

En cualquier caso, flexbox es una implementación CSS de una herramienta de diseño de interfaz gráfica de usuario bastante común: tiene un padre con varios hijos, y el padre tiene algo de espacio libre, y se comparte automáticamente entre los hijos. Y eso pone los objetos uno al lado del otro .

La idea general es que el navegador calcula cuánto espacio libre tiene el padre y el "tamaño inicial" de cada niño, calcula cuánto espacio adicional hay y lo distribuye de acuerdo con la flexibilidad de cada niño. Imagine una barra de herramientas: puede darle a cada botón un tamaño fijo (flex 0), pero agregue espaciadores que dividan el espacio restante por igual, así que dele flex 1.

Una vez hecho esto, también tendrá varias opciones para opciones convenientes: puede distribuir espacio adicional entre los niños, puede estirarlos a la misma altura o alinearlos de diferentes maneras, ¡incluso puede transferirlos a varias filas si no encajan todos!

Con esto, podemos optimizar aún más nuestra cuadrícula de miniaturas :

.thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
}
.thumbnail-grid li {
    flex: 1 0 250px;
}

Esto es solo un milagro. Puedes olvidarlo de inmediato inline-block. Este código expresa muy claramente lo que necesitamos.

…casi. Todavía tiene el problema de que las celdas demasiado anchas rasgarán la cuadrícula, ya que esta sigue siendo una fila horizontal, transferida a varias líneas independientes. Pero esto sigue siendo bastante bueno y resuelve otros problemas de diseño. Esto es probablemente suficiente. Si tan solo ...

Diría que la introducción masiva de flexbox marcó el comienzo de la era moderna de CSS. Solo había un problema sin resolver ...

Muerte lenta y dolorosa de IE

IE 6 abandonó el mercado durante mucho tiempo. Hasta principios de 2010 más o menos, no podría haber caído por debajo del 10% del mercado (todavía una gran parte).

Firefox alcanzó la versión 1.0 a finales de 2004. IE 7 salió solo dos años después, ofreció solo mejoras modestas, sufrió problemas de compatibilidad con los sitios para IE 6, y muchos usuarios de IE 6 (en su mayoría usuarios sin experiencia) no vieron ninguna razón para la actualización. Vista viene con IE 7, pero Vista resultó ser una especie de falla: no creo que en toda mi vida haya estado cerca de superar a XP.

Otros factores incluyeron políticas de TI corporativas, que a menudo toman la forma de "nunca actualizar nada", y a menudo por una buena razón, porque escuché historias interminables sobre aplicaciones internas que solo funcionaban en IE 6 por todo tipo de razones horribles. Luego estaba todo Corea del Sur , que tenía la obligación legal de usar IE 6 porque contenía en la ley algunos requisitos de seguridad que solo podían implementarse usando el control ActiveX en IE 6.

Por lo tanto, si apoyaba el sitio web que se utilizó - o peor, requeridopara uso de personas de negocios o de otros países, está prácticamente atascado con el soporte para IE 6. Las personas que crean pequeñas herramientas personales y sitios web abandonaron inmediatamente la compatibilidad con IE 6 y mostraron pancartas cada vez más desagradables para sitios web en usuarios de IE 6 ... Pero si usted es un hombre de negocios, ¿cómo explicar la pérdida instantánea del 20% de la audiencia potencial? ¡Solo trabaja más duro!

Con los años, el estrés ha crecido a medida que CSS se ha vuelto cada vez más funcional e IE 6 ha seguido siendo un ancla. Todavía no entendía PNG alphasin soluciones y, mientras tanto, teníamos funciones cada vez más importantes, como el video nativo en HTML5. Las soluciones alternativas se volvieron cada vez más confusas, y la lista de funciones que simplemente no podía usar se hacía más larga. Mostraría cómo se ve mi blog en IE 6, pero es poco probable que incluso se conecte a él: ¡el TLS que admite es tan antiguo y roto que ya está deshabilitado en la mayoría de los servidores!

Se recibieron solicitudes separadas de desarrolladores individuales del equipo de YouTube. Sin pedir permiso a nadie, en julio de 2009 agregaron una pancarta de advertencia pidiendo a los usuarios de IE 6 que cambien a algootro, ya que el soporte de navegador heredado terminará pronto. En un mes, la participación global del tráfico de IE6 cayó en más del 10%. No todos los héroes usan impermeables.

Marcaría el comienzo del fin de IE6 ese día cuando YouTube realmente desactivó el soporte para IE 6. Esto sucedió el 13 de marzo de 2010, casi nueve años después del lanzamiento de esta versión del navegador. No sé cuánto afecta YouTube a los usuarios corporativos o al gobierno de Corea del Sur, pero la negativa de una gran empresa web a admitir un navegador completo envía un mensaje bastante fuerte.

Por supuesto, había otras versiones de IE, y muchas de ellas tenían un dolor de cabeza diferente. Pero cada seguimiento se volvió menos doloroso, y ahora no necesita pensar demasiado en las pruebas en IE (ahora Edge). Es hora de que Microsoft abandone su propio motor de renderizado y cambie al clon de Chrome.

Ahora

CSS es muy bueno en este momento. No necesitas trucos extraños para colocar objetos cerca. Las herramientas de desarrollo del navegador ahora están incorporadas y son increíblemente sorprendentes: ¡Firefox comenzó a advertirte específicamente cuando algunas propiedades CSS no tienen efecto debido a los valores de otras propiedades! Los efectos secundarios implícitos poco claros como "contextos de apilamiento" ahora se pueden establecer explícitamente como propiedades isolation: isolate.

De hecho, permítanme enumerar todo lo que viene a la mente sobre las características modernas de CSS. Esta no es una guía para todos los usos posibles de los estilos, pero si su conocimiento de CSS no se ha actualizado desde 2008, espero que esto aumente su apetito. ¡Y todo esto es solo CSS! Tanto que antes era imposible, doloroso o que requería complementos incómodos ahora se admite inicialmente: audio, video, dibujo a mano alzada, renderizado 3D ... sin mencionar las enormes mejoras ergonómicas de JavaScript.

Diseño

El contenedor de cuadrícula puede hacer casi todo lo que hicieron las tablas, e incluso más, incluida la determinación automática del número de columnas. Esto es increíble. Más sobre esto a continuación.

El contenedor flexbox descompone a sus hijos en una fila o columna, lo que permite a todos declarar su tamaño predeterminado y la cantidad de espacio que desean usar. Puede envolver estos contenedores, reorganizar los elementos secundarios sin cambiar el orden de la fuente y alinearlos de varias maneras.

Las columnas pueden dividir el texto, bueno, en múltiples columnas.

Propiedadbox-sizingle permite seleccionar el modelo de contenedor IE para elementos individuales si necesita que todo el elemento ocupe una cantidad fija de espacio, y los bordes y márgenes se restan del ancho total .

display: contentsvuelca el contenido de un elemento en su elemento padre, como si no estuviera allí. display: flow-root- Esto es básicamente un clearfix automático, solo una década después.

widthahora se puede establecer en min-content, max-contento una función fit-content()para un comportamiento más flexible.

white-space: pre-wrapretiene espacios, pero rompe las líneas cuando es necesario para evitar el desbordamiento. También es útil pre-line, lo que contrae los espacios en uno, pero conserva nuevas líneas literales.

text-overflowcorta el texto detallado usando puntos suspensivos (o un carácter personalizado) cuando se excede el límite, y no solo lo trunca. También en las especificaciones está la función de ocultar suavemente el texto (desaparecer), pero aún no se ha implementado.

shape-outsidecambia la forma del flujo de texto. Incluso puede usar el canal alfa de la imagen como un formulario.

resizele da a un elemento arbitrario un descriptor de cambio de tamaño (si tiene desbordamiento).

writing-modeEstablece la dirección de la letra. Si su diseño tiene que funcionar en varios modos, algunas propiedades CSS lo admiten, puede usarlas como una alternativa a las propiedades estándar: inset-blocky inset-inlinepara el posicionamiento, block-sizey inline-sizepara el ancho / alto, border-blocky border-inlinepara los bordes, y propiedades similares a la sangría.

Estética

Las transiciones CSS interpolan suavemente un valor cada vez que cambia, ya sea debido a un efecto de tipo :hovero, por ejemplo, una clase agregada desde JavaScript. Las animaciones CSS son similares, pero reproducen animaciones predefinidas automáticamente. Ambos pueden aplicar varias funciones diferentes de "suavidad" .

border-radiusRedondea las esquinas del contenedor. Todas las esquinas pueden ser de diferentes tamaños y también pueden ser redondas o elípticas. La curva también se aplica al borde, el fondo y cualquier sombra del rectángulo.

Las sombras de los contenedores se pueden usar para el efecto obvio de crear sombras. También puede usar múltiples sombras y sombras insetpara varios efectos inteligentes.

text-shadowhace lo que dice, aunque también puede agregar algunas sombras para crear algún tipo de esquema de texto.

transformle permite aplicar una transformación arbitraria de múltiples etapas a un elemento, es decir, escalar, rotar, inclinar, mover y / o realizar una transformación en perspectiva sin afectar el diseño.

filter(diferente de IE 6) ofrece varios filtros visuales especiales que se pueden aplicar a un elemento. La mayoría de ellos cambian de color, pero también lo hay blur(), y drop-shadow()(a diferencia box-shadow, se aplica a la mente del elemento externo, y no a su contenedor).

linear-gradient(). radial-gradient(), nuevas y menos compatibles conic-gradient(), sus opcionesrepeating-* - Todos ellos crean imágenes de degradado y se pueden usar en cualquier lugar de CSS donde se espera la imagen, generalmente como background-image.

scrollbar-colorcambia el color de la barra de desplazamiento, con un efecto secundario desagradable de velocidades de desplazamiento significativamente más bajas en los navegadores actuales.

background-size: coverycontain escalarán proporcionalmente la imagen de fondo para que sea lo suficientemente grande como para cubrir completamente el elemento (incluso si está recortada) o lo suficientemente pequeña como para caber dentro (incluso si el elemento no cubre todo el fondo).

object-fit Es una idea similar, pero para otros objetos como <img>. object-positionObras apropiadas como background-position.

Es posible utilizar varios fondos, lo que es especialmente útil para los degradados: puede apilar varios degradados, otras imágenes de fondo y un color sólido en la parte inferior.

text-decorationse volvió más extraño que antes; Ahora puede establecer el color de la línea y usar varios tipos diferentes de líneas, incluidas las discontinuas, punteadas y onduladas.

Los contadores CSS se pueden usar para la numeración arbitraria de elementos arbitrarios, proporcionando la posibilidad de usar <ol> en cualquier conjunto de elementos.

El pseudo-elemento le ::markerpermite estilizar el contenedor del marcador de un elemento de la lista o incluso reemplazarlo completamente con un contador personalizado. El soporte del navegador está incompleto pero está mejorando. Del mismo modo, la regla@counter-styleimplementa un estilo de contador completamente nuevo (por ejemplo, 1 2 3, i ii iii, ABC, etc.) que puede usar en cualquier lugar, aunque hasta ahora solo Firefox lo admite.

image-set()proporciona una lista de posibles imágenes y permite al navegador seleccionar la más adecuada en función de la densidad de píxeles de la pantalla del usuario.

@font-facedefine una fuente que se puede descargar desde una fuente externa, aunque puede usar Google Fonts .

pointer-events: nonehace que el elemento ignore por completo el mouse; no responde a la guía, y los clics van directamente al elemento a continuación.

image-renderingpuede cambiar el método de interpolación de imagen al vecino más cercano, aunque el soporte del navegador todavía es irregular, y es posible que también deba habilitar algunas propiedades específicas del navegador.

clip-pathrecorta un elemento a una forma arbitraria. También hay maskuna máscara alfa arbitraria, pero el soporte del navegador no es uniforme, y este es generalmente un procedimiento bastante complicado.

Sintaxis y otras cosas

@supportsle permite escribir diferentes códigos CSS dependiendo de lo que admita el navegador, aunque en la actualidad está lejos de ser tan útil como lo sería en 2004.

A > Bselecciona niños inmediatos. A + Belige hermanos y hermanas. A ~ Bselecciona inmediatamente (por elemento) hermanos y hermanas. Los corchetes pueden hacer muchas cosas para elegir en función de los atributos; lo más obvio es input[type=checkbox], aunque se pueden hacer cosas interesantes con las partes correspondientes <a href>.

Ahora hay un montón de pseudo-clases. Muchos de ellos son para elementos de forma: :enabledy :disabled; :checkedy :indeterminate(también se aplica a <option>); :requiredy :optional; :read-writey :read-only; :in-range/ :out-of-rangey :valid/:invalid(para usar con la validación de formularios HTML5 del lado del cliente); :focusy :focus-within; y :default(que selecciona el botón de formulario predeterminado y cualquier casilla de verificación predefinida, botones de opción y <option>').

Para la aplicación a elementos específicos dentro de un conjunto de elementos relacionados tienen :first-child, :last-childasí como :only-child; :first-of-type, :last-of-typey :only-of-type(donde "tipo" significa el nombre de la etiqueta); es :nth-child(), :nth-last-child(), :nth-of-type()y :nth-last-of-type()(para seleccionar cada uno de los segundo, tercero, y así sucesivamente elementos).

:not()Invierte el selector. :emptySelecciona elementos sin hijos y sin texto. :targetselecciona el elemento al que saltó el fragmento de URL (por ejemplo, si la barra de direcciones muestraindex.html#foo, al mismo tiempo, se selecciona el elemento cuyo identificador es igual a foo).

::beforey ::afterahora con dos puntos para indicar que crean pseudo-elementos, y no solo definen el área del selector al que están unidos. ::selectionestablece cómo se muestra el texto seleccionado; ::placeholderCambia la apariencia del texto de reemplazo (en los campos de texto).

Las consultas de medios hacen un montón de cosas para que su página pueda adaptarse dependiendo de cómo se vea. La consulta de medios prefers-color-schemeinforma si el sistema del usuario está instalado en un tema claro u oscuro, por lo que puede configurarlo automáticamente en consecuencia.

Puedes escribir colores translúcidos como #rrggbbaao#rgba, además de utilizar las funciones rgba()y hsla().

Los ángulos se pueden describir como fracciones de un círculo completo con turn. Por supuesto, degy rad(y grad) también están disponibles.

Las variables CSS (oficialmente "propiedades personalizadas") le permiten establecer valores con nombre personalizados que se pueden utilizar en cualquier lugar. Puede usar esto para reducir la cantidad de manipulación de CSS necesaria en JavaScript (por ejemplo, para volver a pintar una parte compleja de una página configurando una variable CSS en lugar de configurar manualmente una serie de propiedades), o para tener un componente genérico que responda a las variables establecidas por el componente principal.

calc()calcula una expresión arbitraria y la actualiza automáticamente (aunque la necesidad de tales cálculos elimina parcialmentebox-sizing)

vw, vh, vmin, Yvmax le permiten especificar la longitud como un porcentaje de la anchura o la altura de la vista, o lo que sea mayor / menor.

Fuh! Estoy seguro de que me he olvidado mucho, y mis colegas complementarán la lista en los comentarios. Ahora puedo escapar de ver MDN e ir a la última parte divertida del artículo.

Cuadrícula moderna de miniaturas

Al final, llegamos a la forma final y objetivamente correcta de construir una cuadrícula de miniaturas: usando la cuadrícula CSS . La elección correcta se puede entender incluso porque tiene una cuadrícula en el nombre. Las características modernas de CSS son bastante buenas: te permiten decir lo que quieras, y funcionará de la manera que dijiste, en lugar de usar hechizos vudú oscuros.

Y aquí está lo simple que es:

.thumbnail-grid {
    display: grid;
    grid: auto-flow / repeat(auto-fit, minmax(250px, 1fr));
}

¡Hecho! Nos da una cuadrícula . Y tiene una gran cantidad de otras opciones para jugar con ellos, al igual que Flexbox, pero esta es la idea principal. Ni siquiera necesita diseñar los elementos en sí mismos; La mayor parte del trabajo de diseño se realiza en el contenedor.

La propiedad Shorthand gridparece un poco intimidante, pero solo porque es flexible. Él dice: llene la cuadrícula una línea a la vez, generando tantas líneas como sea necesario; haga tantas columnas de 250 px como quepa y divida el espacio restante entre ellas por igual.

Las cuadrículas CSS también son convenientes para colocar <dl> 's, lo que históricamente ha sido un gran dolor de cabeza: uno <dl> contiene cualquier número de <dt>, seguido de cualquier número de <dd> (incluido cero). Anteriormente, la única forma de darle estilo erafloat, lo que significaba un ancho fijo. Ahora puede especificar <dt> en la primera columna y <dd> en la segunda, y la cuadrícula CSS se encargará del resto.

¿Cómo se ve en una página real? Esa historia con la barra lateral? Mira qué simple es:

body {
    display: grid;
    grid-template:
        "header         header          header"
        "left-sidebar   main-content    right-sidebar"
        "footer         footer          footer"
        / 1fr           6fr             1fr
    ;
}
body > header {
    grid-area: header;
}
#left-sidebar {
    grid-area: left-sidebar;
}
/* ... etc ... */

Hecho. Fácil. Tampoco importa en qué orden enumerar los detalles en el marcado.

Por otra parte

La web sigue siendo un desastre. Muchos ni siquiera saben que flexbox y grid ahora son compatibles casi universalmente ; pero dado el tiempo que tardó en pasar de una especificación temprana a una implementación amplia, no puedo culparlos. Justo ayer vi un sitio pequeño completamente nuevo, que consistía principalmente en una enorme lista de "miniaturas" de varios anchos, ¡y utilizaba flotadores! Ni siquiera inline-block! No sé quién les enseñó estos trucos difíciles y por qué no dijo una palabra sobre flexbox.

Pero mucho peor es que todavía me encuentro regularmente con sitios que hacen todo el diseño usando JavaScript . Si usa el bloqueador de script uMatrixSu primera experiencia es un montón de texto superpuesto a otro montón de texto. ¿Es esto realmente un paso atrás? ¿Qué significa que el título y la barra lateral se colocan correctamente solo cuando se ejecuta el script? Esto no es como cargar una página sin CSS: en HTML simple, ¡nada puede superponerse por defecto! ¡Debes indicarlo intencionalmente!

Y luego está la web móvil, que, a pesar de todas las buenas intenciones, resultó ser esencialmente una mala idea. La idea era usar consultas de medios CSS en la pantalla de un teléfono móvil que coincida con un sitio normal, pero en su lugar, la mayoría de los sitios principales tienen versiones móviles completamente separadas. Esto significa que o el sitio móvil no tiene un montón de funciones importantes, y tiene que navegarlo torpemente en su teléfono, o la versión completa del sitio está llena de basura que nadie realmente necesita.

Incluso en versiones de Google Docs / Sheets / etc. para Android, por ejemplo, solo el 5% de las capacidades de las versiones web. No sé qué hacer con eso.

Opciones incumplidas para el futuro

No sé cómo CSS se desarrollará aún más, especialmente ahora que flexbox y grid han resuelto todos nuestros problemas. Soy vagamente consciente de que se está trabajando en un soporte matemático más extenso y, posiblemente, en algunas funciones para cambiar los colores, como en Sass. Hay una API de pintura que le permite generar un fondo sobre la marcha utilizando JavaScript utilizando la API de Canvas, que es ... bastante genial. Aparentemente, en la especificación ya pude attr()calcular el valor de cualquier propiedad. Esto parece genial e incluso puede permitirle implementar tablas HTML completamente en CSS, pero puede hacer lo mismo con las variables. Quiero decir, bueno, "propiedades personalizadas" (nombre oficial). Me preocupa más la :is()coincidencia de listas selectoras y subcuadrículaspara subredes anidadas.

Es mucho más fácil enumerar las cosas que estaban en los planes, pero que no se han implementado.

display: run-in ha sido parte de CSS desde la versión 2 (en el 98), pero en su mayoría no es compatible. La idea es que un bloque se inserte en el siguiente. Por ejemplo, este código:
```
<h2 style="display: run-in;">Title</h2>
<p>Paragraph</p>
<p>Paragraph</p>
```
Corresponde a tal salida:

Título Párrafo
Párrafo

Y, hmm, estoy empezando a entender por qué esto no es compatible. Solía existir en WebKit, pero probablemente era tan inoperable que se eliminó hace seis años.
« » 2000-, , . , ( ), . , , , , .

, Chrome , .
, CSS , CSS -. 2 :

… , .

, . . Firefox userContent.css URL- , .

, , Stylish, , (, - , . Stylus).

(, ) . :checked. :

<label><input type="checkbox"> Description of what this does</label>

… CSS <label>, . () jQuery :has():

/* checkbox label turns bold when checked */
label:has(input:checked) {
    font-weight: bold;
}

CSS 3, , , , . , , , , “”. :

label:subject input:checked {
    font-weight: bold;
}

!:

!label input:checked {
    font-weight: bold;
}

, , , , … :has()! , JavaScript, , , . , , .

<style scoped> , CSS <style> . , (, ) CSS . , , DOM .
, -, , HTML… , JavaScript , , . JS. .
<blink> <marquee>. RIP. , CSS-.

¿Todavía estás aquí? Todo ha terminado ahora. Tiempo de ir a casa.

Y, tal vez, haga su contribución a la confrontación con el monocultivo Blink usando Firefox , incluso en el teléfono , si por alguna razón no está usando un iPhone, lo que generalmente prohíbe otros motores de navegador. Es mucho peor que cualquier cosa que Microsoft haya hecho alguna vez, pero lo aceptamos por alguna razón ...

CSS antiguo y nuevo. Historia del diseño web