This is the Weblog of Mediaproducer
Matthias Kretschmann more...

11thJun 08

Safari 4 Developer Preview - Better Performance, Overhauled Web Inspector, New CSS [Update]

SafariApple released a developer preview of the upcoming version of its web browser Safari to registered Developers. The Safari 4 Developer Preview is available for Mac OS X Tiger/Leopard and Windows. While the main changes are not visible to the user the most significant visible new feature is the overhauled Web Inspector.

You can access Safari’s Web Inspector through Develop > Show Web Inspector (you have to check the “Show Develop menu” box in the Preferences first to enable it). The Web Inspector, like the Firebug plug-in for Firefox, is a cool tool especially for Web Developers to inspect various elements of the website you’re browsing.

The Navigation inside the Web Inspector is now moved from left to the top and there’s a new “Databases” section and something like a browsing benchmarking “Profiles” section. All navigation tabs got new icons too.

Web Inspector

The “Resources” section got a slight overhaul too. With it you can see in which time the elements on your website were loaded with a nice graphical timeline.

Web Inspector

Among the visible new features in the Safari 4 Developer Preview is the ability to save websites as desktop applications or site-specific browsers (SSB) called Web Applications (File > Save as Web Application) and some more options for new windows or tabs in the General Preferences:

Safari 4 New Windows And Tabs

In terms of web standards and performance the Safari 4 Developer Preview passes the Acid3 performance test with 100/100 and is way more faster at rendering web pages.

Finally there seem to be a new css version implemented since Safari 4 now renders this complicated text-shadow property described in a recent blog article (5.5 Multiple Shadows) correct. Beside that the text-rendering is a lot different causing the light on dark text-shadow hack not to work on my website in Safari 4. Guess this is because all anti-alias rendering of text was replaced by sub-pixel rendering.

update 06/11/2008:Beside some more CSS3 stuff Safari 4 now includes all the cool recently announced WebKit features like CSS gradients, CSS masks, CSS reflection, CSS transform and CSS animation too. (Did I miss something?)

Another new feature is the new full page zoom for zooming on web pages which was already implemented in the WebKit nightlies but had to be manually activated. In old Safari versions pressing Command + or - increased or decreased just the text size, sometimes destroying the whole layout of the page. The Safari 4 Developer Preview behaves just like the recent Firefox 3 RC1 and zooms out or zooms in the whole page layout and not just the text.

Web Inspector

And while Apple just states in their press release that Safari 4 delivers “the fastest implementation of JavaScript ever, increasing performance by 53 percent”, other sources like MacRumors or Macworld UK expect this increased JavaScript performance to be based on the implementation of the freshly new SquirrelFish JavaScript engine.

If you’re a registered Developer you can access the Developer Preview via your downloads page on Apple’s Developer Connection site. Safari 4 comes as an installation package and requires a previously installed Safari 3.1.1 and a restart after installation. The new Safari 4 Developer Preview will overwrite your current Safari application but an uninstall package is also provided within the download. And be aware that somehow the whole font rendering in all applications based on WebKit (like NetNewsWire or Coda) will be changed by this installation.

Tags: , , , , , , , , , , , , , , , , ,




Apple Store

Related Posts



8 Responses to “Safari 4 Developer Preview - Better Performance, Overhauled Web Inspector, New CSS [Update]”

  1. Dylan Bathurst says:

    People always talk about how great Safari’s web inspector is. Maybe past versions were just terrible, but I have always felt it was sub-par compared to firebug. The ability to edit content within the browser has been a wonder for my development in FF. Also The complicated, overloaded styles menu in Web Inspector drives me crazy.

    What do you think?

  2. Paul says:

    Web app saving sounds interesting; but other than that, nothing new that wasn’t already in the Webkit nightlies’

  3. krema says:

    @Dylan: Agree with you. Use firebug too but it’s good to see that Safari’s Web Inspector gets an overhaul as some UI decisions weren’t that good. Nevertheless the UI is way more logical than Firebugs UI but I guess this is a rather subjective matter of taste. But the ability to inline edit elements (html and css) is implemented too.

    Strange: The last Web Inspector update by the WebKit team was announced here on Dec 2007: Web Inspector Update
    It seems that this new Web Inspector was directly developed by Apple and not the WebKit team since they didn’t post about the update in their blog. But just speculation, not sure about this.

    @Paul: This Web App thing is rather strange to me since it works just with an active internet connection. Beside lesser toolbars I can see no advantages over using the browser window… Do you see any advantages for it?

  4. sebkha says:

    @krema: To see the full advantage of “Save as Web App” I think you have to link an HTML 5 cache manifest (see http://www.w3.org/TR/offline-webapps/#offline) to the page you save. I’ve tried this in Safari 4, and it does change the behavior and make the app work when I have the server disabled. The spec says you have to serve the manifest with the text/cache-manifest MIME type, but I think Safari 4 will let you get away with text/plain.

  5. sebkha says:

    …nope, I tested a bit more and you really do need to set the manifest’s MIME type properly.

  6. Mulder says:

    I don’t know what version you’re referring to, but there are no additional options for Tabs in Preferences in the Safari 4 Preview running on Tiger.

    If you’re going to make statements like that, you need to clearly identify which version of the OS you’re running, and show a screenshot, as well as checking any other OS versions.

  7. krema says:

    sebkha, thanks for pointing this out. Will definitely test that to get more into this Web Application thingy.

    Hi Mulder, never heard of different features for the different platforms so testing the pure presence of the new features seemed needless to me. But I’ve added a screenshot of this preference and as you can see it’s very subtle compared to Safari 3.1.1 (it’s just the new check box under the Generals tab). Is it possible you didn’t see it in the first place? Could you please validate it again and confirm that it’s not showing up in Safari 4 DP on Tiger?

  8. paradrome-c says:

    holy! OMG! I wanna cry .haha

Leave a Reply

↓ Comment Guidelines ↓
  • Please remain on topic, respect other commenters and don't spam!
  • Uncivilized and spam comments will be deleted!
  • You are free to use basic HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe to Comments Feed for this post

Subscribe to Comments Feed for all posts

move to top
Download Day