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 Devon Govett
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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.
Ya, I was going to say…
The inspector in Chrome has had all these features for months if not a year already.
Good Stuff! I’m liking the ability to have extensions for safari.
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
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.
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.
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.
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 :)
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/
Hey, I came across this http://safariextensions.tumblr.com/ They’ve got a few extensions up. Worth checking out
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.
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…
Nice roundup, definitely going to check it out!
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!
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!
ok, seriously…where is the audit panel???? i can’t find it anywhere…
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
Unless I’m missing something, I don’t see an Audit Panel in Safari 5.
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?
I believe you are correct. It’s currently in Chrome and the WebKit nightly builds.
I don’t see the Audits tab… It’s only available in the latest WebKit release, not in Safari 5 (I think).
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.
I don’t see an audits panel in my version of Safari either… Do I have to enable it somehow?
The reader doesn’t work with HTML5. Hihihi!
I’m not sure what you’re referring to, Helen, specifically; I’ve visited some sites that use HTML5 structure (like http://www.focalstrategy.com/about_us.php or if you click on a post at http://eyoosuf.com/) and it shows a reader.
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.
Safari Reader IS based on Readibility.
No thanks, I’m sticking with Google Chrome!
Looking good though.
Good Stuff! I’m liking ;)
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.
me too. can’t figure out how to push my site to support this Reader feature.
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…
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.
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
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!
Where did you read there would be a coda extension?
Whoops I found it.
Why not share if you found it?
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.
“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
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
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 :)
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.
Realized that the previous article about Safari wasn’t really, eh, good? ;-)
“Safari” and “Good” is an oxymoron. Why would anyone use that garbage when you can run Firefox on a Mac….
I wonder how long it will take for this one to be cracked thus compromising the OS.
Thanks for the Safari Update. Definitely intrigued with these new features.
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.
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…
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.
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).
I love Safari. I dumped Firefox over a year ago – way too slow! Safari 5 is even better. Keep it up Apple!
Through safari update I came to know few very important features in HTML 5 other than just few new tags.
I like Safari Reader, its really easy and perfect !
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.
…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…
…na! don’t worry people, it was just me having dumped the cache it all renders fine (for now anyway)…
: )
The html element inspector just like the google chrome have, or it is because built from the same engine webkit
now downloading safari , thanks for the review, web inspector , html 5 support & safari reader is cool , anyway Im still chrome fanboy ;P
downloading safari :) really been very successful
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!
hmmm…its a progress from web developer
godd good