Pour remonter au début : https://mastodon.design/@julieblanc/116810804014194473

Suite: https://mastodon.design/@julieblanc/116817212599103945
(presque réussi à faire un vrai fil!)

C’est fini, mais la suite arrive! Il y aura une publication pour faire suivre ces deux merveilleuses journées d’études 📖
En attendant vous pouvez suivre les activités du projet wysiwyg ici → https://wysiwyg.ch/

Merci aux conférencier·ères, aux interprètes,
au public et surtout les co organisatrice, Clémence Imbert et @nolwennm

Question about taking performance into account when implementing CSS layouts → 15 years ago it was a problem; now
"JavaScript has become the problem"

Conclusions from Bert Bos
1. CSS is more extensible than I expected
2. CSS is more durable than I expected
3. Prioritizing GUI layout has delayed advanced typography
4. Grid-like layouts are taking longer than I expected
5. There are still many unrealized ideas out there

→Anchor Positioning (2023)

Anchor Positioning, by Tab Atkins, tries to provide similar 'rubber band' effects, but for absolutely positioned elements rather than floats. You define an element to be an anchor by giving it a name, and then other elements can be positioned above, below, next to or on top of the anchor element. If the anchor element moves, the anchored element moves with it. And you can specify fallback positions in case there is no room on the chosen side of the anchor.

→ Page floats
Around 1998 or so, Håkon and I toyed with the idea of boxes connected by virtual rubber bands.
A traditional float in CSS is placed as high as possible without overlapping other floats but not higher than any preceding element or its parent.

→ CSS Grid level 3

Grid level 3 adds 'grid lanes' layout (a.k.a. masonry layout), a kind of automatic layout where each additional element is added to the shortest column (or row) so far.
(A kind of tetris, although all blocks are rectangular.)

In Template Layout and Frame-based Layout, you could take an element and put it in the different slot than its parents. For example, you can put a section of a document in a slot of the template and pull out all images from that section and put those in a different slot.

→ CSS Grid level 2

CSS Grid level 2 allows, to some extent, placing nested elements instead of children in the grid, by defining sub-grids.

If you define a child of a grid element to be a sub-grid, than a child of that sub-grid can be put in the grid. It it is still limited, because to put an element in the grid, all its ancestors up to the grid must be sub-grids, and you can only put an element inside the area covered by its parent.

Also, while Template Layout says that putting two elements in the same slot means they are concatenated, CSS Grid says that putting two elements in the same slot just means they are put in the same position, i.e., on top of one another. (In Template Layout elements are on top of one another only if they are absolutely positioned.)

As a consequence, there is also no way to chain slots together to let content that is too long for one slot continue in another.

→ CSS Grid (2018)

CSS Grid level 1 borrows syntax and ideas from Template Layout and from Flexbox, but is more limited than Template Layout. It does not do automatic optimization of sizes based on constraints, and the 'grid-area' property (which replaces 'flow') may only be put on the child elements of the element that defines a grid. I.e., grid level 1 is not independent of the document structure. E.g., you cannot use grids to layout a table, because the table cells aren't children of the

→ Display level 3 (2014)
The 'contents' value for the 'display' property is a (very little) step to making layout less dependent on the document structure, without general transformations as in DSSSL and XSL, or a 'flow' property as in Regions and Template Layout.

`display: contents` moves the children of an element to the element's parent and discards the element

→ Generated Content for Paged Media

GCPM (2006) defined running()
and element () functions, which
together allow an element to be removed and then inserted elsewhere.

It is another way of making the layout structure different from the document tree. In this case especially to create multiple copies of some content, such as for running headers and footers.

CSS Regions were discussed and tried (thanks to experimental browser extensions) for a few years, but eventually there wasn't enough interest, and, I think, people were too busy making CSS suitable for GUIS.

→ Regions (2011)
In 2011, Vincent Hardy and others from Adobe proposed CSS Regions, another way to define templates (a.k.a. regions) with slots into which to flow different parts of a document. Except that these templates were defined partly in CSS and partly in HTML.

In 2012, Alan Stearns, also of Adobe, proposed a syntax for defining regions with @-rules in CSS instead of with elements in the HTML document, in CSS Pagination Templates, but only for paged displays, such as print or ebooks.

What happened after Template Layout ?

→ Flexbox (2009)
The effort for GUIs built on flexbox, proposed by David Baron (then at Mozilla).
Flexbox ported the layout model of XUL to CSS. XUL was an XML application developed by Mozilla starting in 1997 for building GUIs.
(Mozilla abandoned XUL in 2017.)
Tab Atkins (Google) took over as editor of Flexbox and gave it the syntax that we know

ALMcss: a javascript implementation of the CSS template layout module (2012) → https://dl.acm.org/doi/abs/10.1145/2361354.2361360

Working draft specification at this time (2010) → https://www.w3.org/TR/2010/WD-css3-layout-20100429/

CSS was not a layout language.

→ Layout must be explicit (describe the layout)
→ Layout should not depend on source order (Place the elements into it)

Solution = Template Layout Module (but never became a specification)

« These techniques are extremely complex, fragile, and hard for authors to write. Authors should be able to get the layout concepts they want with the semantic markup that they choose without this complexity. »
David Baron