Re: [css3-regions][css3-exclusions][css3-gcpm] Plan B

On Wed, Dec 28, 2011 at 8:25 AM, Håkon Wium Lie <howcome@opera.com> wrote:
> I like the ascii-art syntax for 'grid-template'. But I also see
> several problems with this code:
>
>  - it uses elements for regions

Yes, that's what I'd like to fix by addressing the issues I see with
your Plan B.


>  - the layout is fixed; there is no way to add more columns if more
>   content is poured into the flow, and the size and aspect ratio of
>   the image is fixed

Sure, because in that code I was doing a direct adaptation of the
existing code.  That is not, in general, a failing of Grid.  Imagine
other uses for Grid that might benefit from region-based styling.


>  - pagination isn't addressed -- e.g., there is no way to say that
>   region e should be on the next page

This is also what I'd like to fix by addressing the issue I see with
your plan B.


>  - it's quite verbose

You say verbose, I say clear and easy to read.  ^_^


> Here's how it can be done using multicol:
>
>  .article { columns: 3 }
>  .article img { column-span: 2 }
>  .article .lead { column-span: 2 }
>
> The above example doesn't create regions, though -- the "lead"
> element is structural. To use regions, the code is slightly longer:
>
>  .article { columns: 3 } /* or better: a width in ems */
>  img { column-span: 2; width: 100% }
>  article::region(1) {    /* selects column 1 */
>    column-span: 2;
>    float: top;
>    visibility: collapse; /* so that column 2 moves in */
>    height: 3em;          /* or something */
>  }
>
> But still only seven lines compared to the 20 or so lines in the
> grid-based syntax (not counting markup). As for readability, others
> should judge, but personally I find the compact code easier to read.

I'm glad you find that readable, but it's completely opaque to me.
Almost every line in there invokes combinations of behavior that I'd
have to look up and think about to understand, and there are a few
bits (like the "visibility:collapse") that I'm *completely* in the
dark over.  My own experiences as a web designer, and what I've heard
and seen from other webdevs, is that float-based layout was a terrible
hack that happened to accomplish really useful things at the time,
like table-based layouts further in the past.  I would not inflict
such things on the future, especially not in the more complicated form
you're demonstrating here.

My point is just that Flexbox and Grid are really really useful layout
tools, but they're incompatible with Multicol currently, and thus are
incompatible with your Plan B currently.  Until this is fixed (either
by making them compatible with Multicol, or by changing your Plan B
into something slightly different that doesn't explicitly rely on
Multicol), Plan A is a more attractive near-term plan to me.

~TJ

Received on Wednesday, 28 December 2011 17:45:18 UTC