Safari 3.1 pushes CSS3 support forward
Apple surprised a lot of people by releasing Safari 3.1 today (myself included!), and amongst its list of new & improved features (audio and video tags! SVG in img and 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.
Hmm, SVG in image seems to work, but not as CSS background… See for example:
http://www.treebuilder.de/svg/svgincss/test2.html
and:
http://files.myopera.com/dstorey/experiments/roundedcorners.html
Can anyone confirm?
Wow, it beated Opera :o
yea, hopefully opera will catch up.. anyway great news
I hope the Firefox team will pick up and challenge Opera and Webkit for this kind of stuff, as well as on Acid3.
Is it me, or either none of the testsites work, or Safari fails to play the video?
Examples:
http://my.opera.com/desktopteam/blog/2007/11/08/experimental-video-build-released-on-opera-labs
[...] 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 [...]
> audio and video tags!
That’s “audio and video *element types*”.
Opera 9.50 supports video tag in special build
Can’t get the audio or video working. The examples over at dev.opera using svg as a background is not working.
http://dev.opera.com/articles/view/new-development-techniques-using-opera-k/
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
It’s nice they updated the Windows version, just wish it would run on Win 2000 also.
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.
Were did you see that SVG in background-image was supposed to be added. My simple tests shows that it is not supported.
Erik: I can confirm this doesn’t work in Safari 3.1: http://files.myopera.com/Fyrd/mb/svgmultiple.html
@Stifu
“Forbidden
You don’t have permission to access /Fyrd/mb/svgmultiple.html on this server.”
@ Erik: It’s in the release notes: “Adds support for SVG images in![]()
elements and CSS images”
Madis: I just got the same thing when clicking the link I posted, then reloaded the page and it was fine.
Hm reloading didnt helped for me, but hitting the go button did the trick :)
Here is one demo which works in safari:
http://annevankesteren.nl/test/xml/svg/004.html
If I add “no-repeat” to my CSS background it works so I assume it is just an issue with repeating backgrouds.
Try this HTML5 video demo http://webkit.org/blog/140/html5-media-support/
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?
[...] Gasston has a great post with examples over at [...]
Your RSS feed is loaded with spam links on this post. You might wanna check that out.
@dan coulter thx for noticing, I fixed that… there’s still a hack into xmlrpc.php in WordPress somwhere it seems, even in 2.3.3
wow, I must admit, this site looks really cool in Safari 3.1
this browser has some skills :)
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.
@brad: dynamic style changes (user or javascript) when used with the sibling selectors are known buggy issues. they work fine otherwise. in fact IIRC they were partuially fixed a few days ago (fixed in that if you use one sibling selector it now updates, but two or more is still broken).