The Ashes

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:

PLAIN TEXT

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!)

and smart grouping:

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!