order
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.
La propriété CSS order définit l'ordre dans lequel un élément est disposé dans un conteneur flexible ou une grille. Les éléments d'un conteneur sont triés par valeur croissante de order, puis par leur ordre dans le code source. Les éléments auxquels aucune valeur explicite de order n'est attribuée reçoivent la valeur par défaut de 0.
Exemple interactif
order: 0;
order: 3;
order: -1;
order: 2;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">Boîte 1 :</div>
<div style="order: 1">Boîte 2 : <code>order: 1;</code></div>
<div style="order: 2">Boîte 3 : <code>order: 2;</code></div>
<div style="order: 2">Boîte 4 : <code>order: 2;</code></div>
<div style="order: 3">Boîte 5 : <code>order: 3;</code></div>
</section>
.default-example {
max-height: 300px;
display: flex;
flex-flow: column;
}
.default-example > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
margin: 0.5rem;
padding: 0.5rem;
flex: 1;
}
#example-element {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
}
#example-element::after {
content: attr(style);
outline: 2px dashed;
font-family: monospace;
}
Dans la démonstration ci-dessus, sélectionnez les options sur le côté gauche pour changer la valeur de la propriété order de la boîte rose. Les boîtes bleu clair ont des valeurs order fixes.
Gardez à l'esprit l'effet de l'ordre dans le code source. Par exemple, lorsque order: 2; est sélectionné, la boîte rose est placée avant les deux boîtes bleues avec order: 2;. Cela est dû au fait que la boîte rose apparaît avant les boîtes bleues dans le code source.
Syntaxe
/* Valeurs de type <integer> */
order: 5;
order: -5;
/* Valeurs globales */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
order: unset;
Puisque order est uniquement destiné à affecter l'ordre visuel des éléments et non leur ordre logique ou de tabulation, il ne doit pas être utilisé sur des médias non visuels tels que la voix (angl.).
Défini dans le module d'affichage CSS, cette propriété n'affecte que les éléments de grille et flexible. Lorsque order est défini sur un élément dont la propriété display du parent ne crée pas un conteneur flex ou grille, il n'a aucun effet.
Valeurs
<integer>-
Représente le groupe d'ordres à utiliser pour l'élément.
Accessibilité
L'utilisation de la propriété order crée une déconnexion entre la présentation visuelle du contenu et l'ordre du DOM. Cela affectera négativement les utilisateur·ice·s malvoyant·e·s naviguant à l'aide de technologies d'assistance telles qu'un lecteur d'écran. Si l'ordre visuel diffère de l'ordre du DOM, vos utilisateur·ice·s auront des expériences différentes en fonction de la manière dont ils accèdent à votre contenu.
Définition formelle
| Valeur initiale | 0 |
|---|---|
| Applicabilité | éléments flexibles, éléments de grille, ainsi que les enfants absolument positionnés de conteneurs flexibles et de grille |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | un entier |
Syntaxe formelle
order =
<integer>
<integer> =
<number-token>
Exemples
Ordonner les éléments dans un conteneur flexible
Dans cet exemple, nous créons une disposition classique à deux barres latérales.
HTML
Nous incluons un en-tête, un pied de page et une zone de contenu principale. La zone de contenu principale comprend un article et deux barres latérales. Notez leur ordre ! Nous utiliserons la propriété CSS order pour modifier leur ordre visuel.
<header>En-tête</header>
<main>
<article>Article</article>
<nav>Navigation</nav>
<aside>Barre latérale</aside>
</main>
<footer>Pied de page</footer>
CSS
Nous mettons en forme la zone principale en utilisant les fonctionnalités du module de mise en page flexible ; en définissant display sur flex, l'élément HTML <main> devient un conteneur flex. Par défaut, cela crée des éléments flex de taille verticale égale. Les barres latérales reçoivent toutes deux une width absolue, tandis que l'élément HTML <article> consommera tout l'espace libre positif avec un facteur flex-grow défini via le raccourci flex.
Nous définissons ensuite différentes valeurs de la propriété order sur chacun des trois enfants du conteneur flex ; cela signifie que le CSS définit l'ordre visuel de ce composant plutôt que l'ordre dans lequel il apparaît dans le HTML.
main {
display: flex;
text-align: center;
}
main > article {
flex: 1;
order: 2;
}
main > nav {
width: 200px;
order: 1;
}
main > aside {
width: 200px;
order: 3;
}
Résultat
L'élément <article> apparaît en premier dans l'ordre source mais est visuellement rendu au centre.
Spécifications
| Spécification |
|---|
| CSS Display Module Level 3 # order-property |