5 Excellent New Features in Safari 5

5 Excellent New Features in Safari 5

on Jun 8th 2010 with 68 comments

On June 7th, Apple released an update to their web browser, Safari 5. It includes a plethora of new features for web developers, including a faster JavaScript engine, better HTML5 support, extension support, and a great Web Inspector update. We will explore what these new features mean for web developers.

1. Improved Web Inspector

A good web inspector is extremely important to most web developers. Many people still prefer Firebug, which is an extension for Firefox, but the Webkit inspector has improved dramatically in the last few years.

CSS Inspector

In Safari 5, the web inspector has an improved CSS inspector panel, which lets you jump directly to a rule definition in the source file.

DOM Inspector

The DOM inspector is much improved, now allowing you to add attributes to DOM nodes in your document, remove nodes, and edit nodes as HTML, which lets you edit the entire tag as if it was a source file.

Resource Panel

The Resources panel is also improved, letting you see all HTTP redirects, along with full header information, including the HTTP status code.

JavaScript Inspector

The JavaScript inspector now lets you disable all breakpoints with a single click, and if you hover over an element while on a breakpoint, you can see the actual object values of what you are hovering over. This will be extremely useful for debugging purposes!

Timeline Panel

Safari 5 now has a new Timeline Panel, which provides information about everything that the browser is doing while you browse. This includes loading data, parsing it, laying it out on screen, and rendering it. Very cool for working on the performance of your website or application.

Audits Panel

Another added panel is the Audits panel, which much like the popular YSlow and Google Page Speed extensions for Firebug, suggests ways for you to improve the performance and compatibility of your site.

Console

The last change to the Web Inspector is that a separate panel for the JavaScript console has been created. This is nice because it allows the console to take up the entire height of the Web Inspector rather that the small part that it used to. It is still available in the old location, however, for convienent access while looking at another panel. For more information about the updates to the Web Inspector, check out this post on the Webkit blog.

2. Better HTML5 Support

Apple touts seventeen new HTML5 features in Safari 5, and you might have heard of their HTML5 showcase that they launched last week (it really contains more CSS3 than anything else, but that seems to be getting lumped under HTML5 as well!). Apple really seems to be pushing HTML5, and Safari 5 now has a score of 136 on html5test.com which is up from 113 in the previous release. Some of the new HTML5 features contained in Safari 5 include:

  • support for fullscreen video with closed captioning
  • geolocation
  • HTML5 AJAX History
  • drag and drop
  • nearly all of the HTML5 input types
  • official support for the new HTML5 elements such as <article>, <header> and <footer>.

Check out the complete list below.

Features For Realtime Webapps

Safari 5 includes two new HTML5 features for realtime webapps, like Friendfeed and Twitter. WebSocket is the first, and EventSource is the second. Now that three of the major browsers, Firefox, Chrome and Safari have implemented the WebSocket spec, writing realtime webapps using something like Node.js for a backend is becoming much more feasable.

WebSocket is essentially a two-way communication channel between your webapp in the browser and the server.

Since it is two way, you could write something like a Twitter client using it, and have new Twitter messages automatically appear as they are pushed from the server, and also push new tweets up as they are written. EventSource is a one way communication mechanism which allows the server to send events to the client but not the other way around. If you want to learn more about EventSource, check out this tutorial.

3. Extension Support

Because it is written using these technologies, it will be possible for someone to write a cross platform extension development library that works across Firefox (Jetpack), Chrome, and Safari 5.

There is now extension support in Safari, and, thanks to a new tool called Extension Builder in the already useful Develop menu, you can write your own. The extensions are written using standard web technologies, including HTML, CSS, and JavaScript and the Extensions API provided by Apple. Because it is written using these technologies, it will be possible for someone to write a cross platform extension development library that works across Firefox (Jetpack), Chrome, and Safari 5. All of them use web technologies to build extensions for their browsers. For security, all extensions for Safari 5 must be cryptographically signed by Apple through their Safari Dev Center.

Later this summer, Apple will open the Safari Extensions Gallery which will give users an easy place to find an install extensions. Panic is already showing off their extension called Code Notes, which, when it comes out, will allow you to add annotations to web pages by drawing and writing text notes directly on the site. The extension will then allow you to share your annotations via email. A very cool example of what the Safari 5 extensions API is capable of.

4. Faster JavaScript Engine

