-
200818 Mar
Apple surprised a lot of people by releasing Safari 3.1 today (myself included!), and amongst its list of new & improved features (
audio
andvideo
tags! SVG inimg
andbackground-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.
-
Comments
-
01.
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.htmlCan anyone confirm?
-
02.
-
03.
Iron_Storm says:Comment » March 18th, 2008 at 11:15 pm
yea, hopefully opera will catch up.. anyway great news
-
04.
I hope the Firefox team will pick up and challenge Opera and Webkit for this kind of stuff, as well as on Acid3.
-
05.
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 -
06.
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 […]
-
07.
Jim says:Comment » March 19th, 2008 at 3:43 am
> audio and video tags!
That’s “audio and video *element types*”.
-
08.
-
09.
Middleman says:Comment » March 19th, 2008 at 12:01 pm
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.
-
10.
@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 -
11.
It’s nice they updated the Windows version, just wish it would run on Win 2000 also.
-
12.
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.
-
13.
Were did you see that SVG in background-image was supposed to be added. My simple tests shows that it is not supported.
-
14.
Erik: I can confirm this doesn’t work in Safari 3.1: http://files.myopera.com/Fyrd/mb/svgmultiple.html
-
15.
@Stifu
“ForbiddenYou don’t have permission to access /Fyrd/mb/svgmultiple.html on this server.”
-
16.
-
17.
Madis: I just got the same thing when clicking the link I posted, then reloaded the page and it was fine.
-
18.
Emil Ivanov says:Comment » March 19th, 2008 at 11:22 pm
Hm reloading didnt helped for me, but hitting the go button did the trick :)
-
19.
Emil Ivanov says:Comment » March 19th, 2008 at 11:45 pm
Here is one demo which works in safari:
http://annevankesteren.nl/test/xml/svg/004.html -
20.
If I add “no-repeat” to my CSS background it works so I assume it is just an issue with repeating backgrouds.
-
21.
Martin Fallend says:Comment » March 20th, 2008 at 3:00 pm
Try this HTML5 video demo http://webkit.org/blog/140/html5-media-support/
-
22.
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? -
23.
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 […]
-
24.
Your RSS feed is loaded with spam links on this post. You might wanna check that out.
-
25.
@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
-
26.
Iron_Storm says:Comment » March 21st, 2008 at 6:44 pm
wow, I must admit, this site looks really cool in Safari 3.1
this browser has some skills :) -
27.
Brad says:Comment » March 22nd, 2008 at 1:27 am
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.
-
28.
@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).
-
01.