The Ashes

Technology, Science and other news
August 23, 2009

CSS 3 Flexible Box Model

Posted by : admin
Filed under : General

Alex Russell has been having a really interesting discussion with some standards folks about what is wrong on the Web right now, and it narrowed down to discuss CSS variables as a case study (it aint perfect, but get DRY and ship it!)

Alex tells it how it is, but people forget that he does this as he is passionate about the Web, and that he does also give credit and positive outlook IF it is due!

His latest post shows this as he talked about CSS 3 progress and specifically the flexible box model that Mozilla and WebKit have had forevaaaaaah:

David Baron (of Mozilla fame) is editing a long-overdue but totally awesome Flexible Box spec, aka: “hbox and vbox”. Both Gecko and WebKit-derived browsers (read: everything that’s not IE) supports hbox and vbox today, but using it can be a bit tedious. Should you be working on an app that can ignore IE (say, for a mobile phone), this should help make box layouts a bit easier to get started with:

CSS:

  1.  
  2. /* hbox and vbox classes */
  3.  
  4. .hbox {
  5.         display: -webkit-box;
  6.         -webkit-box-orient: horizontal;
  7.         -webkit-box-align: stretch;
  8.  
  9.         display: -moz-box;
  10.         -moz-box-orient: horizontal;
  11.         -moz-box-align: stretch;
  12.  
  13.         display: box;
  14.         box-orient: horizontal;
  15.         box-align: stretch;
  16. }
  17.  
  18. .hbox> * {
  19.         -webkit-box-flex: 0;
  20.         -moz-box-flex: 0;
  21.         box-flex: 0;
  22.         display: block;
  23. }
  24.  
  25. .vbox {
  26.         display: -webkit-box;
  27.         -webkit-box-orient: vertical;
  28.         -webkit-box-align: stretch;
  29.  
  30.         display: -moz-box;
  31.         -moz-box-orient: vertical;
  32.         -moz-box-align: stretch;
  33.  
  34.         display: box;
  35.         box-orient: vertical;
  36.         box-align: stretch;
  37. }
  38.  
  39. .vbox> * {
  40.         -webkit-box-flex: 0;
  41.         -moz-box-flex: 0;
  42.         box-flex: 0;
  43.         display: block;
  44. }
  45.  
  46. .spacer {
  47.         -webkit-box-flex: 1;
  48.         -moz-box-flex: 1;
  49.         box-flex: 1;
  50. }
  51.  
  52. .reverse {
  53.         -webkit-box-direction: reverse;
  54.         -moz-box-direction: reverse;
  55.         box-direction: reverse;
  56. }
  57.  
  58. .boxFlex0 {
  59.         -webkit-box-flex: 0;
  60.         -moz-box-flex: 0;
  61.         box-flex: 0;
  62. }
  63.  
  64. .boxFlex1, .boxFlex {
  65.         -webkit-box-flex: 1;
  66.         -moz-box-flex: 1;
  67.         box-flex: 1;
  68. }
  69.  
  70. .boxFlex2 {
  71.         -webkit-box-flex: 2;
  72.         -moz-box-flex: 2;
  73.         box-flex: 2;
  74. }
  75.  
  76. .boxGroup1 {
  77.         -webkit-box-flex-group: 1;
  78.         -moz-box-flex-group: 1;
  79.         box-flex-group: 1;
  80. }
  81.  
  82. .boxGroup2 {
  83.         -webkit-box-flex-group: 2;
  84.         -moz-box-flex-group: 2;
  85.         box-flex-group: 2;
  86. }
  87.  
  88. .start {
  89.         -webkit-box-pack: start;
  90.         -moz-box-pack: start;
  91.         box-pack: start;
  92. }
  93.  
  94. .end {
  95.         -webkit-box-pack: end;
  96.         -moz-box-pack: end;
  97.         box-pack: end;
  98. }
  99.  
  100. .center {
  101.         -webkit-box-pack: center;
  102.         -moz-box-pack: center;
  103.         box-pack: center;
  104. }
  105.  

With this core baseline CSS you can then do great things such as easily vertically align (duh!)

PLAIN TEXT
HTML:

  1.  
  2. <div class=“hbox center”>
  3.     <div class=“vbox center”>
  4.         <div></div>
  5.         <div></div>
  6.     </div>
  7. </div>
  8.  

and smart grouping:

PLAIN TEXT
HTML:

  1.  
  2. <form action=“handler.cgi” method=“POST” class=“hbox”>
  3.         <div class=“vbox”>
  4.                 <label>First Name (required):</label>
  5.                 <label>Last Name:</label>
  6.         </div>
  7.         <div class=“vbox”>
  8.                 <input type=“text” name=“first”/>
  9.                 <input type=“text” name=“last”/>
  10.                 <input type=“submit”/>
  11.         </div>
  12. </form>
  13.  

The mighty Erik Arvidsson also reminds us of the CSS3 attr() support (already in Firefox, coming in WebKit too) that would enable us to wire up <div class=vbox flex=2>…</div>.

Although you may be thinking “this is great, but freaking IE means that I don’t care about it.” True. It would be awesome if someone took a shim that could grok this CSS (we built a CSS parser for Thunderhead) and make it work in IE etc. But until that day, or the day that IE implements it (heh) what can you do?

Write iPhone or Palm webOS or Android WebKit apps? You can use it right friggin now!

Tags :

No Comments

(required)
(will not be published) (required)
(opitional)

cciash.com EN ES IT DE PT CZ FR RU
May 2018
M T W T F S S
« Sep    
 123456
78910111213
14151617181920
21222324252627
28293031  

Pages

Categories

Resources

There are many online poker site where you can play but at poker.hk you can play the poker games with all the knowledge you need related to the game with the poker school available in both the English and Chinese language.

Super Casino

Now you can bet on any sports and any sporting events from all the comfort from your home. Bet770 allows you to bet on any events and match with in just 3 clicks. They also offers great odds on football betting for every premier and champions league match. Get £50 free in bets when you register.

Bingo770, offering best online bingo games with £7.70 free no deposit Bonus!