Le HTML d'une page définit un ordre, celui dans lequel le contenu est lu, parcouru au clavier, ou annoncé par un lecteur d'écran. Cet ordre correspond presque toujours à l'ordre visuel souhaité, sauf dans certains cas précis : un bouton mis en avant visuellement bien qu'il apparaisse plus tard dans le balisage, ou une image qui doit passer avant un texte sur desktop mais après lui sur mobile. order répond à ce besoin, mais avec une limite importante à connaître.
On la rencontre dans des mises en page où l'ordre visuel doit différer de l'ordre logique du contenu, par exemple pour des raisons de mise en avant marketing ou de contrainte visuelle ponctuelle.
Définition
order est la propriété qui change la position visuelle d'un élément dans un conteneur Flexbox ou CSS Grid, sans modifier sa position dans le document HTML. Elle accepte un nombre entier, positif, négatif ou nul.
.element {
order: 2;
}Tous les éléments d'un conteneur flex ou grid ont une valeur order de 0 par défaut. Un élément avec une valeur plus élevée se positionne visuellement après ceux avec une valeur plus basse, indépendamment de son ordre d'origine dans le HTML.
Comment le classement fonctionne
Le navigateur trie les éléments par ordre croissant de leur valeur order avant de les afficher. Deux éléments avec la même valeur order gardent leur ordre relatif d'origine issu du HTML.
.premier {
order: 3;
}
.deuxieme {
order: 1;
}
.troisieme {
order: 2;
}Même si .premier apparaît en premier dans le HTML, il s'affiche en dernier à l'écran, puisque sa valeur order est la plus élevée des trois. L'ordre visuel devient : .deuxieme, .troisieme, .premier.
Un exemple concret
Une mise en page qui affiche une image avant un texte sur grand écran, mais un texte avant l'image sur mobile, illustre un usage courant d'order combiné à une media query.
.section {
display: flex;
flex-direction: column;
}
.image {
order: 2;
}
@media (min-width: 768px) {
.image {
order: 0;
}
}Sur mobile, l'image passe après le texte grâce à order: 2. Sur grand écran, order revient à 0, et l'image reprend sa position d'origine dans le HTML, sans qu'aucun élément n'ait été déplacé dans le balisage.
Le piège accessibilité
order ne change que l'affichage visuel des éléments. L'ordre de lecture au clavier, avec la touche Tab, et l'ordre annoncé par un lecteur d'écran restent strictement celui du HTML, sans tenir compte des valeurs order posées en CSS.
order à de petits décalages ponctuels, et jamais à une réorganisation complète d'une page, limite ce risque.Un test rapide consiste à naviguer la page entièrement au clavier, sans toucher la souris, et à comparer ce que montre le focus visuel avec l'ordre visuel affiché à l'écran. Un écart significatif entre les deux est le signal qu'il faut revoir l'usage d'order sur cette mise en page, ou au minimum le limiter à un nombre très restreint d'éléments.
Questions fréquentes
order peut-il accepter des valeurs négatives ?Oui, une valeur négative comme order: -1 fait passer un élément avant tous les autres qui gardent la valeur par défaut de 0, sans qu'il soit nécessaire de renuméroter tous les autres éléments du conteneur avec des valeurs positives croissantes.
order fonctionne-t-il en dehors d'un conteneur flex ou grid ?Non, order n'a d'effet que sur les enfants directs d'un conteneur avec display: flex ou display: grid. Posée sur un élément en dehors de ce contexte, elle ne produit aucun effet visible, exactement comme align-self en dehors d'un conteneur flex ou grid.
order complètement pour des raisons d'accessibilité ?Pas complètement, mais avec prudence. order reste utile pour de petits ajustements visuels ponctuels, en particulier avec une media query qui ne change qu'un ou deux éléments. Pour une réorganisation plus large et durable du contenu, il vaut presque toujours mieux revoir directement l'ordre du HTML plutôt que de compenser en CSS.