Résumé

  • Le premier projet public du W3C, paru en juin 2023, décrit le positionnement et la taille d’un élément flottant par rapport à un élément d’ancrage ailleurs sur la page, avec des positions de repli en cas de débordement.
  • Les versions de 2024 précisent le choix de l’ancre par défaut et la famille position-try : le site propose des emplacements, le navigateur mesure lequel peut tenir dans l’espace disponible.

Un formulaire demande une information obscure et place un petit bouton d’aide à côté du champ. Le lecteur le touche. La bulle explicative devrait apparaître à portée des yeux, liée à ce bouton précis. Au milieu d’un grand écran, la mettre à droite semble une excellente idée. Sur un téléphone, le même bouton se retrouve au bord de la page et la bulle expédie sa phrase la plus utile hors de l’écran. Le site a gardé le lien avec le bouton et perdu le lecteur. Dans un coin, un développeur recompte des pixels comme un comptable surpris par sa caisse.

Le premier projet public CSS Anchor Positioning du W3C, daté du 29 juin 2023, donne à cette scène une géométrie déclarative. Un élément positionné peut prendre sa taille et sa position par rapport à un ou plusieurs éléments d’ancrage situés ailleurs dans la page. anchor-name permet de nommer ce repère ; anchor() et anchor-size() utilisent sa position ou ses dimensions. La bulle reste sa propre boîte, mais elle dispose d’une adresse : le bouton auquel elle se rapporte. Si la mise en page bouge, elle a un point de référence qui bouge avec elle.

Le texte de juin 2023 prévoyait aussi le moment où la place manque. position-fallback et un bloc @position-fallback permettaient de décrire des emplacements candidats. Si la bulle déborde du bloc qui la contient, le navigateur peut essayer la solution suivante. Le site choisit le bon bouton et les côtés où sa phrase restera compréhensible ; le navigateur dispose des dimensions qu’il calcule déjà pour dessiner la page. Une bulle partie à gauche parce que la droite est pleine suit donc une décision prise avant la catastrophe.

Le vocabulaire a changé rapidement. Les projets du 14 mars et du 26 mars 2024 ont rendu l’ancre par défaut explicite avec position-anchor et nommé les autres places position-try-options. Le projet d’octobre les appelait position-try-fallbacks. Cette succession tient en une ligne ; elle ne mérite pas quatre fois la même scène. Le progrès utile est la possibilité de désigner clairement le repère d’une bulle et de décrire ce qui se passe quand son premier côté est bouché.

L’exemple donné par le projet d’octobre est presque une petite bande dessinée CSS. Une aide se place au-dessus de son bouton avec position-area: block-start. Si le haut de la fenêtre la coupe, position-try: flip-block la fait passer dessous. Le bouton ne bouge pas et la phrase reste entière. Pour le lecteur, c’est une banalité bienvenue ; pour une interface bâtie sur des offsets fixes, c’est une soirée de calculs en moins.

Une liste déroulante pose un autre problème. Elle peut tenir de deux côtés, mais n’offrir qu’une minuscule fenêtre de lecture du côté préféré. position-try-order permet de garder l’ordre indiqué ou de privilégier la solution qui laisse le plus de largeur ou de hauteur. Le texte du W3C montre une liste ancrée à son bouton qui choisit l’espace vertical le plus généreux. Sauver une infobulle d’une ligne et rendre une liste de vingt entrées utilisable demandent des choix de place différents ; la même famille de règles les exprime.

La page continue pourtant à bouger après l’ouverture. Une ancre peut se trouver dans un conteneur que l’on fait défiler, tandis que sa bulle est positionnée ailleurs. Le projet d’octobre consacre une section au décalage dû au défilement et aux cas où la taille d’une boîte peut dépendre d’une ancre qui défile. Il cherche à garder ces mouvements compatibles avec le défilement traité hors du calcul général de mise en page. Si la bulle accompagne son bouton dans un long formulaire, chaque coup de molette ne devrait pas convoquer toute la page au chantier.

Enfin, une proximité visible n’est pas une relation que tout le monde peut percevoir. La section consacrée à l’accessibilité rappelle que CSS Anchor Positioning n’établit pas à lui seul un lien sémantique entre la bulle et son bouton. La Popover API peut relier le bouton déclencheur au panneau et en faire son ancre implicite. Dans d’autres montages, aria-describedby ou aria-details peuvent exprimer cette relation. Sans ce lien, la phrase se trouve au bon endroit pour les yeux et au milieu de nulle part pour un lecteur d’écran.

L’historique de publication du W3C suit la route du premier projet de 2023 aux précisions de 2024. La récompense tient dans une scène ordinaire : le bouton reste au bord du téléphone, l’explication passe de l’autre côté et personne n’a besoin de deviner la fin de la phrase.