It wouldn’t be a complete browser upgrade if Apple didn’t tout their 30% faster JavaScript Engine. In the SunSpider JavaScript performance test, Safari ranks similarly to Google Chrome, and is still far ahead of the latest version of Firefox. While JavaScript performance is important, the real performance bottlenecks for web applications do not lie in the raw JavaScript language performance, but in the DOM API, which is notoriously slow in all browsers. I hope more attention is payed to DOM performance in the future.

5. Safari Reader

While not specifically a web developer feature, I’m sure you read a lot of articles like this one around the web. Safari Reader is essentally a way to get all of the destractions out of your way while you read just the article. Much like the Readability bookmarklet, Safari Reader auctomatically recognizes pages with an article in them, and presents a button in the toolbar that extracts the text and images from just the article section of the page and displays them in a nice readable font. It is also very nice that you can easily email and print just the article while you are looking at the Reader view. I’m sure that I will use this a lot!

While not a major release in terms of user features, Safari 5 is a very nice release for developers. With much better HTML5 support, increased JavaScript performance, and a better Web Inspector, Safari is now my development browser of choice. What about you?

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi, I'm Devon! I enjoy designing and coding websites that are beautiful on the inside and out. If you'd like to keep in touch, you can follow me on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://berfarah.com Bernardo

    However, not worth it on Windows, simply because Apple puts little to no effort into coding well for our platform. iTunes and the older Safari are proof of that – however gorgeous the latest Safari may be :/

    Btw, isn’t that just the standard webkit inspector? I use it in Chrome.

    • http://NathanBrauer.com Nathan J. Brauer

      Ya, I was going to say…
      The inspector in Chrome has had all these features for months if not a year already.

  • http://codesanity.net Tom Schlick

    Good Stuff! I’m liking the ability to have extensions for safari.

  • http://davekingsnorth.com DaveKingsnorth

    I downloaded Safari 5 last night and while there are some cool new features I’m finding it incredibly slow, especially compared to Chrome. Anyone else experiencing this.

    I also wrote a short post on tumblr regarding HTML5 support http://bit.ly/b9QIrs. Check it out and tell me what you think

    • http://www.dev4press.com/ Milan Petrovic

      Safari 5 is indeed very slow browser, bit faster than Safari 4, but no where near the speed of Opera or Chrome. Also, I tried the SunSpider and other tests, and their promo chart is way off. Safari 5 is faster than Firefox but it’s still behind both Opera and Chrome. After 2 hours with only 3 tabs active, Safari 5 uses way to much memory and it is very unstable to use. Maybe this is only on Windows, but if Apple wants to make a browser for Windows it has to work much more to make that happen. Even with this new version, it’s certain that most Windows users will not be switching to Safari any time soon and will stick to much more reliable solutions like Opera, Chrome or Firefox.

      • http://icontut.com nabeel

        On apple if you have an intel mac you have core central and other processer defined features which boosts safari and makes run smooth as silk.

    • Suse

      Yes. I have the 27 inch iMac. Much slower loading web pages after I downloaded Safari 5. And the refresh is snail-like with the refresh icon in a different place.

  • http://butenas.com Ignas

    Comparing to the Chrome it is a little bit slower for sure. But Chrome is more on the speed then on the stability. Also Safari uses big number of RAM sometimes… I don’t know, maybe the cache sometimes stays uncleared… But I like it, because of the inspector improvements, extensions (finally) and the speed of JS. Still for me Chrome seems to run JS faster but is is better then Firefox. To conclude I think I will move to the Safari 5 from Chrome and use the Firefox sometimes in the development, because of the extensions. Of course I will wait for the updates of the Safari and what is more important – I will wait for the extensions for Safari! Nice release from Apple.

    P.S. I should mention also that ClickToFlash plugin works great on this Safari. I like the possibility to run youtube videos on the internal OS player without using flash player. Because I did small experiment with the different browsers playing video in youtube. All of them had twice higher processor load then the Safari playing the video with the quicktime. So this tip could save your battery while you traveling and want to watch some funny stuff in youtube :)

    • Darren

      Apple finally got around (in March) to publishing a suitable API so that plugins like Flash could take advantage of hardware decoding of H.264. The new (pre-resease) version of Flash for Mac dramatically lowers processor load on newer Macs:

      http://labs.adobe.com/technologies/flashplayer10/gala/

  • http://cnicollonline.com Cody

    Hey, I came across this http://safariextensions.tumblr.com/ They’ve got a few extensions up. Worth checking out

  • http://www.jeffadams.co.uk Jeff Adams

    I WAS a Firefox fanboy for a while, then I tried Chrome and it just “worked”.

    Safari has got it right with teh Javascript speed, thats a big issue (speed) that needs to be addressed by the others in my book.

  • Josh

    I like the inspector changes. The reader thing in pretty neat, but I what happened to the RSS button that used to sit in the address bar? And can I turn off the progress bar there and move it back down to the status bar? Minor things I guess…

  • http://vladh.net vladh

    Nice roundup, definitely going to check it out!

  • http://www.scottcorgan.com Scott Corgan

    I was very much looking forward to extensions in Safari 5! I was really bummed when they didn’t announce it at WWDC, but I was patient and it paid off well. Now I am enjoying how Apple had to play catch up!

  • http://www.andrewburgess.ca Andrew Burgess

    Great review of Safari 5! It’s great that they’re supporting the new HTML5 elements.

    When I was on Windows, I was a Chrome guy, and I continued to use Chrome on Mac. But this release has got me trying Safari, and I’m liking it so far!

  • http://briancampbell.name Brian

    ok, seriously…where is the audit panel???? i can’t find it anywhere…

  • http://simonjs.com simonjs

    A few minor things additions I’ve noticed regarding Safari 5

    -Allows custom javascript popups (again) instead of opening new tabs/ fully-chromed windows
    -Now supports CSS3 background gradients and inset box-shadows

  • Shawn

    Unless I’m missing something, I don’t see an Audit Panel in Safari 5.

  • Brian Egan

    I’m not sure the info on the audits panel is correct. The new panel has been added to the WebKit Nightly and Chrome Dev browsers, but according to your screenshot and my installation, I don’t think it made it into Safari 5.

    Am I wrong? Is it just hiding somewhere?

    • Michael Deol

      I believe you are correct. It’s currently in Chrome and the WebKit nightly builds.

  • http://www.geekandhype.com Joffrey

    I don’t see the Audits tab… It’s only available in the latest WebKit release, not in Safari 5 (I think).

  • Shawn

    I don’t have it either. According to webkit.org (http://webkit.org/blog/1091/more-web-inspector-updates/), it’s been added to Safari and I see the screenshots but I don’t have it either.

  • http://www.spokt.com Dan

    I don’t see an audits panel in my version of Safari either… Do I have to enable it somehow?

  • Helen

    The reader doesn’t work with HTML5. Hihihi!

  • http://www.ottonova.nl/ Otto Coster

    It’s funny that there is Reader now. It solves the problem of the incredible small font sizes on many websites these days, the cluttered sidebars and lets you focus on the content again.

    Seems like a sign to us designers.

  • http://www.infrasoundkids.com L1

    Safari Reader IS based on Readibility.

  • faviouz

    No thanks, I’m sticking with Google Chrome!

    Looking good though.

  • http://www.seqana.com Odelon Berrocal

    Good Stuff! I’m liking ;)

  • http://www.thefourelements.de dave

    Still trying to figure out how Safari 5 detects the “article” part of a Page. They don’t use HTML 5 features to this – yet.

    • http://abdusfauzi.com xun

      me too. can’t figure out how to push my site to support this Reader feature.

  • http://www.webomatica.com/wordpress Webomatica

    Was already a Safari user, but the one reason for keeping Firefox around is Firebug. Will check out the Web inspector; then perhaps Firefox will only be kept around for browser compatibility…

  • Chris

    FF was my browser of choice because of the web dev tools. Now I like Safari more because it has some good web dev tools (well it has for awhile but just hard to use IMO). Now it’s more friendly and it’s always been better than FF if you are just browsing.

  • http://agustinsaldias.com.ar/ Agustin Saldias

    Actually, “Safari Reader” used some code of the Readability Bookmarlet.

    http://twitter.com/chrisdary/status/15672452287

    It’s something they took, modified it and then said they completely made it and revolutionized the industry, like always.

    At least they included the credits/license in the small-letters part :D

  • http://azzcatdesign.com Catherine Azzarello

    I switched to Safari at the beginning of the year for speed, but still found myself opening FF for Firebug use. However, the improvements to Safari’s web inspector may keep me on Safari all the time.

    Already love the reader option and HTML5 support. In fact, two days ago when I launched my site redesign, I was unable to fix an oddity that caused Safari to crash. (Not FF, Opera or even IE, just Safari!) With Safari 5, no more browser crashing. :)

    Cannot wait for the Coda extension!

    • Chris Sanders

      Where did you read there would be a coda extension?

      • Chris Sanders

        Whoops I found it.

      • http://fakepilot.com Mattias

        Why not share if you found it?

  • http://www.blackleafmedia.com/ Patrick

    Yawn. I know Chrome and Safari are very close under the hood, so why does it take Apple so long to push out a version of Safari months behind Chrome. And I don’t buy the whole “Apple took its time to polish it”…….it’s slower than Chrome and Chrome doesn’t crash either.

  • Stephen

    “I’m finding it incredibly slow”

    As am I…… Safari 4 that came pre installed on my iMac was very noticeably faster rendering pages… sucks

  • Khaled

    Safari 5 is coll but i still get the uggly message box when some one talk to me in the facebook chat i don’t why anyone have this problem

  • http://www.ShopHTML.com/?a=ntp9 ShopHTML

    Well, a number of these features are already available in Opera 10.53.

    The feature to remove ads is most obviously result of brewing rivalry between Apple and Goolge.

    Good move Apple :)

  • http://hdesignsPlus.com HDesignsPlus

    Thanks for the article, I downloaded it last night, it is fast and fun to use, but can any one tell me where is Web Inspector in PC version of safari5? I could not find most of these feature on my PC.

  • A reader

    Realized that the previous article about Safari wasn’t really, eh, good? ;-)

  • http://www.pixelsoul.com pixelsoul

    “Safari” and “Good” is an oxymoron. Why would anyone use that garbage when you can run Firefox on a Mac….

  • http://www.ate5.com Jordan Walker

    I wonder how long it will take for this one to be cracked thus compromising the OS.

  • http://www.levinsonaxelrodlawyer.com/ The Law Office of Levinson Axelrod

    Thanks for the Safari Update. Definitely intrigued with these new features.

  • http://www.edwardmargallo.com Edward

    I still love my Firefox and never had problems with it. I need the web developer toolbar and firebug!

    Although, Safari 5 does seem to be performing quite well too.

  • http://www.onyxsolution.com OnYX

    Step 1 – Install Safari 5
    Step 2 – Look for web development and seo add ons
    Step 3 – Launch Slacker Radio
    Step 4 – Safari Crashes
    Step 5 – Back to Firefox…

  • http://spotdex.com Davidmoreen

    I should try this, just to give it a fair change. The only problem would be that I am in love with Chrome. Since Safari kept insisting on crashing, 3 times a day I am not to excited to check it out as I would normally be. Although I’ll give the benifit of the doubt, since it employees some really cool new features.

  • Matt

    I installed this, and while websites render very quickly, the chrome itself just tends it self to being very slow. I don’t know why this is, but it really doesn’t bother me as long as I have Chrome available (which works just as well, if not better in my case).

  • Dan

    I love Safari. I dumped Firefox over a year ago – way too slow! Safari 5 is even better. Keep it up Apple!

  • http://www.satya-weblog.com Satya Prakash

    Through safari update I came to know few very important features in HTML 5 other than just few new tags.

  • http://www.blueseamaldives.com.mv Haab

    I like Safari Reader, its really easy and perfect !

  • http://hito.fr hito

    Well never too late for the re-open tabs…
    It’s available a long time ago for other browser :)

    What’s the most interesting thing is the safari reader !
    Hope to see this in other browser too ^^

    About performance yea it’s very subjective… there are always saying that’s they are the fastest.
    Opera is fast, chrome as well and safari certainly but i don’t use this browser that much.

    Firefox was my favorite but well time to change. He’s ressource hog and that get on my nerves.
    For now i’m using Chrome & Opera on my macbook pro and Firefox on my PC (much power on my computer so can use firefox ^^)

    Still for development i use firefox.

  • http://www.apepp.info Andrew Peppin

    …is it me or does safari 5 not render google maps very well? i’m having trouble with google maps on safari 5 with the map controls not rendering properly…

    • http://www.apepp.info Andrew Peppin

      …na! don’t worry people, it was just me having dumped the cache it all renders fine (for now anyway)…

      : )

  • http://superdit.com aditiarahman

    The html element inspector just like the google chrome have, or it is because built from the same engine webkit

  • arnold

    now downloading safari , thanks for the review, web inspector , html 5 support & safari reader is cool , anyway Im still chrome fanboy ;P

  • http://www.emrearici.com.tr Emre

    downloading safari :) really been very successful

  • http://www.evanbyrne.com Evan Byrne

    I don’t know about everyone else, but I’m very excited to see websocket support. This opens up a whole world of possibilities including communicating via FTP, Telnet, and other protocols directly from the browser!

  • http://beben-koben.blogspot.com/ Beben

    hmmm…its a progress from web developer
    godd good

Newer Comments →