New CSS properties in Safari

It seems like the Safari team has been pretty busy implementing new CSS properties lately. First out is text-stroke, a new (and non-standard, so not for real-world use) CSS property that can be used to control the fill and stroke colours as well as the stroke width of text. A description and a couple of examples are available in Introducing Text-Stroke.

Next is support for the CSS 3 box-shadow property, which lets you apply a drop shadow to a box. It uses the same syntax as text-shadow, which Safari has supported for a long time. More on that in Box Shadow.

And the last one (for now) is CSS3 Multi-Column Support, which lets you specify a number of columns that a block will be divided into. Note that Mozilla and Firefox have supported Multi-column layout for some time.

Here are some examples (which you will need a recent WebKit nightly build to see–sorry non-Mac users). Please excuse the inline, invalid CSS:

Text-stroke: -webkit-text-stroke:1px #000;

Box-shadow: -webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.8);

Multiple columns. If you are reading this in a recent WebKit nightly or Firefox, this text should be evenly distributed across two columns, separated by a 2em wide gutter with a 1px dotted column rule (no column rule appears in Firefox 2.0.0.1). The following CSS is used to achieve the effect:

  1. padding:0.5em;
  2. border:2px solid #999;
  3. -webkit-column-count:2;
  4. -moz-column-count:2;
  5. -webkit-column-rule:1px dotted #999;
  6. -moz-column-rule:1px dotted #999;
  7. -webkit-column-gap:2em;
  8. -moz-column-gap:2em;

And for those of you who do not have a Mac or are using an older version of Mac OS X, here is a screenshot:

Posted on February 6, 2007 in Browsers, CSS, Quicklinks

Comments

  1. They also recently implemented -webkit-border-radius, which works like -moz-border-radius as far as I’ve heard (but haven’t been able to test). I don’t know how recent though, so it might be old news but I think it fits to this thread anyway.

  2. That CSS is not invalid, since the leading dash (or a leading underscore) in property names (and keywords!) is reserved for vendor-specific extensions (even though their usage is discouraged).

  3. I been reluctant to use vendor-specific extensions since I wanted my site to appear identical in all browsers but - Lately - I no longer care: CSS 2.1 Selectors, Webkit and Mozilla offer too many practical properties. I will make certain that all of my CSS will validate except for vendor-specific extensions. And, Yes - according to the W3C specifications - vendor extensions shall never validate. I’ll knowingly use them.

  4. February 6, 2007 by Roger Johansson (Author comment)

    Devon: Ah, I didn’t realise they did that. Thanks.

    David: The way I understand it is that vendor-specific extensions are invalid despite using correct syntax. The CSS Validator also flags them as errors.

  5. Hmm, multi-column support…. Now this is interesting. I’d love to see this get some more publicity.

  6. How about posting a screenshot?

    Although I’m not a Mac-user (yet), I’d really like to know what the actual results look like…

  7. Funny how people thought we’d seen the last of proprietary code after the first browser wars.

    I can just see this leading to stylesheets like this:

    -webkit-column-count:2; -moz-column-count:2; -presto-column-count:2; -trident-col-ct:2; -other-col-count:2;

    Syntax variations on purpose, since they’re proprietary it’s not like there’s anything to say everyone will use the same suffix. So much for standards eh. Still, usable column control would be nice. Obviously I’d hope to see the good ideas standardised and rolled into specs, preferably before their use becomes widespread. It takes years to undo that sort of thing.

  8. you will need a recent WebKit nightly build to see – sorry non-Mac users

    And Mac users - I have OS X 10.3.9 and can’t use the Webkit nightlies.

  9. February 7, 2007 by Henrik

    Ben: Actually I think this is a good way to enable the browsers to innovate and try out coming standards.

    It’s clearly indicated that the property is an experimental feature, and when such a feature becomes a recommended standard, it’s said that the support for the vendor prefixed property shall be removed.

    Lastly I think it’s really important to test the standards proposals to ensure the quality of them and this is one of the tools to do just that.

  10. Multi-column support is a really great feature, I’d tried this out on Firefox a while ago and it’s great. That combined with these other additions would go a long way to making some more interesting and functional site layouts.

  11. February 7, 2007 by Derek A

    How about some screenshots for the non-Safari users?

  12. February 7, 2007 by Philippe

    Ben (comment 7): All those -vendor- prefixes are used because the implementation in WebKit and Gecko is based on draft specifications (and no, they -Gecko, Webkit- didn’t invent those things out of thin air): http://www.w3.org/TR/css3-multicol/ http://www.w3.org/TR/css3-background/#the-box-shadow http://www.w3.org/TR/css3-background/#the-border-radius

  13. I’m not sure about this, but I think the multi-column stuff works in Safari without their prefix, i.e. column-count would work just fine. This is what it seemed like from their blog entry: http://webkit.org/blog/?p=88

    I just wish Mozilla would remove their prefixes and that Opera would support this stuff too, and border-radius. No point in hoping for IE to support it…

  14. I would also appreciate a screenshot.

  15. February 7, 2007 by Roger Johansson (Author comment)

    A screenshot is now available.

  16. Just curious, but since Firefox doesn’t support the column rule, why did you apply the CSS to display it?

  17. February 8, 2007 by Roger Johansson (Author comment)

    Kevin: I read somewhere that -moz-column-rule is supported in later versions of Gecko, but it doesn’t look like it is. Oh well, maybe some day.

  18. I’m wondering… Will these improvements be in 10.5’s Safari, or will they stick to the nightly builds for a while longer?

  19. February 9, 2007 by Matt Babbs

    All the -moz- extensions in Gecko are listed in the CSS Reference: Mozilla Extensions section on the developer.mozilla.org documentation. There’s no sign of -moz-column-rule, unfortunately.

    I came across a similar reference page for KHTML once (although I can’t remember the uri); is anything like these available for Webkit and Presto?

  20. Its nice to see that the Safari team as well as the Mozilla team are still contributing to the implementation of the new properties. I find multi-column property extremely useful, and may be after a couple of years even IE will implement it =O). As for text stroke, it is nice, but easy to substitute with an image (i know if you have a text that is changing a lot it can become a pain in the ass =O)), so for me it is by far a very secondary css property.

  21. Very interesting. So how long before we can expect to be using these real-world style?

  22. I wonder how well box-shadow and border-radius play with each other. Have you tried that out? With those combined you could do very nice things.

  23. February 12, 2007 by Jeffrey Wilson

    While these are neat features, they aren’t very useful as vendor-specific code. Is there any way to emulate these features using standard CSS? That would certainly be much more useful.

  24. Jeffrey >> As far as I’m aware, no. Not at the moment anyway. It’s still very much vendor-specific, just like the -moz-border-properties in gecko-based browsers. Unfortunately…

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.