CSS Vendor Prefixes - YOU NEED TO ACT NOW!

Running Python and R Inside Emacs

Broad NoSQL Adoption in 2012?

Programming Language Popularity by SO and GitHub C...
Trending: Scala · Vagrant · CSS · PyPy · iOS · Android · IndexedDB · ASP.NET · Heroku · Amazon Cloud · Cloud Foundry

CSS Layout: Soon Good Enough for GUIs

  • submit to reddit
Axel Rauschmayer
07/20/2009
Total Views: 5837

Dr. Axel Rauschmayer is a freelance software engineer, blogger and educator, located in Munich, Germany. Axel is a DZone MVB and is not an employee of DZone and has posted 204 posts at DZone. You can read more from them at their website. View Full User Profile

We Recommend These Resources

Why Load Testing From The Cloud Doesn't Work

Web Load Testing is Good Business

One of the sore points of Ajax has always been layout: CSS is great for document layout, but sucks at GUI layout. Where Java layout managers such as the grid-based JGoodies FormLayout (PDF) work really well and can do things such as “make this grid cell as narrow as the content allows”, CSS currently needs absolute length specifications.

Furthermore, letting an element fill out all of the available space is really tricky, especially when done vertically. Thus it is no wonder that layout was ranked high on the OpenAjax browser wish list. Thankfully, the W3C is hard at work at fixing this problem and it seems that all the major browser vendors are on board (if you look at the editors).


According to my sources, the W3C will try to consolidate these three proposals as much as possible, but might have to keep two, because GUI applications and document layout have such different requirements.

From http://2ality.blogspot.com/

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Jacek Furmankiewicz replied on Mon, 2009/07/20 - 6:49am

CSS for layouts? Instead of the almighty MigLayout?

You have to be kidding. MigLayout wipes the floor with all of  these verbose XML-based approaches. I'd love to see MigLayout ported to HTML instead.

Charlie Hubbard replied on Mon, 2009/07/20 - 11:36pm

I think W3C should freeze adding more tags to <html>.  HTML is great for documents, a little overloaded/over engineered, but if we stopped I think html would be nice when we need to create documents.

Instead of adding more tag soup to html to support application layout features, why not surround the <html> element with an <app> element.  Any <app> element could embed a <html> document element that behaves just as <html> does today.  This would also make it backwardly compatible too.  The difference is <app> changes the default layout from document flow to application layout.  Where all of our <div> behave more like you'd expect in an application.  Just as every other client platform, other than HTML, behaves with parent-child nesting, and children coordinates are relative to parent's coordinate system, etc.  I can position elements anywhere in it's parent without absolute/relative css magic.  I can align two element's edges to create grids, etc.

If we started thinking like this things become really simple, and <html> is just another fancy set of tags that define a different layout to do document based things.  Make it simple to understand and the browser manufacturers won't screw it up like they did css.  Starting from the standpoint that CSS as it is works is a broken assumption.  CSS is horrible to use and it's terrible un-user friendly as an application layout language.  Notice how adobe has abandoned it in Flex because it doesn't work well for complex definitions.  If you want to build the next greatest thing you'll need to ditch CSS because it's not flexible enough to support tomorrow's requirements. 

<app>

   <window id="myAppWindow" left="0" right="245" height="100%">
      <html>
         <body>
             <p>OMG!  My Blog can go here!</p>
         </body>
      </html>
   </window>

   <window id=" navigationBar" right="0" width="250" height="100%" scrollable="off">

   </window>
</app>

Axel Rauschmayer replied on Tue, 2009/07/21 - 9:09am in response to: Jacek

@Jacek: You are making my point: With Java, I'm really happy with the available options (JGoodies, MigLayout), with Ajax, I want to have something that is similar to the more advanced Java layout managers. IMHO, template layout comes close (enough).

Axel Rauschmayer replied on Wed, 2009/07/22 - 5:23am in response to: middlec

@Charlie Hubbard: I like the idea of having different modes depending on whether you want to encode a page or an application. I don't think that CSS is all bad (I've rather grown to like it with jQuery), so maybe just telling CSS about the current mode would be enough.

Nez Arem replied on Wed, 2009/07/22 - 10:42pm

Or you could, you know, just use tables. And be done in 5 minutes with no browser hacks or box model stupidity. Or use ExtJS if you need a full GUI system.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.