New HTML and CSS Features in Safari 3.1

[MacRumors]

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.

Visit article for examples

Article Link

[Toe]

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

[justflie]

Ooooooh, ahhhhh. Very nifty indeed.

[arn]

Originally Posted by Toe

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

[Toe]

Originally Posted by Toe

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.

[SimonTheSoundMa]

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<WebCore::CachedPage>) + 614
26  com.apple.WebCore             	0x96542177 WebCore::FrameLoader::commitProvisionalLoad(WTF::PassRefPtr<WebCore::CachedPage>) + 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

[Sky Blue]

The spinney thing is fun

[adamfishercox]

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.

[RogueLdr]

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

Thanks.

[applefan69]

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?

[arn]

Originally Posted by RogueLdr

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

[FakeWozniak]

Wonderful, more feature creep to slow down my surfing joy.

I suppose this is a nice feature for those that want it, but if they could just make sites compatible with a very minimum web browser, then life would be better. Why can't sites just get by with 1993 era HTML. Man that was fast! My Apple IIe could surf the web over a Super Serial card and 2400 baud modem as fast as my iMac can today. 80x24 text was enough and still is.
Lynx won't work on many sites now as they expect you have a ton of plugins. When all I want to do is see a jpeg, text, and maybe a moov.

[applefan69]

Originally Posted by FakeWozniak

Wonderful, more feature creep to slow down my surfing joy.

I suppose this is a nice feature for those that want it, but if they could just make sites compatible with a very minimum web browser, then life would be better. Why can't sites just get by with 1993 era HTML. Man that was fast! My Apple IIe could surf the web over a Super Serial card and 2400 baud modem as fast as my iMac can today. 80x24 text was enough and still is.
Lynx won't work on many sites now as they expect you have a ton of plugins. When all I want to do is see a jpeg, text, and maybe a moov.

Well assuming your remaing up-to-date with your computers (not using a 5 years or older computer) all these new features should be JUST as fast.

These thing evollve along with technology.

As computers got faster, developers wanted more complex options, so now CSS animations and HTML5 came along.

[irun5k]

Good to know Apple is staying on top of tech and new standards.

That being said, we won't see any of the advantages of this on the public Internet until IE supports the same standards.

[cdd543]

It's still much slower than firefox for me.

[HaGG]

It's great stuff but it's a shame we can't really touch it, we're still designing for Internet Explorer 6

[Frisco]

Originally Posted by cdd543

It's still much slower than firefox for me.

FireFox is king!

[CoreWeb]

I like the downloadable fonts, but I think there are some legal problems with actually allowing most fonts to be downloaded, so I don't know how much this will catch on. In addition, a lot of people may pick a lot of bad typefaces.

HTML5 Media support is nice, but until it is supported by all browsers (and even then, not until the current browsers are out of use) this technology will be useless.

CSS Animations are very nice, as they are non-obtrusive and degrade gracefully, so I like those; however, I'm not sure I'll actually be using them (my animations tend to be a bit more advanced and complicated). But maybe. I'll need to see if, next time I write a JavaScript animation library, I can hack this in, as the performance will likely be much higher.

Finally, getElementsByClassName is great!

[usingpond]

As a web designer constantly looking for ways to avoid using Flash, this is pretty much making me blow my load; especially because it's even more easily typed than Actionscript.

It's too bad this will only work for about 3% of the web for another year or two, at least.

[Foxglove9]

So how do I make the MacRumors Apple logo spin when I hover over it?

This is cool, but like someone previously said. I'm still happy with simple HTML clean pages. I also still think the effects in the original Star Wars Trilogy are fantastic so maybe I'm just getting old.

[n00basaur]

Originally Posted by Frisco

FireFox is king!

And Safari is queen. Just look how purdy the CSS is.

[rph105]

As a web designer too this, aww this here is just great, css is really doing it, love the linked fonts, love the HTML5 media support imagine doin that ay!

<video poster="../poster.jpg"></>

o0o0o I cant wait, and love the new CSS effects

[usingpond]

Originally Posted by CoreWeb

I like the downloadable fonts, but I think there are some legal problems with actually allowing most fonts to be downloaded, so I don't know how much this will catch on.

I think it's more of a read-only thing; that won't be any different from say advertising or emailing a PDF. The only real difference here is that designers won't have to make static, images for text if they want a specific look now.

In addition, a lot of people may pick a lot of bad typefaces.

This has always been true of the Internet, and probably always will be! I don't think this will bring any more of it though.

HTML5 Media support is nice, but until it is supported by all browsers (and even then, not until the current browsers are out of use) this technology will be useless.

CSS Animations are very nice, as they are non-obtrusive and degrade gracefully, so I like those; however, I'm not sure I'll actually be using them (my animations tend to be a bit more advanced and complicated). But maybe. I'll need to see if, next time I write a JavaScript animation library, I can hack this in, as the performance will likely be much higher.

Finally, getElementsByClassName is great!

Agreed!

[applefan69]

Originally Posted by usingpond

As a web designer constantly looking for ways to avoid using Flash, this is pretty much making me blow my load; especially because it's even more easily typed than Actionscript.

It's too bad this will only work for about 3% of the web for another year or two, at least.

hmmm... your riht this could be apples solution to the fact that Flash in Safari makes macbooks fans start roaring, and the processor running into the 65+ degrees celsius zone, when theyre normal temp is 52 degress celsius.

[usingpond]

Originally Posted by Foxglove9

So how do I make the MacRumors Apple logo spin when I hover over it?

This is cool, but like someone previously said. I'm still happy with simple HTML clean pages. I also still think the effects in the original Star Wars Trilogy are fantastic so maybe I'm just getting old.

Not to be a dick, but old Star Wars effects and old web pages are completely different in terms of quality and presentation, allegorically speaking.

Special effects are a one-time thing, and a group of people are paid thousands and thousands of dollars to make an effect millions of people will see. Web design, on the other hand, is an job that is usually done by either one person or a few people at a time, and all the tools that are currently used (Flash, AJAX, XHTML, CSS, JavaScript, etc.) only exist because they fill gaps that the others have.

There's a lot going on behind the scenes that most people don't realize; developments like this really just make designing the Internet a lot easier.

Also, do you really, really think that the Internet looked good ten years ago?! It looked awful! Of course, with more tools and accessibility, more people with no sense of design are making sites; but still it gives those with good sense a chance too. I would rather have diversity of style than bland HTML full of tables and borders with 256 colors or whatever.