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.
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.
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.
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).
(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.
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.
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
Version testée : 109 (2023)
Baidu Browser
Version testée : 13.18 (2022)
Chrome
Version testée : 109 (2023)
Chrome pour Androïd
Version testée : 109 (2023)
Edge
Version testée : 109 (2023)
Firefox
Version testée : 109 (2023)
Firefox pour Androïd
Version testée : 107 (2022)
Internet Explorer
Version testée : 11 (2013)
°
KaiOS Browser
Version testée : 2.5 (2018)
Opéra
Version testée : 92 (2022)
Opéra Mobile
Version testée : 72 (2022)
QQ Browser
Version testée : 13.1 (2022)
Safari
Version testée : 16.3 (2023)
Safari sur IOS
Version testée : 16.3 (2023)
Samsung Internet
Version testée : 19.0 (2022)
Oméra mini
Version testée : Toutes
Voir le site Caniuse.com pour plus d'informations de compatibilité.
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.