Home Directory Services Articles Get Listed Login

The Future of CSS: Finally, Sane Layout Tools

*Attention PHP Programmers* - Add A Free Listing! Get more clients.

HTML5 and CSS 3 offer web designers new semantic tags, fancy animations, server-side fonts and much more, but that’s not the end of the story. The next major development in web design will likely revolve around one of the things neither HTML5 nor CSS 3 have yet addressed — page layout.

For all the great new tools in both technologies, the task of making page elements arrange themselves the way you’d like remains an imperfect process at best. Floats, absolute positions and the occasional bit of JavaScript will get the job done, but that’s a lot of code for something as basic as positioning elements on the page.

Surely there’s a better way. For example, wouldn’t it be nice if you could simply define a box and then position child elements within that box using a few lines of code? Perhaps something like this:

section {
    display: box;
}
section p#first {
    box-flex: 3;
}
section p#second {
    box-flex: 2;
}

These CSS rules tell the browser that our section tag should be a box. Within that box are two paragraphs that should be displayed side by side, with one of them taking up slightly more space than the second. The browser calculates the width of the two p tags by looking at the ratio in the box-flex rule and then displays the results — no floats, pixel widths or other rules necessary.

If that sounds good to you then you’ll be excited to know that the code above will actually work in the latest versions of Firefox, Safari and Chrome, which all support the W3C’s Flexible Box Layout Module.

The catch — because there’s always a catch when it comes to emerging web standards — is that the W3C is planning a considerable rewrite of the Flexible Box Layout syntax. In other words, experimenting with the Flexible Box Layout rules is fine (and vendor prefixes are your friend here), just don’t actually use it in production code. For a great tutorial on how the Flexible Box Layout rules work, check out Google developer Paul Irish’s write up on HTML5Rocks.

The Flexible Box layout Module isn’t the only tool the W3C is considering for improving the layout tools in CSS. There are two additional standards under consideration — Template Layout (based on Mozilla’s XUL syntax), and Grid Positioning. The three use different syntaxes to accomplish similar things, so it’s unlikely all three will end up official specs. Currently the Flexible Box Module and the Template Layout Module are the more actively developed of the three.

For a great overview of how each of these three modules work, check out the video below of web developer Peter Gasston’s recent talk at the London Web Standards meeting. Gasston calls the talk How We’ll Lay Out Websites In 2016, but we’re optimistic that these tools will be available in most browsers much sooner than that.

Of course there’s an elephant in the room — Internet Explorer, which does not currently support any of these tools (some of the Flexible Box Layout tools turned up in an early preview release of IE9, but they appear to have been removed in the latest preview). But there’s some good news, particularly in the case of the Flexible Box Layout module, which already has a JavaScript polyfill for older browsers.

Cool as the Flexible Box Layout Module is, it’ll still be some time before you can use these new rules in production. Floats, absolute positioning and other awkward layout tools will be with us for some time to come, but at least the promise of something better is starting to appear on the horizon.

See Also:

• Transform Your Site With CSS 3
• Simplify CSS 3 With Online Code Generators
• Dealing With Browser Differences in CSS 3
• Make a Big Splash on Tiny Screens With Media Queries
• Advice From the CSS Guru: Embrace Prefixes

Source http://www.webmonkey.com/?p=50096
Thu, 03 Mar 2011 17:56:15 GMT
Tags: CSS, CSS 3, HTML5, Web Standards,

---

*Attention PHP Programmers* - Add A Free Listing! Get more clients.

---

CSS

---

CSS 3

---

HTML5

---

Members:

Apple Credits OpenStreetMap for iPhoto Map Data

Two months ago Apple launched its iPhoto for iOS app with some map data that looked very familiar to

---

10 Tips for a better eCommerce website

During the last years the number of new web shops has raised sky high. With the free open-source sho

---

Chrome 17 Released, Will Preload Autocompleted URLs as You Type

The latest update to Google Chrome gives the web browser precog-like powers, sometimes rendering pag

---

Mozilla: Windows 8 a ‘Return to the Digital Dark Ages’

Mozilla calls the restrictions in Microsoft's coming Windows RT "an unwelcome return to the digital

---

Internet Explorer 9 to Arrive March 14

Internet Explorer 9 Beta on the Windows 7 desktop Microsoft has announced it will release Internet

---

Article Tags
PHP Programmers Articles
Friends:
Live Help Chat Software
Web Design Quote
Web Design