Re: [css-regions] responsive and semantic use of named flows

> On Jan 26, 2014, at 5:16 PM, Håkon Wium Lie <howcome@opera.com> wrote:
> 
> Brad Kemper wrote:
> 
>>> I'm happy to be proven wrong on my predictions. How would you use
>>> Regions to create a flexible and adaptive presentation of the example
>>> in the WebPlaform article?
> 
>> Sorry, I lost track of which article you mean.
> 
> Sorry for not including URLs. Here is the article:
> 
> [1] http://docs.webplatform.org/wiki/css/tutorials/css-regions
> 
> and here's the example:
> 
> [2] http://letmespellitoutforyou.com/samples/region_mq_sample.html
> 
> I'm discussing the example:
> 
> [3] http://alistapart.com/blog/post/css-regions-considered-harmful
> 
>> But in general, to create an adaptive flexible layout out of
>> existing content, I would use existing methods to do so (use
>> whatever boxes are already in the HTML, maybe add some more boxes
>> using ::before and ::after) or use something like Grid to generate
>> new boxes as needed.
>> 
>> Then I'd flow the content between the boxes in the way that suited
>> me.
>> 
>> Then I'd use whatever means I can (which have nothing directly to
>> do with Regions) to make it adapt to different devices. That would
>> include media queries, auto and/or percentage widths, floats
>> (including page floats, perhaps), etc.
>> 
>> For mobile phones, I might even flow multiple non-siblings parts
>> into a single 1-col box, and hide or collapse away their original
>> boxes.
>> 
>> Maybe for printing on a standard size page (selected with media
>> queries) I could turn the first page of the each article into a
>> fancy layout with multiple boxes (created via Grid, let's say) and
>> the text flowing through them (flowing into multi-col on subsequent
>> pages, if there is more to show) and a big page floated figure on
>> page one.
> 
> It would be enlightening to see how you would encode [2] using these
> methods.

I originally thought grid would be a good fit with regions. But grid does not let you select the grid areas in order to apply 'flow-from' on it. That would require something like 'body::grid-area(my-named-area) { flow-from: articles; }', if Body was display:grid and had a grid area defined in it named 'my-named-area'. But such a pseudo-element doesn't exist as part of grid. This is not the fault of Regions. Alternately, if we had something like '@flow articles { grid-area: my-named-area; }' to dump the 'articles' flow into the 'my-named-area' grid area, that it could work too. 

Actually, a separate spec, Grid Template Layout [1], would work pretty well for this, as it allows easy creation of slots that can then be selected via '::slot(my-named-area)'. And it has a built in 'flow' property that acts like flow-into (if grid areas automatically did flow-from from flows of their same name). But I don't know if there is any implementor support for that spec or if it will be actively worked on further (though there is a lot about it that I prefer over the other Grid spec).

I was disappointed to see that the grid example in Appendix A of Regions still required dummy elements. I agree with you that dummy elements are not a practical solution. I'd like to be able to use regions without editing hundreds of pages of HTML. Maybe I could add them with JavaScript, but not every site I work on allows me to add/edit the JavaScript or the HTML: just the CSS and images, usually. But again, this is a limitation of Grid more than anything, not of Regions. 

So, I agree largely with your "Problem #1" in the ALA article, except that it is not actually a Regions problem, it is a problem of not having a better way of creating pseudo-elements, so that we don't need dummy elements. Regions doesn't restrict what you flow into, as long as you can select the box you want to flow into and give it a 'flow-from' value.

What's generally needed to solve that problem is a way to generate a box tree through CSS. If we could chain ::after pseudo-elements and create numbered siblings with '::after(<sibling-number>)', then we'd have what we need to create such a box tree (do the same thing with ::before pseudo-elements). Then each selected pseudo-element could accept some named flow and be styled into a layout (via grid, or floats, or absolute positioning, or whatever, independent of how they got their content). No dummy elements needed.

Your "Problem #2" doesn't prove that regions are not responsive. It just proves that the abs pos layout used in the example doesn't use multi-col. Abs pos layouts without multi-col lack a responsive-friendly feature that multi-col provides. That really has nothing to do directly with regions.

Your "Problem #3" is just attacking a particular design used to illustrate what is possible. Freedom to create confusing text flows if wielded badly is not unique to the properties of text-flow. It is also possible to do '* { float: right; writing-mode: vertical-lr; }', but it doesn't mean you should, except for demonstration purposes.

"Problem 4" makes a reasonable point, but is comparing a 5 box layout with a 6 box layout, and only can be written with so few lines when the box on the right is the same width and spacing as the other two columns.

"Problem 5" begins with an attack on an element of the page design, not really on the method used to create it. Having a few opening lines of an article in a contrasting style is not uncommon in magazines, even if it was done very roughly in the example. It is not a meaningful indictment of regions. Then it attacks absolute positioning again, which is still a problem unrelated to those that Regions is attempting to solve.  

But anyway, for the specific example in the WebPlatforms article, I would start with these assumptions:

1) the rounded-corner border boxes and the verticals spaces between them are there for educational clarity of where the regions are, and not because any designer in his right mind would think that was a nice looking design.

2) the point of the "region #2" is to draw your eye to the beginning of the article by starting it with some text reversed out of a dark box. It doesn't matter if it is inside or outside the main box of the rest of the article.

So, when I look at that layout, I'd do it as a multi-col box (2 columns), and a headline spanning them. Then I'd use 'article::before' to create "region #2", and give it a 'float:right' so that it appeared after the headline and in the first column (would that work? Alternately, I could turn the headline into a page float or exclusion to get it above the ::before pseudo-element). I'd give the pseudo-element a max-height in ems, and 'height: auto'.

For the pull quote, I'd probably use an abs pos with exclusions. It would be a simple way to stick it where I wanted, and have text flow around it. No need to use regions for that.

1) http://dev.w3.org/csswg/css-template/

Received on Wednesday, 29 January 2014 08:48:13 UTC