Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

flow-into et flow-from - Mise en page par régions.

flow-from
flow-into

Résumé des caractéristiques de la propriété flow-from

Description rapide
Définit quel flux de contenu doit être utilisé par l'élément.
Statut
Problèmes de compatibilité
Type de valeur
Id
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété flow-from passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Régions
Références (W3C)
Statut du document:: WD (document de travail)

Description des propriétés flow-into et flow-from.

Attention ! Ces deux propriétés et cette technique de mise en page ne sont pas encore prises en charge par les navigateurs (2022).

Les deux propriétés flow-from et flow-into sont utilisables dans le contexte d'une mise en page par flux nommés, qu'on peut aussi désigner par "mise en page par régions". On appelle "flux" du contenu brut : texte, images, tableaux, sans mise en page.

  • flow-from définit le nom du flux à récupérer. Cette propriété est à appliquer aux éléments qui doivent recevoir, et mettre en forme, le contenu du flux.
  • flow-into indique dans quel flux doit être déversé le contenu de ou des éléments. Cette propriété est à appliquer aux éléments qui contiennent le contenu à mettre en forme.

Pour plus de précisions sur cette technique de mise en page par flux nommés, reportez vous à la présentation plus bas sur cette page.

Syntaxes pour flow-into et flow-from.

Syntaxe de flow-from et flow-intoSchéma syntaxique des propriétés CSS flow-from et flow-into (mise en page par régions ou par flux nommés). flow-from: flow-from: flow-into: flow-into: none none id id none none id id ; ; ; ;
  • flow-into: none;

    La propriété flow-into doit être appliquée aux éléments qui délimitent le contenu. mon-flux étant un identifiant choisi par le développeur.

  • flow-into: mon-flux;

    La propriété flow-into doit être appliquée aux éléments qui délimitent le contenu. mon-flux étant un identifiant choisi par le développeur.

  • flow-from: none;

    La propriété flow-from doit être appliquée aux éléments qui vont recevoir le contenu et le mettre en page. mon-flux doit être identique à celui utilisé avec flow-into.

  • flow-from: mon-flux;

    La propriété flow-from doit être appliquée aux éléments qui vont recevoir le contenu et le mettre en page. mon-flux doit être identique à celui utilisé avec flow-into.

  • flow-from: initial; flow-from: inherit; flow-from: revert; flow-from: revert-layer; flow-from: unset;

    La valeur initiale est : none.

Présentation de la mise en page par flux nommés.

Traditionnellement, les éléments présents sur une page web ont un contenu mis en forme par les règles CSS associés à ces éléments. Chaque élément s'occupe donc à la fois de délimiter un contenu et d'assurer, via CSS, la mise en forme de ce contenu.

Dans la mise en forme par flux nommés, il y a séparation entre les éléments produisant du contenu et les éléments assurant la mise en forme. Cette technique est plus proche de ce qui se pratique en imprimerie : une maquette dans laquelle on vient déverser un texte ou des images.

La structure d'un document HTML ressemblera donc à l'exemple ci-après. Les deux premiers <div> sont les fournisseurs de contenu, les quatre suivants s'occupent de la mise en forme.

<div id="contenu1"> ... blablabla ... ></div> <div id="contenu2"> ... blablabla ... ></div> <div id="region1"></div> <div id="region2"></div> <div id="region3"></div> <div id="region4"></div>

