Got a tip for us? Share it...

New HTML and CSS Features in Safari 3.1

The new version of Safari (3.1) that was released today incorporates the latest HTML and CSS capabilities found in Webkit. While we previously featured the changes, they are worth repeating now that 3.1 is out.

Click me in Safari 3.1

CSS Animation - transitions, and animations allowing you to do CSS-based animations and Transforms. (example above from Surfin' Safari)

HTML5 Media Support - New 'video' and 'audio' tags that allow you to embed video/audio content easily. Example video embedded here.

Downloadable Fonts - instead of having to rely on common fonts available to browsers, you can link to actual font files within your CSS. For example, this html page takes advantage of web fonts and will render differently depending on which version of Safari you are using (more examples and explanation):


Safari 3.0 on the left, 3.1 on the right.


Other features include native getElementsByClassName and client-side database storage.

Top Rated Comments

(View all)

51 months ago
So... are these features in compliance with some standard (HTML, CSS, whatever)?
Rating: 0 Positives / 0 Negatives
51 months ago
Ooooooh, ahhhhh. Very nifty indeed.
Rating: 0 Positives / 0 Negatives
51 months ago

So... are these features in compliance with some standard (HTML, CSS, whatever)?


yes, but obviously, most web designers can't use them because most browsers don't support them yet... but eventually.

arn
Rating: 0 Positives / 0 Negatives
51 months ago

So... are these features in compliance with some standard (HTML, CSS, whatever)?


Oh, I see...

CSS Animation is obviously CSS.

HTML5 transitions... I'm gonna guess those are HTML 5.

Downloadable Fonts are CSS as well.
Rating: 0 Positives / 0 Negatives
51 months ago
HTML5 link crashes Safari when clicked for me. *sigh*




Exception Type: EXC_BAD_ACCESS (SIGSEGV)
Exception Codes: KERN_INVALID_ADDRESS at 0x00000000b1d45010
Crashed Thread: 0

Thread 0 Crashed:
0 ...romedia.Flash Player.plugin 0x1771cf06 memcopy_mmx + 532286
1 ...romedia.Flash Player.plugin 0x1771aecc memcopy_mmx + 524036
2 ...romedia.Flash Player.plugin 0x174d04b0 0x17280000 + 2426032
3 ...romedia.Flash Player.plugin 0x17637cc0 Flash_EnforceLocalSecurity + 63128
4 ...romedia.Flash Player.plugin 0x1763049e Flash_EnforceLocalSecurity + 32374
5 ...romedia.Flash Player.plugin 0x17628669 Flash_EnforceLocalSecurity + 65
6 com.apple.WebKit 0x90f9a145 -[WebBaseNetscapePluginView(Internal) _destroyPlugin] + 37
7 com.apple.WebKit 0x90f9a0c2 -[WebBaseNetscapePluginView stop] + 322
8 com.apple.WebKit 0x90f92e45 -[WebBaseNetscapePluginView viewWillMoveToSuperview:] + 53
9 com.apple.AppKit 0x9212937b -[NSView _setSuperview:] + 279
10 com.apple.AppKit 0x921330a9 -[NSView removeFromSuperview] + 338
11 com.apple.WebCore 0x96670772 WebCore::safeRemoveFromSuperview(NSView*) + 178
12 com.apple.WebCore 0x96670670 WebCore::Widget::removeFromSuperview() + 208
13 com.apple.WebCore 0x9666d461 WebCore::RenderWidget::destroy() + 129
14 com.apple.WebCore 0x965a090f WebCore::Node::detach() + 47
15 com.apple.WebCore 0x965a080b WebCore::ContainerNode::detach() + 43
16 com.apple.WebCore 0x965a080b WebCore::ContainerNode::detach() + 43
17 com.apple.WebCore 0x965a080b WebCore::ContainerNode::detach() + 43
18 com.apple.WebCore 0x965a080b WebCore::ContainerNode::detach() + 43
19 com.apple.WebCore 0x965a080b WebCore::ContainerNode::detach() + 43
20 com.apple.WebCore 0x965a080b WebCore::ContainerNode::detach() + 43
21 com.apple.WebCore 0x965a0732 WebCore::Document::detach() + 178
22 com.apple.WebCore 0x965433d8 WebCore::Frame::setView(WebCore::FrameView*) + 184
23 com.apple.WebCore 0x96543283 -[WebCoreFrameBridge createFrameViewWithNSView:marginWidth:marginHeight:] + 51
24 com.apple.WebKit 0x90f7c963 WebFrameLoaderClient::transitionToCommittedForNewPage() + 339
25 com.apple.WebCore 0x96542af6 WebCore::FrameLoader::transitionToCommitted(WTF::PassRefPtr) + 614
26 com.apple.WebCore 0x96542177 WebCore::FrameLoader::commitProvisionalLoad(WTF::PassRefPtr) + 119
27 com.apple.WebCore 0x965420a5 WebCore::DocumentLoader::commitIfReady() + 85
28 com.apple.WebCore 0x9659cf53 WebCore::DocumentLoader::commitLoad(char const*, int) + 35
29 com.apple.WebCore 0x9659cb15 WebCore::ResourceLoader::didReceiveData(char const*, int, long long, bool) + 69
30 com.apple.WebCore 0x9659ca87 WebCore::MainResourceLoader::didReceiveData(char const*, int, long long, bool) + 71
31 com.apple.WebCore 0x9659ca38 WebCore::ResourceLoader::didReceiveData(WebCore::ResourceHandle*, char const*, int, int) + 56
32 com.apple.Foundation 0x95db13b7 -[NSURLConnection(NSURLConnectionReallyInternal) sendDidReceiveData:originalLength:] + 119
33 com.apple.Foundation 0x95db131e _NSURLConnectionDidReceiveData + 94
34 com.apple.CFNetwork 0x900160af sendDidReceiveDataCallback + 518
35 com.apple.CFNetwork 0x9001376d _CFURLConnectionSendCallbacks + 1559
36 com.apple.CFNetwork 0x900130d9 muxerSourcePerform + 283
37 com.apple.CoreFoundation 0x906ca62e CFRunLoopRunSpecific + 3166
38 com.apple.CoreFoundation 0x906cad18 CFRunLoopRunInMode + 88
39 com.apple.HIToolbox 0x91dea6a0 RunCurrentEventLoopInMode + 283
40 com.apple.HIToolbox 0x91dea4b9 ReceiveNextEventCommon + 374
41 com.apple.HIToolbox 0x91dea32d BlockUntilNextEventMatchingListInMode + 106
42 com.apple.AppKit 0x921497d9 _DPSNextEvent + 657
43 com.apple.AppKit 0x9214908e -[NSApplication nextEventMatchingMask:untilDate:inMode:dequeue:] + 128
44 ...rcmoini.smartscrollx_sxobjc 0x1564f49b sx_objc + 14303
45 com.apple.Safari 0x0000806e 0x1000 + 28782
46 com.apple.AppKit 0x921420c5 -[NSApplication run] + 795
47 com.apple.AppKit 0x9210f30a NSApplicationMain + 574
48 com.apple.Safari 0x000b9a76 0x1000 + 756342
Rating: 0 Positives / 0 Negatives
51 months ago
The spinney thing is fun :)
Rating: 0 Positives / 0 Negatives
51 months ago
Is anyone else noticing tons of flashing a flickering when pages load in Safari 3.1? And also during flash video? It's really annoying.
Rating: 0 Positives / 0 Negatives
51 months ago
Perhaps someone in Web Development could share where other browser engines (and the browsers that use them) are with these features.

Thanks.
Rating: 0 Positives / 0 Negatives
51 months ago
Sweet, all these things work perfectly on safar 3.1 for me.

I'd LOVE to see what a company full of amazing web-based programers like Google could do with this stuff.

I mean, we all think Gmail is great now... imagine what googles gonna do when all this HTML5,a dn CSS animations stuff works in every browser?
Rating: 0 Positives / 0 Negatives
51 months ago

Perhaps someone in Web Development could share where other browser engines (and the browsers that use them) are with these features.

Thanks.


According to Apple PR:

Safari 3.1 is the first browser to support the new video and audio tags in HTML 5 and the first to support CSS Animations. Safari also supports CSS Web Fonts, giving designers limitless choices of fonts to create stunning new web sites.


So, sounds like web fonts are already supported in other browsers.

arn
Rating: 0 Positives / 0 Negatives

[ Read All Comments ]