CSS3 Multi-Column Support
Posted by Dave Hyatt on Friday, January 12th, 2007 at 4:53 pmWebKit now has some very basic support for multiple columns from CSS3. In fact, if you’re reading this blog entry, you will see that it has been broken up into two columns in the latest WebKit nightly and in Firefox.
The properties supported at this time are columns, column-gap, column-count and column-width. Column rules are not yet supported and neither are column breaks.
At this time any stacking context children like relative positioned content or content that uses opacity will position impoperly (as though the column didn’t exist. If you decide to use this feature, watch out for that.
Update: Column rules are now supported. This blog entry now has one!
January 12th, 2007 at 5:08 pm
Hilarious. The WebKit blog exposes a bug in WebKit. The second column’s content is hidden when it overflows the right side, so it’s cutting off a couple words at the end of each line.
January 12th, 2007 at 5:12 pm
And even funnier, the captcha is still broken in ToT. The image I’m supposed to type shows up as a broken link. Seems broken in shipping too.
January 12th, 2007 at 5:56 pm
[...] Webkit’s CSS3 Multi-Column Support January 12, 2007 Webkit’s CSS3 Multi-Column Support – Hooyah. [...]
January 12th, 2007 at 5:56 pm
I am a big fan of CSS 3 myself and saw the progress on it. So I am working on an implementation on my own site. I didn’t have any problems or at least the behavior was exactly the same in Gecko, so from what is implemented it works good enough, to use it. Tomorrow I will take a better look at the implementation so far. This is I think the most requested feature and has finally been implemented. Looking at new web techniques, WebKit seems to have the best implementation of all browsers. CSS 3 is by far the best implemented in WebKit, even Gecko 1.9b isn’t reaching that and also SVG is becoming a really good implementation.
January 12th, 2007 at 6:35 pm
[...] i-Columns
WebKit now has some very basic support for multiple columns from CSS3. read more | digg story
Permalink
[...]
January 13th, 2007 at 3:08 am
Not long after reading this blog entry, I followed a link to a site that was actually using multi-column styles. I had to like the timing — and it’s nice sites are already putting CSS 3 to practical use.
(For the record, the site was http://www.intuitor.com/moviephysics/)
January 13th, 2007 at 3:20 am
WebKit mit neuer CSS3-Funktion: Support für Multiple Columns
Derzeit erfährt das WebKit Project dauernd (hier und hier) neue CSS3-Features und baut somit den «CSS3-Kompatibilitäts-Vorsprung» von Safari im Vergleich zu anderen Browsern wie Firefox oder Opera immer weiter aus. Die neuste CSS3-Funktion die WebK…
January 13th, 2007 at 3:41 am
i only wonder when will have in usual safari.
January 13th, 2007 at 4:51 am
[...] ost de Valk, Saturday, January 13th, 2007 at 1:45 pm
Dave Hyatt over at the WebKit blog announced that the WebKit nightly now supports multiple columns. I’ve updated the css3 preview pag [...]
January 13th, 2007 at 5:18 am
So does that mean it’s possible to implement a view like: http://amarsagoo.info/tofu/index.shtml within Safari?
January 13th, 2007 at 5:20 am
To clarify, I mean having the text in columns, filled down to the bottom of the page, and with a horizontal scrollbar that can scroll the text a column at a time.
Because that’s by far the best way to read long prose, and if it could be done in html + css, that would be totally awesome.
January 13th, 2007 at 4:42 pm
jacobulus, yes! All you have to do is set a specific height on a block, and the columns will flow to fill that height and spill out horizontally if they need to. If you put overflow:auto on the block, you’ll get a horizontal scrollbar and you can scroll to read everything.
January 13th, 2007 at 8:53 pm
Thank You Thank You Thank You. Last summer at WWDC, when I met a few of the WebKit team, I was begging them to add support for the column property. They said they were working on it, but didn’t seem too sure it would be in Safari 3. Now, all we have to do is get Mozilla to add it, and web designers can start putting the screws to MS.
I’m really excited to start serving up some pages with CSS3 goodness!
January 14th, 2007 at 12:14 am
Mozilla has added it. It’s in Firefox 2.
January 14th, 2007 at 1:08 pm
It does not seem to work when printing.
January 14th, 2007 at 5:32 pm
Yes, it’s turned off when printing. Until I can implement breaking across pages properly.
January 18th, 2007 at 8:03 am
[...] Multi-Column Support und Silbentrennung Januar 18th, 2007 Dave Hyatt hat auf Surfin’ Safari die Unterstützung von CSS3 Multi-Column durch WebKit angekündigt. Ich finde mehrspaltiges Layout [...]
January 19th, 2007 at 4:33 pm
[...] paso más, aunque deberían de empezar por el CSS 2.1 me parece a mí Noticia original: CSS3 Multi-Column Support Más información: Multi-column layout in WebKit and Firefox Sin comentarios + [...]
January 22nd, 2007 at 6:53 am
Actually, Mozilla implemented multi-column support from Firefox 1.5, but column-rule isn’t implemented and it uses the -moz prefix.
February 1st, 2007 at 5:29 am
[...] fixats amb les 3 propietats de column en relació amb l’amplada del navegador.
Actualment també ho suporta el Webkit en desenvolupament.
Escrit per: are
Arxivat a: inic [...]
March 21st, 2007 at 11:21 am
I followed a link to a site that was actually using multi-column styles. I had to like the timing — and it’s nice sites are already putting CSS 3 to practical use.
That was really nice…, thanks
June 11th, 2007 at 12:04 pm
[...] CSS3 multi column support in safari (shame it is such a minority browser… ) http://webkit.org/blog/?p=88 [...]