Surfin' Safari

CSS3 Multi-Column Support

Posted by Dave Hyatt on Friday, January 12th, 2007 at 4:53 pm
WebKit 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!

22 Responses to “CSS3 Multi-Column Support”

  1. Thinine Says:

    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.

  2. Thinine Says:

    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.

  3. Pingback from Ryan Irelan » Webkit’s CSS3 Multi-Column Support:

    [...] Webkit’s CSS3 Multi-Column Support January 12, 2007 Webkit’s CSS3 Multi-Column Support – Hooyah. [...]

  4. MysteryQuest Says:

    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.

  5. Pingback from cdharrison.com | WebKit Adds Basic Support for CSS3 Multi-Columns:

    [...] i-Columns

    WebKit now has some very basic support for multiple columns from CSS3. read more | digg story

    Permalink

    [...]

  6. pauld Says:

    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/)

  7. Trackback from macprime.ch - Ticker:

    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…

  8. gelosilente Says:

    i only wonder when will have in usual safari.

  9. Pingback from CSS3 . info - » WebKit now supports multiple columns - Weblog:

    [...] 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 [...]

  10. jacobolus Says:

    So does that mean it’s possible to implement a view like: http://amarsagoo.info/tofu/index.shtml within Safari?

  11. jacobolus Says:

    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.

  12. hyatt Says:

    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.

  13. serpicolugnut Says:

    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!

  14. hyatt Says:

    Mozilla has added it. It’s in Firefox 2.

  15. daniel Says:

    It does not seem to work when printing.

  16. hyatt Says:

    Yes, it’s turned off when printing. Until I can implement breaking across pages properly. :)

  17. Pingback from mnn-blog » Blog Archive » CSS3 Multi-Column Support und Silbentrennung:

    [...] 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 [...]

  18. Pingback from Navegadores.org — Webkit añade soporte multi-columna:

    [...] 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 + [...]

  19. Rafael Says:

    Actually, Mozilla implemented multi-column support from Firefox 1.5, but column-rule isn’t implemented and it uses the -moz prefix.

  20. Pingback from Propietat Column - a.css, esbudellant estàndards:

    [...] 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 [...]

  21. Cellular Phone Says:

    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

  22. Pingback from Why Dont You Blog? » Links 11 Jun 07:

    [...] CSS3 multi column support in safari (shame it is such a minority browser… ) http://webkit.org/blog/?p=88 [...]