• 200612 Dec

    In my previous post I don’t think I put enough emphasis on the fact that the Advanced Layout method may never happen; it could be dropped by the W3C, never implemented by the browser makers, or replaced by a better method.

    However, let’s work on the assumption that it does get implemented and take a closer look.

    As well as assigning each element a letter in the display declaration, there are two other characters which can be used: ‘@’ (at) and ‘.’ (dot). I want to explore the dot first.

    Note: We’ll use the four list items from the previous post in this example.

    A dot signifies a blank (whitespace) column in the layout grid. It can be assigned a width (more in a future post). In use, it would look something like this:

    ul {
    display: "a.b"
             "ccc"
             "..d";
    }

    Which would give us an output like this:

    One Two
    Three
    Four

    The @ symbol is a little harder to understand from the draft, but seems to signify where default content should lie in the rest of the template. In this example, I’m going to use images; let’s say we have the following code:

    <div>
    <p>Lorem ipsum dolor sit amet.</p>
    <img src="http://www.css3.info/wp-content/uploads/2009/09/http://www.css3.info/wp-content/uploads/2009/09/some_image.gif" id="first"/>
    <img src="http://www.css3.info/wp-content/uploads/2009/09/http://www.css3.info/wp-content/uploads/2009/09/some_image.gif" id="second"/>
    </div>
    

    And we apply styles to it as so:

    div { display: "a@b"; }
    img#first { position: a; }
    img#second { position: b; }

    The output would be something like this:

    [Image] Lorem ipsum dolor sit amet. [image]

    I’m sure you can begin to see the possibilities.

    You can skip to the end and leave a response.


  • Comments

Hosting by: