5 Excellent New Features in Safari 5


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.


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 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?

Related Posts
  • Code
    Mobile Operating Systems in 2014Dj45i preview image@2x
    As a mobile developer, it's good to be familiar with the most important platforms in the mobile space. In this article, we'll take a look at the most important mobile operating systems, their current state, and how they're performing in the current mobile landscape.Read More…
  • Code
    Interview With Peter CooperPeter cooper wide retina preview
    Catch up with software developer, Peter Cooper, just in time for O'Reilly's Fluent Conference.Read More…
  • Code
    JavaScript & AJAX
    Creating Brackets ExtensionsDeeper in brackets retina preview
    A little while ago I wrote about the recent updates to the Brackets editor. Brackets is an open source project focused on web standards and built with web technologies. It has a narrow focus and therefore may not have a particular feature you've come to depend upon. Luckily, Brackets ships with a powerful extension API that lets you add any number of new features. In this article, I'm going to discuss this API and demonstrate how you can build your own extensions.Read More…
  • Code
    Tools & Tips
    Browser Testing in the Cloud ReduxBrowser testing cloud redux retina preview
    I've written quite a bit about browser testing solutions trying to help identify techniques and tools that make cross-browser development easier. My last article on the subject covered how to use BrowserStack to test any number of browsers all from one central tool; your own browser. I was on a Windows PC back then so testing multiple browsers was a bit easier and testing tools were mainly complementary to my work. Now that I'm on OS X, the need for tools to round out my testing strategies is even more important, specifically because of the lack of Internet Explorer on the OS. I'm a bit of a stickler for what I install on my computers and I prefer online tools when available. I'm also always on the hunt for new tools that make cross-browser testing easier and decided to give a run. I'll go over some of the key features of the service and how to leverage it to improve your testing capabilities.Read More…
  • Code
    Interview With Brian Leroux of Adobe's PhoneGap TeamBrian interview retina preview
    Mobile web development is tough especially when you're trying to offer native-like experiences to users. Several years ago, a small company called Nitobi took on the effort of simplifying building native mobile apps using traditional web development skills. Ambitious and sometimes controversial, the effort known as PhoneGap grew out of this need and one converts left and right. One of the main masterminds behind the framework is Brian Leroux who apart from being well-respected for his development skills and incredibly likeable personality is also one of the savviest mobile developers around. Considering the number of mobile devices PhoneGap targets, you have to be pretty well-versed in a variety of devices and OSs. Nitobi has since been acquired by Adobe and the PhoneGap codebase donated to the Apache Software Foundation to continue its development as the Apache Cordova project. Brian moved over to Adobe and continues to steward the codebase. In this interview, we'll chat with Brian about how PhoneGap came about and what the future of mobile web holds.Read More…
  • Code
    What Are You Using?Preview 400
    We spend a lot of time following the thought leaders in web development, in many cases using the tools and libraries they've built, reading the posts they've written, articulating cool techniques they've learned, and in some cases, attending the defining conference for a specific language. But wouldn't it be great to learn what they focus on and what they use to build such awesomeness?Read More…