CSS3

  • 200630 Nov

    How we’ll lay out websites in 2016

    by

    Posted in Modules

    The difficulty many developers face when they start moving to table-less sites is getting the layout to work. Floats and positioning are easy enough for basic layouts, but start to become incredibly complex when moving to a more advanced level. When the push to move to pure CSS layouts became intense, the problem was – and is – that tables are still a lot more convenient in many cases, and there is sometimes no decent alternative without contorting yourself; you can’t even use the display: table family, as there’s no support in IE.

    An interesting potential solution is in the CSS3 Advanced Layout module.

    It works as so: Imagine you have four list items:

  • One
    • 

  • Two
    • 

  • Three
    • 

  • Four
    •

    Using the display or display-model declaration, you could lay out your elements in a string as they would appear on screen:

    ul {
display-model: "ab"
               "cd";
}

    And then assign order to the child elements using position:

    li#one { position: a; }
li#two { position: b; }
li#three { position: c; }
li#four { position: d; }

    To layout four li elements in a square formation, without having to use floats and margins; I’ve replicated the outcome here using a table:

    One Two
    Three Four

    Alternatively, we could use the same four elements for a different layout:

    ul {
display-model: "aa"
               "bc"
               "dd";
}
    li#one { position: a; }
li#two { position: b; }
li#three { position: c; }
li#four { position: d; }

    I would get:

    One
    Two Three
    Four

    Pretty useful, no? It’s much more flexible than the basic examples I’ve shown here, and could save an awful lot of time in the future.

    The downside? So far it’s only available as a working draft, and only assigned a medium priority by the W3C. Add on to that the extra time for browsers to implement it, and we won’t be seeing it any time soon.

    You can skip to the end and leave a response.


  • Comments

Subscribe to our RSS

OUR SPONSORS

Advertise here?
CATEGORIES
FRIENDS
META2
TAG CLOUD

© 2009-2012 WEBFLUX. All Rights Reserved.