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

Re: :first pseudo-selector

From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
Date: Fri, 23 Mar 2012 17:13:38 +0400
To: fantasai <fantasai.lists@inkedblade.net>
Cc: "www-style@w3.org" <www-style@w3.org>
Message-Id: <954721332508418@web3.yandex.ru>
23.03.2012, 03:11, "Marat Tanalin | tanalin.com" <mtanalin@yandex.ru>:
> 23.03.2012, 02:44, "fantasai" <fantasai.lists@inkedblade.net>:
>
>> šOn 03/22/2012 11:37 AM, Marat Tanalin | tanalin.com wrote:
>>>> ššIt's necessary if you have a box with some paragraphs and don't want to have unnecessary gaps at the the end and the beginning
>>>> ššof the box.
>>> ššAs far as I understand this part of message, it's something that I thought of too.
>>>
>>> ššLet assume we have a container with blocks inside it, and each block can have margin-top and margin-bottom, and each block can contain another blocks inside them, and nesting level can be arbitrary and is unknown in advance.
>>>
>>> ššIt would be nice to have ability to zeroize margin-top for first child, and first child of it, first child of first child of first child, etc. at once. Same applies for last child.
>> šThis specific case would probably be better handled by some kind of margin-collapsing
>> šcontrol, actually. Are there other cases where you'd need this kind of recursive
>> šselector?
>>
>> š~fantasai
>
> Well, maybe. Though I have no idea what is that margin-collapsing has to do with margin-zeroing and how could it be expressed syntactically.
>
> Main usecase for me is, indeed, zeroing vertical margins (mainly, to prevent margin-bottom on last-child element and all it's last children recursively). However it probably could have sense for other things like borders too.

I have an idea for syntax related to margin collapsing:

    .example {margin-collapse: [value][, value][, value][, value]; }

where value can be one of following keywords (or 2- or 4-value combination similarly to margin property):

    * collapse:
      margins of element are collapsed with margins of its children;

    * hide:
      element-children margins that are outside of element bounds are hidden
      sothat layout of element does not depend on whether its children have margins;

    * none:
      margins of element children are not collapsed with element margins:
      with same result as if element had padding or border.

So default value for margin would be "collapse none" (vertical margins are collapsed while horizontal ones do not).

Value for case where we need to zeroize margin-top of first-child and all its first descendants (same for last child and all its last descendants recursively) would be following:

    .container {margin-top-collapse: hide; margin-bottom-collapse: hide; }

or with shorthand:

    .container {margin-collapse: hide none; }

As a nice side effect, the syntax would also give us flexibility as for controlling whether _horizontal_ margins should be collapsed (currently they can never be collapsed) where appropriate. For example:

    UL > LI {
        display: inline;
        margin-left:  1em;
        margin-right: 1em;
        margin-left-collapse:  collapse;
        margin-right-collapse: collapse;
    }

would have result where distance between sibling LI items is 1em (instead of 2em according to current spec where horizontal margins are never collapsed).

Thanks.
Received on Friday, 23 March 2012 13:14:15 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:48:53 GMT