Re: [css3-flexbox] alignment test

-----Original Message----- 
From: Tab Atkins Jr. 
Sent: Thursday, December 08, 2011 4:12 PM 
To: L. David Baron 
Cc: fantasai ; www-style@w3.org 
Subject: Re: [css3-flexbox] alignment test 

>On Thu, Dec 8, 2011 at 4:06 PM, L. David Baron <dbaron@dbaron.org> wrote:
>> On Thursday 2011-12-08 12:15 -0800, fantasai wrote:
>>> I don't think creating elements or pseudo-elements is a good way of
>>> controlling spacing. That's what margins are for. We've come a long
>>> way since using spacer GIFs, please let's not go back to that.
>>
>> I agree that pseudo-elements are too heavyweight here:  they're more
>> complex for authors to write, and they're also large in terms of
>> memory and performance footprint (more items in the rendering tree),
>> which does matter to authors and users.
>
>How often are spacers used, though?  They're useful to split something
>apart into two ranges, but what else?
>
>If they're used a lot, is my #3 idea better?

Flexible margins are not used a lot of course. But still used. 
Why not just to use most natural solution? 

Let's say someone will need to define flexible right *and*
bottom margins, how this supposed to be done with pseudo-elements?

Anyway here is the list of cases where flexible margins are used in 
built-in style sheets of my engines:

1. To stick <footer> to the bottom of the view 
( if there is free vertical space ):

  body > footer { margin-top:*; }

2. To align content of a button into center vertically:

  button > :first-child { margin-top:*; }
  button > :last-child { margin-bottom:*; }

(vertical-align for inline-block elements does different thing)

3. In menu items to align <span.accesskey> to the right/left:

  menu > li > span.accesskey 
  {
    width:max-intrinsic;
    margin-left:*; /* spring to attach it to the right */
    margin-right:0; 
  }
  menu > li > span.accesskey:rtl 
  {
    width:max-intrinsic;
    margin-right:*;
    margin-left:0;
  }

(If to use spacer::pseudo-element it is actaully a question
how they should play with ltr/rtl, I expect problems in this
area. )

4. Quite a lot of cases in <widget.calendar> ( <input type=month>,
  <input type=datetime>, etc. ) to align calendar components 
  properly. 
See: http://www.terrainformatica.com/w3/builtin-calendar.png
In calendar topmost row has this structure:

  <header>
    <button.prev>
    <div.month>
    <div.year>
    <button.next>
  </header>  
 
and styles like 

  button.prev { margin-right:*; }
  button.next { margin-left:*; }

are used to align things properly.

5. fieldset/legend alignment:

  fieldset > legend 
  {
    width: max-intrinsic; 
    max-width: 90%;
    margin-left:5dip;
    margin-right:*;
  } 
  fieldset:rtl > legend
  {
    margin-right:5dip;
    margin-left:*;
  } 

6. Spin buttons alignment in 
  <input type=number step=1 >

And that is just master-css that defines built-in elements. 


-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Friday, 9 December 2011 03:45:38 UTC