Reading-flow - Propriété CSS

Schéma de la syntaxe de reading-flow.

Description de la propriété reading-flow.

⚠

reading-flow est encore peu reconnue par les navigateurs, en particulier par Firefox  .

Avec un flex-box ou une grille il est très facile de disposer les éléments librement, sans tenir compte de l'ordre du document source (HTML}). Cette fonctionnalité, très pratique pour le développeur du site, peut être assez perturbante pour le lecteur, ce dernier s'attendant à ce que les éléments soit parcourus tels qu'il les voit avec la touche de tabulation. La propriété reading-flow définit l'ordre de parcours des éléments d'un flex-box ou d'une grille avec la touche tabulation.

Cette propriété s'applique au conteneur.

L'utilisation de l'attribut tabindex dans le code source peut entrer en conflit avec reading-flow. Avec une valeur négative, tabindex sort l'élément du circuit des élément atteignables avec tabulation. La valeur 0 et inopérante, et une valeur positive est déconseillée. Il préférable de se fier aux propriété CSS plutôt que de coder les déplacements avec des valeurs positives de tabindex.

Voyez aussi la propriété reading-order qui est complémentaire;

Valeurs pour reading-flow.

⚠ Les exemples de ce chapitre ne fonctionnent pas sur Firefox   ou Safari  .

• reading-flow: normal;

  Tous les éléments ont lus dans l'ordre d'apparition dans le code source quelque soit l'ordre demandé pour l'affichage.

  La liste ci-dessous a été créé dans l'ordre où vous le voyez. Il s'agit d'un bloc contenant des éléments inline-block. L'élément numéro 4 a sa propriété reading-order fixé à 10 mais cela ne change rien avec la valeur normal pour reading-flow. Utilisez la touche de tabulation pour parcourir les éléments et constater qu'ils sont bien parcourus dans l'ordre normal.

  Cette valeur s'applique à tous types d'éléments.

  Block
  reading-flow:normal;
• reading-flow: source-order;

  Les éléments seront parcourus dans l'ordre d'apparition dans le source, mais la propriété reading-order est prise en compte. Cela se voit à l'élément numéro 4 dont la propriété reading-order est toujours fixée à 10.

  Cette valeur s'applique à tous types d'éléments.

  Block
  reading-flow:source-order;
• reading-flow: flex-visual;

  flex-visual n'est valable que sur un conteneur flex. Pour les autres conteneur cette valeur est équivalente à normal. Provoque un parcours dans l'ordre visuel des éléments sauf si la propriété reading-order a été utilisée. Dans ce cas, elle est prioritaire. Utilisez la touche de tabulation pour constater le comportement.

  L'exemple ci-dessous est toujours en flex-direction:row-reverse et, en plus, l'élément numéro quatre a reçu la propriété reading-order:10

  Flex
  reading-flow:flex-visual;
• reading-flow: flex-flow;

  flex-visual n'est valable que sur un conteneur flex ; pour les autres types d'éléments, elle est équivalente à normal. Cette valeur provoque un parcours dans l'ordre où ils apparaissent dans le flex-box. La propriété reading-order est là aussi prioritaire.

  Flex
  reading-flow:flex-flow;
• reading-flow: grid-rows;

  Cette valeur ne s'applique que à un conteneur grille, équivalente à normal pour les autres types d'éléments. Les éléments enfants sont parcourus lignes après ligne. Si la propriété reading-order est utilisée sur certains éléments, ceux-ci respectent la valeur donnée. C'est le cas de l'élément numéro quatre.

  Grid
  reading-flow:grid-rows;
• reading-flow: grid-columns;

  Cette valeur ne s'applique que à un conteneur grille. Les éléments sont parcourus colonne après colonne. La aussi la propriété reading-order peut ordonner les éléments différemment. L'élément numéro quatre à reçu reading-order:10.

  Grid
  reading-flow:grid-columns;
• reading-flow: grid-order;

  La valeur grid-order s'applique uniquement aux conteneurs grilles. Les éléments sont parcourus dans l'ordre normal de la grille, sauf si la propriété Reading-order spécifie un ordre différent, pour la totalité des éléments ou pour certains seulement.

  Grid
  reading-flow:grid-order;
• reading-flow: initial; (normal) reading-flow: inherit; reading-flow: revert; reading-flow: revertLayer; reading-flow: unset;

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

Exemple d'animation de reading-flow.

La propriété reading-flow ne peut pas être animée.

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

Après avoir choisi une valeur, utilisez la touche de tabulation pour voir dans quel ordre sont parcourus les éléments. Le numéro 3 a toujours une propriété reading-order fixée à 7.

Compatibilité des navigateurs avec reading-flow.

La propriété reading-flow commence à être bien reconnue, sauf par Firefox   et Safari  .

1

Propriété
reading-flow

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-flow.

• Module CSS - Affichage - Niveau 4

  Introduction de la propriété reading-flow, rendue nécessaire par la souplesse des flex-box et des grilles pour réorganiser leurs enfants.
  

  19 Décembre 2024

  Document de travail.

  

  

  

Voir aussi, à propos de l'affichage des éléments.

Tout ce qui concerne l'affichage des éléments, leur ordre d'affichage, etc. est regroupé dans un modèle dénommé CSS Display Module. En voici une description :

Propriétés :