Et le CSS pour mettre en œuvre la mise en forme par flux sera la suivante (bien entendu il y aura aussi des règles de mise en forme appliquées aux éléments #region1 à #region4).

#contenu1,#contenu2 { flow-into: flux1; (1) } #region1,#region2,#region3,#region4 { flow-from: flux1; (1) }

(1) flux1 est un identifiant choisi par le développeur. Il doit simplement respecter les règles de nommage habituelles du CSS. Bien entendu c'est le même identifiant qui doit être fourni à flow-into et à flow-from.

Les éléments sur lesquels la propriété flow-into a été appliquée ne sont pas affichés. Leur contenu peut apparaître dans les autres éléments qui ont été associés par flow-from au même flux.

Les changements de régions peuvent être automatiques (lorsqu'une région est pleine, le contenu se déverse dans la suivante), soit gérés par les propriétés break-before, break-after et break-inside. L'ordre des régions est déterminé par leur emplacement dans le document HTML : dans notre exemple la première région est region1, suivie de region2, puis region3, et enfin region4.

Exemple concret.

Nous souhaitons obtenir la mise en page suivante. Le bandeau d'en-tête, la publicité et l'index sont des éléments fixes ou générés indépendamment du contenu spécifique à la page. Le contenu lui-même doit se répartir dans les éléments notés Intro, 1, 2, 3, et 4.

Mise en page par flux nommés

Voici ce que donne la mise en page réalisée avec des styles CSS. Nous avons utilisé une grille pour positionner les différents blocs. (Plus d'infos sur les grilles, voir la page grid). Trois éléments (article1, article2 et article3 fournissent le contenu (du faux texte lorem ipsum). Le contenu aurait pu être généré dans un seul élément, cela ne changerait pas grand chose. Comme votre navigateur ne traite probablement pas les mises en page par flux nommés, ces textes apparaissent à la suite, sans aucune mise ne page. Lorsque tout ira bien, ils viendront s'incruster dans les différents blocs de la grille.

Bandeau d'en-tête
Publicité
Index

Article 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet vehicula erat. Etiam luctus magna nulla, eget luctus nisi ornare ut. Vivamus ut nunc nisi. Nam ut ligula ornare, ullamcorper arcu in, consequat magna. Nullam sed porta ex. Praesent venenatis accumsan leo, sed ultricies dolor tristique ac. Donec porttitor enim vel ultrices scelerisque.

Article 2

Proin vitae arcu ullamcorper, rutrum enim ut, suscipit mi. Praesent posuere maximus erat, ut consectetur elit posuere a. Maecenas sit amet libero commodo, sodales eros quis, tincidunt lacus. Integer nunc nunc, euismod mollis ipsum mattis, cursus vestibulum tellus. Suspendisse fermentum erat felis, in blandit ante egestas sed. Aenean ultricies, tellus in scelerisque pulvinar, massa mi malesuada dolor, vel consequat nibh velit sed erat. Etiam porttitor enim magna. Aenean quis massa tristique, eleifend metus quis, commodo justo. Cras eget risus semper mauris vehicula pretium nec vel ipsum.

Article 3

Praesent gravida enim a ullamcorper eleifend. Nulla porttitor nec purus a finibus. Ut non sodales neque. In non eros a tortor rhoncus condimentum. Cras eu nunc sit amet sapien sagittis tincidunt eget non est. Aliquam erat volutpat. Fusce et sem pellentesque, eleifend tellus sed, molestie turpis. Etiam purus urna, laoreet mollis vehicula sit amet, auctor non nunc. Morbi condimentum purus sit amet ligula dignissim aliquet commodo mollis libero. Nullam ultricies bibendum lacus, id mollis ligula sagittis at. Integer lorem lorem, laoreet et mauris sed, sollicitudin consectetur lorem. Integer nibh sem, maximus eu sodales eget, mattis eget lorem. Vivamus sit amet mattis nisl. Nam sagittis lorem et viverra faucibus.

 

Avantage de la mise en page par flux nommés.

La mise en page par flux nommés sépare totalement le contenu de la mise en page. C'est particulièrement intéressant lorsque le contenu est généré par programme. Ce dernier n'a pas à s'occuper de répartir le contenu entre les différents éléments de mise en page.

Animation des propriétés.

Les propriétés flow-into et flow-from peuvent être animées. Le résultat sera un changement du contenu, la mise en page restant identique.

Prise en charge par les navigateurs (compatibilité).

Ces deux propriétés, ainsi que la mise en page par flux nommés ne sont pas encore prises en charge par les navigateurs (2022).

1
Mise en page par régions (flux nommés)
Estimation de la prise en charge en pourcentage du parc actuel.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que flow-from.

Les spécifications CSS éditées par le W3C sont organisées en modules. flow-from fait partie du Module CSS - Régions (CSS Regions Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit dans quel flux doit être déversé le contenu de l'élément.