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

Hi Bert,

Numbers were added in template syntax after initial publishing.
That was made by UI developers requests. Most of the time the template is
used to define layout of pretty small sets. And templates are used a lot.

Having one property that define layout - so without
need of that a bit artificial "{ position: a }" construct -
is significantly  more error prone than any other solution.

This declaration in my case:

flow: "1 3 2";

1. Declares flex-box container
2. Establishes layout and order of elements.

It means "flow:template" covers flex-flow and flex-order (declaration spread 
across children)
properties in robust and predictable manner. And is free from only 
horizontal/vertical limitations
of the flex-box.


-- 
Andrew Fedoniouk

http://terrainformatica.com


-----Original Message----- 
From: Bert Bos
Sent: Friday, December 02, 2011 3:42 AM
To: W3C style mailing list
Subject: [css3-layout] A shortcut with numbers instead of letters in a 
template

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?



Bert

PS. Tracker code: ISSUE-201
http://www.w3.org/Style/CSS/Tracker/issues/201

-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Friday, 2 December 2011 17:29:18 UTC