Re: [css3-layout] A shortcut with numbers instead of letters in a template

Having whitespaces as separators in templates in general is more flexible.
For example it is possible in principle to define templates without string 
literals:

flow: 1 2,
         1 3;

Or even to use tag names of elements or id's:

flow: dt dd;

flow: #header #header ,
         #content #sidebar,
         #footer #footer;

or even something like this to define repeatable groups :

dl {
   flow: row(dt dl);
}

This will replace dt and dl elements in DL list in table with two columns:
dt's in first and dl's in second column.

And about "I
don't like the fact that when inspecting an element's position property
it's not possible to know whether the element participates in template
layout or not (because the value is 'auto')." ...

By definition flex-box (template is also flex-box by nature) declared on
parent changes model of children to BFC - implicitly affects their model.
And yet, in current flex-box spec defining flex-order on one element
affects visual position of other flex-box items. And there are other
cases in CSS already when defining property on one element
affects position of others. Nothing new here in principle - designers
already familiar with such side-effects.


-- 
Andrew Fedoniouk

http://terrainformatica.com




-----Original Message----- 
From: Anton Prowse
Sent: Saturday, December 03, 2011 1:02 AM
To: www-style@w3.org
Subject: Re: [css3-layout] A shortcut with numbers instead of letters in a 
template

On 02/12/2011 17:42, Tab Atkins Jr. wrote:
> On Fri, Dec 2, 2011 at 3:42 AM, Bert Bos<bert@w3.org>  wrote:
>> On re-reading the documentation of the template layout implementation in
>> HTMLayout by Andrew Fedoniouk and Ivan Goroun
>> (http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm) I
>> noticed something that I hadn't seen before; or maybe seen but
>> forgotten:
>>
>> The template syntax allows numbers as a shortcut for simple (but
>> probably common) cases. E.g. if you have a document like this
>>
>>     <BODY>
>>       <DIV>North...</DIV>
>>       <DIV>West...</DIV>
>>       <DIV>East...</DIV>
>>       <DIV>South...</DIV>
>>
>> you could write this layout:
>>
>>     BODY { display: ". 1 ."
>>                     "2 . 3"
>>                     ". 4 ." }
>>
>> instead of the equivalent:
>>
>>     BODY { display: ". a ."
>>                     "b . c"
>>                     ". d ." }
>>     DIV:nth-child(1) { position: a }
>>     DIV:nth-child(2) { position: b }
>>     DIV:nth-child(3) { position: c }
>>     DIV:nth-child(4) { position: d }
>>
>> I.e., the numbers refer directly to the children of the template
>> element. The designated children are automatically positioned in the
>> given slot, without having to write any rules for them.
>>
>> Advantages:
>>
>>   - No need to invent names for the slots in the template.
>>   - Shorter: avoids extra rules and selectors with pseudo-classes.
>>
>> Disadvantages:
>>
>>   - An extra thing to learn.
>>   - Spaces between slots in a templates are required (rather than
>>     optional), because numbers can have more than one digit.
>>
>> Clearly, this shortcut is limited to positioning child elements (not
>> other descendants), and to slots with at most one element in it. You
>> still need named slots for the other cases.
>>
>>
>> So the question is, do the advantages outweigh the disadvantages?
>
> I don't like that this makes spaces required in templates.

Strictly, it doesn't:

     BODY { display: ".1."
                     "2.3"
                     ".4." }

is unambiguous.  Spaces are only required when two digits are adjacent.
  Alternatively, we could say that "12" is never interpreted as twelve
but always as one-two, thus restricting this shorthand to elements
amongst the first nine children.

> Does this make multi-character slot names valid in general?

I don't see why.

> What happens if you use "1" in a template, but your first child has
> "position: fixed;" or worse, "position: a;"?

I think this shorthand can only apply to elements with position:auto.  A
slot labelled "1" should not filled if the first-child has non-auto
position.

I can see why authors would find the shorthand attractive.  However, I
don't like the fact that when inspecting an element's position property
it's not possible to know whether the element participates in template
layout or not (because the value is 'auto').  (Does CSS have other
examples of an element being pulled into some layout context without
that fact being possible to deduce just from inspecting the element?)
One way of solving that would be to give such template elements a new
keyword value of the 'position' property, eg position:template,

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Saturday, 3 December 2011 18:36:30 UTC