Resumen

  • El primer borrador de trabajo del W3C sobre Media Queries salió el 4 de abril de 2001. screen y print ya separaban tipos de medio; las nuevas expresiones afinaban la pregunta con características del entorno.
  • La recomendación candidata llegó el 8 de julio de 2002 y la recomendación definitiva el 19 de junio de 2012. Una hoja podía elegir reglas según anchura, altura o color para presentar un documento sin multiplicar su contenido.

En la pantalla grande, el artículo parecía tener un contrato con el universo: tres columnas ordenadas, menú en su sitio, titulares con espacio para respirar. Alguien arrastró el borde de la ventana y rompió el acuerdo. Las columnas empezaron a disputarse centímetros y la navegación se sentó encima del texto como un invitado sin vergüenza. El artículo seguía diciendo exactamente lo mismo. Lo que no servía era el traje.

El primer borrador W3C de Media Queries, del 4 de abril de 2001, explicaba de dónde venía el problema. HTML4 y CSS2 ya distinguían medios como screen y print. La imprenta podía recibir estilos distintos de los de una pantalla. Pero «pantalla» abarcaba ventanas muy diferentes. Preguntar solo por el medio era como pedirle al sastre una chaqueta «para una persona» y dar por resueltas las medidas.

Las expresiones de características hicieron la pregunta concreta. La anchura y la altura disponibles, el color o la resolución podían formar parte de una condición. min-width podía señalar que una disposición necesitaba cierto espacio; max-width, que otra resultaba apropiada al estrecharse la vista. La hoja de estilo decidía qué hacer con la respuesta. El navegador aportaba las medidas del entorno en el que se estaba leyendo.

También había papel en la historia. La impresora no necesitaba un menú desplegable disfrazado de titular, ni una columna lateral que empujara el texto hasta dejarlo en una tira. Una condición para impresión podía dar al artículo una forma útil en la página física. Otra, para una ventana estrecha, podía poner las columnas en fila. Las frases del reportaje no tenían que ser redactadas de nuevo cada vez que cambiaba el recipiente.

La recomendación candidata de 8 de julio de 2002 avanzó el modelo hacia una especificación preparada para implementarse. Candidata era una etapa del proceso, no un certificado de que todos los navegadores se comportaban igual aquel verano. Lo que dejaba claro era la idea central: más precisión para escoger presentación, con el contenido compartido.

La recomendación W3C del 19 de junio de 2012 fijó el mecanismo. Un tipo de medio podía acompañarse de cero o más expresiones; anchura, altura y color figuraban entre las características. Los ejemplos con min-width y max-width mostraban cómo escribir un intervalo de tamaños de ventana. También trataban la anchura del papel. El editor ya podía situar el cambio de columnas donde estas se quedaban sin aire, en lugar de rendir homenaje a un modelo de aparato que pronto saldría del escaparate.

Hay una precisión capaz de arruinar una discusión mal planteada: el px de la consulta es un píxel CSS. No equivale a contar uno por uno los puntos físicos de la pantalla. Dos dispositivos con densidades muy distintas pueden ofrecer a la maquetación una anchura CSS parecida. El buen punto de corte responde al espacio que el contenido necesita para trabajar, no al número más brillante de una caja de venta.

La recomendación también estableció operadores como only y not y explicó qué hacer con características desconocidas. Esperaba que los agentes de usuario revisaran las consultas y recompusieran la página cuando cambiara el entorno, aunque esa reacción no quedó formulada como obligación absoluta. En la mesa de edición conviene mirar qué hace cada página real al estrecharse y al imprimirse. La hoja puede cumplir la gramática y aun así quedar vestida para otra fiesta.

Media Queries repartió el poder con bastante sensatez. Quien diseña la página escribe las condiciones y el aspecto de cada caso. El navegador determina si se cumplen en la ventana del lector. El lector puede cambiar esa ventana y descubrir si el diseñador midió bien. Cuando la página se puso estrecha, el texto conservó su voz; CSS fue a cambiarse de ropa.