How we’ll lay out websites in 2016 - Part Two
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="some_image.gif" id="first"/> <img src="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.
Gagh, and that would mean that we would have to learn what . and @ means. This method is surely compact, but isn’t the intent of CSS to be easy to understand? Nah, I’ll keep what I said about the Advanced Layout Module being a step in the wrong direction.
(you have an error in the last CSS example, img#first is there twice)
I think the purpose of CSS is to remove the layout from the markup (via a series of cascading styles).
I think this advanced layout mechanism is apropos of CSS, since it allows direct manipulation of layout of child elements, regardless of their order.
Personally, what I think CSS is lacking actual designer friendly features — such as being able to position a line, and have arbitrary elements align against it. (e.g. draw a line along the vertical center of of a div, then have selected elements align themselves against that line. — no, vertical-align: center; does not do this…)
Thanks for pointing out the error; have changed that now.
I think it may be a little complicated to use at first, but the more I look at it the better it seems to be. It will allow for certain layout styles which are more or less impossible at the moment, which is a good thing.
I agree with Peter, anything to give more control over elements on a page rather than nesting divs and floating elements the better!
[...] How we´ll lay out in websites in 2016 – Part Two [...]
[...] Estoy seguro que puedes empezar a ver las posibilidades. Artculo Original: How we’ll layout websites in 2016 (II) [...]
Ejemplo del módulo avanzado de layouts de css3…
¿Podremos llegar a usar esto algún día? Un ejemplo del módulo de layouts de la especificación CSS3…
I think the purpose of CSS is to remove the layout from the markup (via a series of cascading styles) too