Apple surprised a lot of people by releasing Safari 3.1 today (myself included!), and amongst its list of new & improved features (
videotags! SVG in
background-image!) are two which will be of interest to readers of this blog: full CSS3 selectors support, and web fonts.
The first means that Safari now supports the missing nth-child / nth-of-type selectors, which are useful for styling tables and lists (amongst others), and also now passes our Selectors Test (which, while by no means exhaustive, is very useful). Opera 9.5 will also support these selectors; Firefox 3 probably won’t, IE8 is unknown.
The second is the more exciting to me, and I’ve already written a quick introduction (with example) on my own blog. In a nutshell, you can now embed fonts in your pages to display even to users who don’t have that font installed. There’s a longer article with more examples on A List Apart.
We’d known most of this was being implemented by Webkit/Safari, but had no idea it would be coming so soon. Congratulations to the whole team, and here’s hoping it serves as an example to the other browser makers.
You can skip to the end and leave a response.
Hmm, SVG in image seems to work, but not as CSS background… See for example:
Can anyone confirm?
Is it me, or either none of the testsites work, or Safari fails to play the video?
Safari 3.1 released - congratulations to the Webkit team :: Coding and Dreaming says:Comment » March 19th, 2008 at 2:33 am
[...] pointed out in an article on CSS3.Info that Safari 3.1 had been released either by a standalone install or automatic software update for [...]
Can’t get the audio or video working. The examples over at dev.opera using svg as a background is not working.
Im running Safari on windows.
@Madis and Middlman: The simple demo with quicktime movie is available on this page: http://webkit.org/blog/140/html5-media-support/
If you want to play demos on that page: http://my.opera.com/desktopteam/blog/2007/11/08/experimental-video-build-released-on-opera-labs you which plays theora files, you should first install XIPH quicktime component: http://xiph.org/quicktime/download.html After installing it please remember to start quicktime first and after that restart Safari.
As far as I tested stop buttons doesn’t work in Safari and also SVG files with video element doesn’t work.
Regarding SVG as background-image. Unfortunately using SVG in this case and also as src attribute for img element is currently limited to svg files with explicit width
and height set. Check this comment for details: http://bugs.webkit.org/show_bug.cgi?id=5971#c23
The Video and Audio stuff used in Opera’s examples wont work, as Opera supports Ogg Theora (just like Firefox). As you can imagine, Apple owns proprietary video format wrappers like Quicktime .mov. It seems they’d prefer to push those rather than a open format like ogg. You can see this on iPhone, where Quicktime is pushed for video instead of Flash (which is also proprietary, but at least works on more platforms than Quicktime does). Ogg will work in Safari if you install the codec in Quicktime, but you can’t rely on users to do that.
Martin: the video on that page doesn’t work here. I get the fallback text instead. Probably because I uninstalled Quicktime, as I grew tired of it being overly obtrusive and doing evil things behind my back (changing my settings, ignoring the options I chose, etc).
Still, I expected it to propose me to download Quicktime in order to view the video. After all, they’ve been forcing it down my throat all this time, why not now?
RefreshCleveland promotes design, technology, usability, and web standards in Cleveland, Ohio » Blog Archive » Safari 3 meet CSS3 says:Comment » March 20th, 2008 at 10:33 pm
[...] Gasston has a great post with examples over at [...]
Your CSS test says that it passes on the “:checked” pseudo-element. But I don’t think it should pass that, because user changes of the checked status (i.e. by clicking to check or uncheck a checkbox or radio button) do not trigger style changes on the element. At least they do not when there is a sibling selector combined with it.