Open Time

Ou comment, parfois, on rencontre des régressions inattendues…

Je m’explique. Jusqu’il y a quelques temps (mois, années, je ne sais pas trop), les navigateurs acceptaient d’appliquer certains styles sur les éléments des listes déroulantes, comme celle qui, par exemple, permet de choisir une catégorie à affecter au billet en cours d’édition.

Du coup, on avait quelques règles de style basiques pour gérer la hiérarchie, puisque dans Dotclear une catégorie peut avoir des sous-catégories, qui elles-mêmes peuvent en avoir, etc.

Voilà les règles CSS en question :

option.sub-option1 {
	margin-left: .5em;
	}
option.sub-option2 {
	margin-left: 1.5em;
	}
option.sub-option3 {
	margin-left: 2.5em;
	}
option.sub-option4 {
	margin-left: 3.5em;
	}
option.sub-option5 {
	margin-left: 4.5em;
	}
option.sub-option6 {
	margin-left: 5.5em;
	}
option.sub-option7 {
	margin-left: 6.5em;
	}
option.sub-option8 {
	margin-left: 7.5em;
	}
option.sub-option1:before, option.sub-option2:before, option.sub-option3:before, option.sub-option4:before,
option.sub-option5:before, option.sub-option6:before, option.sub-option7:before, option.sub-option8:before {
	content: "\002022\0000a0";
	}

On gérait comme ça jusqu’à 8 niveau d’indentation en plus du niveau principal, en appliquant une marge gauche de plus en plus grande et en ajoutant devant le libellé de l’option une puce et une espace • .

Tout le monde était content, c’était joli, utilisable au clavier puisque les libellés étaient accessibles grâce à leur première lettre, tout allait bien dans le meilleur des mondes.

Sauf que, un beau jour, un quidam a décidé que non, finalement, fallait pas. Je ne sais plus si c’est Chrome ou Firefox qui a tiré le premier, mais toujours est-il qu’aujourd’hui, eh bien plus aucun navigateur récent n’accepte ces règles CSS pour les éléments <option> d’un <select>^[1].

Et boum, voilà l’affichage qu’on obtient maintenant, vertical, sans escalier, plus de jolie marge, pas plus de jolie puce, la loose quoi !

Alors j’ai rajouté quelques espaces devant les libellés des catégories des niveaux inférieurs — en attendant de trouver quelque chose de plus présentable et élégant —, mais bon, c’est pas la panacée à part que ça n’a pas l’air de gêner question accessibilité. On peut toujours parcourir cycliquement les options en tapant l’initiale désirée.

N’empêche que !