W3C home > Mailing lists > Public > www-style@w3.org > October 2012

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

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Mon, 22 Oct 2012 19:30:57 -0700
Message-ID: <CALRQH7-qPGxuyj0fj5Vi0qooN28AvnfLMCsyN9FMtMnTChEPCQ@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style list <www-style@w3.org>
On Mon, Oct 22, 2012 at 10:39 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> On Sun, Oct 21, 2012 at 6:57 PM, Andrew Fedoniouk
> <news@terrainformatica.com> wrote:
>> On Sun, Oct 21, 2012 at 12:15 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>>> On Sat, Oct 20, 2012 at 2:55 PM, Andrew Fedoniouk
>>> <news@terrainformatica.com> wrote:
>>>> 'display-box'  either 'normal' or 'none'
>>>> sounds misleading for inline elements. They have no box to hide or to
>>>> show normally.
>>>
>>> Inline elements generate boxes.
>>
>> So it should be plural then, display-boxes or so.
>
> As I said, the names of those two properties (display-box and
> display-extras) suck, and I'd appreciate better suggestions.

in common sense display:none is about visibility. I do remember
myself surprised first time I've discovered 'none' in 'display' but not
in 'visibility'. I don't think I am alone on this.

visibility:exclude (from rendering, rendering tree and so on)
still appears as better name as it governs all other aspects
of how that element is participating in rendering tree.

visibility: visible - in rendered tree;
visibility: hidden - in rendered tree, but is not drawable;
visibility: collapse - in rendered tree, but collapsed in
                        block progression direction,
                        does not generate box, but affect margin
                        collapsing, pretty much the same meaning for table rows;
visibility: none - invisible and excluded from rendering tree completely;
visibility: proxy - is not participating in rendering tree but
                        its children do participate in rendering
                        (that's your 'contents' I think);

>
>> But display:none does not just mean not generating boxes.
>> It is also about margin collapsing for example.
>
> display:none has absolutely nothing to do with margin collapsing.

Margin collapsing as a concept does not belong to the concept
of box strictly speaking. It's a space/offset in some direction. When
you say "box is not generated" then you shall say something about
margins too. Are they still there or not.

In general display:none is just about excluding element from rendering
tree. So the name of the property/value shall be close to excluded.
I think that either
visibility: none; or
visibility: excluded
significantly better define what is going on in my opinion.

>
>> Ideally it has to be one CSS property that defines/triggers
>> layout manager to be used on an element.
>> Otherwise it is not clear what this means for example:
>>
>> #ugly-container {
>>   display: flex;
>>   flex-direction:row;
>>   columns:12em;
>> }
>
> No, this is quite clear.  Flexbox currently has text explicitly
> disallowing this, but it implies that the restriction is a more
> general one: that multicol only "works" in block layout.  We can
> formalize that now, and say that the multicol properties only have an
> effect when 'display-inside' is "block".

So you have circular dependency between at least two modules.
And If later you will define something like display:stack, for
example, that module shall say something about multi-column.
And yet multi-column shall be updated to mention that new layout
module.

Anyway, here is practical example:

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?

It *must* be single property that switches layouts:
div {
  flow:columns; columns-count:3; column-width: 45px;
}
@media handheld {
   div { flow: default;  } // or
   div { flow: flex/vertical;  } // etc.
}

Having single property that define LM used on element
is all about robust spec design if to think about future.
Different modules and LMs may have different set of
properties defining their details. If only one property
selects layout used then we can share/reuse properties
between different modules. E.g. 'columns' can be used
not just for multi-column layout but for the flow:grid or
flow: table-fixed for example. We are running  out of
meaningful property names already.

-- 
Andrew Fedoniouk.

http://terrainformatica.com
Received on Tuesday, 23 October 2012 02:31:25 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:01 GMT