Résumé

  • Le premier brouillon W3C sur les Media Queries date du 4 avril 2001. Les types de média screen et print existaient déjà; le projet leur ajoutait des questions précises sur le milieu d’affichage.
  • Un texte candidat est paru le 8 juillet 2002, puis la recommandation le 19 juin 2012. Largeur, hauteur et couleur pouvaient commander des règles de présentation sans imposer plusieurs versions du contenu.

Sur l’écran large, la page du journal était irréprochable. Trois colonnes, une navigation tranquille, un titre qui prenait ses aises. Quelqu’un a tiré le bord de la fenêtre vers l’intérieur. La troisième colonne s’est invitée chez la deuxième, le titre a perdu sa chaise et le menu a réclamé un médiateur. Le texte n’avait pourtant pas bougé d’une virgule. C’était la mise en page qui refusait de croire à l’existence d’une fenêtre plus étroite.

Le premier brouillon de travail W3C, daté du 4 avril 2001, partait d’une garde-robe déjà ouverte. HTML4 et CSS2 savaient distinguer l’écran de l’imprimante grâce aux types de média. Mais deux écrans pouvaient offrir des espaces très différents. Leur coller la même étiquette screen revenait à commander un costume en demandant seulement si le client comptait le porter dehors.

Le nouveau mécanisme permettait d’ajouter une condition. Une feuille de style pouvait regarder la largeur ou la hauteur disponible, la présence de couleur, la résolution ou la taille du papier. Une expression comme min-width répondait à une question concrète : reste-t-il assez de place pour cette disposition ? Le navigateur connaissait la pièce; l’auteur fixait la règle de couture. Le document, lui, gardait ses phrases.

Le papier donnait un bon test à cette idée. Une navigation à plusieurs niveaux sert sur un écran, beaucoup moins sur une feuille posée à côté d’une tasse de café. Une règle réservée à l’impression pouvait retirer les accessoires et laisser le corps de l’article respirer. Une autre règle, pour une fenêtre étroite, pouvait empiler les colonnes. On n’avait pas trois enquêtes à rédiger, mais trois façons de disposer la même enquête.

La recommandation candidate du 8 juillet 2002 a donné au modèle un texte plus mûr pour les implémentations. Cette date marque une étape dans la normalisation. Elle ne raconte pas à elle seule quand tous les navigateurs l’ont adopté. Ce que le texte précise, c’est le partage du travail : les conditions sont écrites dans la feuille de style et évaluées dans l’environnement où le document s’affiche.

La recommandation W3C du 19 juin 2012 a fixé la référence. Un type de média peut être suivi d’expressions sur des caractéristiques comme largeur, hauteur et couleur. Les exemples de plage avec min-width et max-width permettent de dessiner une disposition pour l’espace dont elle dispose réellement. Les conditions d’impression regardent, elles aussi, la largeur pertinente. Le point de rupture cesse d’être un hommage à un appareil à la mode : il devient l’endroit où une page commence à se bousculer.

Le px de ces conditions désigne un pixel CSS. Compter les points physiques d’un écran ne suffit donc pas à expliquer la largeur que voit la mise en page. Un affichage très dense et un affichage moins dense peuvent présenter au CSS des mesures comparables. Pour décider quand une colonne doit céder sa place, mieux vaut examiner la colonne que la fiche publicitaire de l’appareil.

Le texte de 2012 détaille aussi only, not et le traitement des caractéristiques inconnues. Il attend des agents utilisateurs qu’ils réévaluent les requêtes quand l’environnement change, sans ériger chaque réaction immédiate en obligation absolue. La décision éditoriale reste très matérielle : regarder ce qui arrive au titre, à l’image, au tableau, au menu quand la fenêtre bouge. Une syntaxe correcte n’empêchera pas une mauvaise coupe.

Les Media Queries ont donné un mètre au CSS. Elles ne choisissent pas la largeur idéale d’un article à la place de sa rédaction. Celle-ci décide du moment où une disposition cesse de servir le récit; le navigateur vérifie si ce moment est arrivé chez le lecteur. Quand la fenêtre rétrécit, la page peut changer de veste sans changer de sujet.