Re: [css-display] Unofficial draft of a Display spec ready for consumption

On Tue, Oct 23, 2012 at 9:03 AM, Andrew Fedoniouk
<news@terrainformatica.com> wrote:
> On Tue, Oct 23, 2012 at 8:29 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> On Mon, Oct 22, 2012 at 7:30 PM, Andrew Fedoniouk
>> <news@terrainformatica.com> wrote:
>>> There is no way in current multi-column spec to disable "multi-columnes"
>>> Let's say we have this:
>>>
>>> div { columns-count:3; column-width: 45px; }
>>>
>>> And you will want to disable column layout on mobile.
>>>
>>> @media handheld {
>>>    div { ... how to switch to default block layout here? ... }
>>> }
>>> how to do that? Defining display:block will not help you
>>> to remove columns, right?
>>
>> div { columns: auto; }
>>
>> The initial value *obviously* turns off multicol, since it's not on by default.
>>
>
> Far not that obvious:
>
> columns: <‘column-width’> || <‘column-count’>
>
> Both ‘column-width’ and 'column-count’ accept 'auto' values.
> "'auto' means that the column width will be determined by other properties".
>
> So the only way to remove multi-column layout is:
> columns: auto auto;

No.  "columns: auto" is fully sufficient. It sets one of the
properties to "auto" explicitly (doesn't matter which), then sets the
other to its initial value, which is "auto".

> But see how fragile is the whole system is:
> 1.  Each LM has different rules to apply/remove
>      given layout.
> 2. List of LMs is an open set - we will add more
>    layout methods/managers. And with each LM
>    you don't know upfront their precedence.

No.  All layout modes are controlled by display-inside.  There's no
"precedence", because an element can only be in one at once.

Multicol is a legacy mistake, but all we have to do is say that the
multicol properties only apply in block layout, and we're good.  This
was difficult to do before, because we wanted to be able to use them
in "block", "inline-block", "list-item", "table-cell", and
"table-caption" - this seems like a random set when all you have is
the 'display' property.  In the new model, these all have the common
property of using block layout (display-inside: block;), so it's easy
to specify the multicol limitation.

> For example, what layout will be used in this case:
>
> div {
>    columns: 4;
>    grid-columns: 50% * * 4em;
> }

Assuming that's all there is to it, multicol, because the <div> is set
to display:block by default.  grid-columns only has meaning when the
element is in grid layout.

~TJ

Received on Tuesday, 23 October 2012 16:13:10 UTC