-
200711 Aug
The CSS Advanced Layout module (explanation here) has been updated. After a quick read through, I’ve found only a few changes.
The first is the introduction of the
::slot()pseudo element, which allows (limited) styling of – obviously – a slot. That is, if you had your layout set up like this:body { display: "ab" "cc"; } div#div1 { position: a } div#div2 { position: b } div#div3 { position: c }You could style
#div2either with itsid, or with:body::slot(b) {}This pseudo-element is still at an early stage of definition, and may be changed – or dropped altogether.
Another, more minor change is that the way to define templates, which was previously undecided between
display-modelordisplay, seems to have been decided in the favour of the latter. I’d agree with this, as it uses an existing declaration.Something else I noticed, which is not a change as it was in the original draft, I just overlooked it, is that
vertical-aligncan now be used to position a block-level element inside a slot; that’s right, like inside a table. Rejoice! No more workarounds!The Advanced Layout module has been described by the W3C as a
concept album
– that is, an explorative spec; therefore, don’t expect to be seeing it implemented any time soon. You can, however, download a cross-platform Javascript emulator, written by César Acebal, if you want to try it out for yourself.You can skip to the end and leave a response.
-
Comments
-
01.
[…] developer, as HTML 5 and CSS 3 are both on the (somewhat distant) horizon. I’ve just written about the Advanced Layout module on CSS3.info, IBM developer works have a nice introduction to the new elements of HTML 5, and […]
-
02.
I really don’t see much use for slot for most people. It might have a few applications, but not many as far as I can tell.
-
03.
Edward Edmonds says:Comment » October 29th, 2007 at 12:03 pm
I noticed you said that vertical-align would allow you to position block elements that are inside of slots, is this just inside of slots or for the entire page, it just seems so insane to me that you can’t have a and some content inside vertically aligned.
-
04.
It’s hard to tell without being able to actually test it, but I’d imagine that with creative use of the module you’d be able to get the result you want.
-
05.
The advanced layout module is what I’m looking forward to the most of all the new CSS3 stuff. And being able to style the slots is something I’ve been hoping for ever since I read about it.
It seems a lot of people don’t really like it or think it’s useless or ugly but with advanced layout we can completely get rid of every layout-div in the source code. If you use YUI grids then that’s what I’m talking about. You will not need them any more.
With advanced layout you can just put your module divs without any stupid design-related class/id-names one after the other straight in the body-element and create whatever layout you want (2 col, 3 col, 4 col, 1 col, grids, whatever) using pure CSS.
Drag and drop will be such a piece of cake as well as you would only need to change the position-property of an element to position it in a different row or column.
I sure hope they finalize the spec asap so browser-vendors can start implementing.
-
01.
