Reading-order - Propriété CSS

Description de la propriété reading-order.

⚠

La propriété reading-order n'est reconnu ni par Firefox  , ni par Safari  . Il faut être prudent également sur les navigateurs de mobile.

reading-order définit l'ordre de parcours des éléments avec la touche de tabulation, en général les descendants d'un container grille, bloc ou flex-box. reading-order s'applique sur les éléments à ordonner. Sur le conteneur reading-flow doit avoir une valeur différente de normal.

Si reading-order n'est pas défini ou a une valeur égale à 0, les éléments sont parcourus dans l'ordre défini par reading-flow du conteneur. Si reading-flow n'est pas défini non plus ou a une valeur qui est normal les éléments sont parcourus dans l'ordre d'apparition dans le code source.

reading-order n'a aucun effet sur l'affichage.

L'attribut tabindex.

Cet attribut HTML, avec une valeur de 0 rend accessible les éléments à la touche de tabulation. Ils sont alors pris en charge par reading-order. Par contre, les valeurs positive pour tabindex seront ignorées si reading-order est présent.

Voir aussi la propriété reading-flow qui définit l'ordre global de parcours.

Valeurs pour reading-order.

• reading-order: 4;

  Cet entier définit l'ordre de tabulation. Avec la touche de tabulation, les éléments sont parcourus dans l'ordre croissant. A défaut, ou si plusieurs éléments ont le même reading-order, c'est l'ordre du document source qui est utilisé.

  L'exemple ci-dessous montre le parcours de ces éléments qui ont tous un reading-order différent. La propriété reading-flow du conteneur a été fixée à source-order. Cliquez sur "Un" puis utilisez la touche de tabulation.
• reading-order: initial; (0) reading-order: inherit; reading-order: revert; reading-order: revertLayer; reading-order: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de reading-order.

La propriété reading-order peut théoriquement s'animer mais l'animation n'est pas visible : il faut parcourir les composants avec la touche de tabulation pour se rendre compte que l'ordre a changé. Et bien sûr le conteneur doit avec une valeur différente de normal pour reading-flow.

Exemple interactif avec la propriété reading-order.

Après avoir saisi une valeur pour reading-order, utilisez la touche de tabulation pour atteindre le "Un". La valeur de reading-order a été appliquée au troisième élément (celui en bleu).

Compatibilité des navigateurs avec reading-order.

La propriété reading-order est bien reconnue par les navigateurs, à l'exception de Firefox   et Safari  .

1

Propriété
reading-order

Estimation de la prise en charge globale.

67%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Chrome

Edge

Opéra

Androïd Brower

Chrome pour Androïd

Firefox

Firefox pour Androïd

KaiOS Browser

Safari sur IOS

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété reading-order.

• Module CSS - Affichage - Niveau 4

  Introduction de la propriété reading-order qui, en association avec reading-flow, gère l'ordre de tabulation des éléments.
  

  19 Décembre 2024

  Document de travail.

  

  

  

Voir aussi, à propos de l'affichage.

Les propriétés qui concernent l'affichage (display, order, etc.) sont regroupées dans un module de spécification dénommée CSS Display Module. En voici le contenu :

Propriétés :