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:
-webkit-box-shadow:2px 2px 5px rgba(0, 0, 0, 0.8);
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:
- Previous post: Seven accessibility mistakes you don’t want to make