Evolution of CSS Layout: History & Design Principles

Last April I gave a talk called "The Evolution of CSS Layout", presenting
the development of CSS layout in the past and the future. I thought it
might be interesting to people here, particularly the part about design
principles.

There's a screencast available; I also turned the talk into an essay
on my blog:
   http://fantasai.inkedblade.net/weblog/2012/css-layout-evolution/

Here's a skip link to the part about CSS3 design principles:
   http://fantasai.inkedblade.net/weblog/2012/css-layout-evolution/#css3-overview

And here's the summary of those principles, which I believe this represents
the position of many (though perhaps not all) of the CSSWG members.

CSS3 Layout: Principles of Design
=================================

CSS3 is really the first time the CSSWG has attempted to design a system
expressly for 2D layout. We want to do it right for the Web, which means
we want a system that is...

Flexible
--------

    That adapts gracefully to different screen sizes, font sizes, amounts
    of contents, etc.

Powerful
--------

     That can express most layouts designers want to have and the constraints
     they want it to flex under. One that makes the simple things easy, and
     the complex ones possible.

Robust
------

     That doesn't break down and become unreadable in unexpected conditions
     like an unexpected font size, or an unusually long paragraph, or an
     uncommonly-narrow screen.

Understandable
--------------

     Doing layout in CSS right now is complicated, hard to understand, and
     hard to learn. This is largely because no feature in CSS was intended
     to do 2D layout. As we intentionally design real layout systems to CSS,
     we want to make sure the syntax is clear and self-evident, and that
     the concepts and algorithms make sense and reflect the behaviors authors
     are most likely to want.

Performant
----------

     Lastly, the Web is a platform for interactive applications, so a layout
     system for the Web needs to be performant.

     This last part is a bit tricky because there are some layouts people
     want that can only be solved with an iterative constraint solver. But
     we want to minimize the cases where that's necessary and make the
     common cases easier to optimize.


CSS has all of these characteristics for the layout system it has, but that
layout system is just one-dimensional layout: single-column flow for long
documents. Like CSS specs. What we want is layout tools for two dimensions.
And that's what we're building in CSS3.

Continue with ...
   http://fantasai.inkedblade.net/weblog/2012/css-layout-evolution/#layout-modules

Skip backwards to ...
   http://fantasai.inkedblade.net/weblog/2012/css-layout-evolution/#intro

~fantasai

Received on Sunday, 28 October 2012 19:24:50 UTC