What you need to know about Safari 4 Beta

What You Must Know About the New Safari 4 Beta

on Feb 26th 2009 with 101 comments

Apple released Safari 4 Beta last Tuesday, for both Mac and Windows users. The updated browser received a UI update, many major improvements under the hood, and plenty of new features to play with. The new browser passes the ACID2 and ACID3 tests with a score of 100, and contains a few next-generation technologies that web developers will love, once we can take advantage of them. Let’s take a look at what’s new.

Top Sites

Perhaps the most noticeable new feature is “Top Sites,” a screen that comes up when you first launch the browser. The 3D view shows your most-used web sites, keeping them within easy reach when you start your day of browsing, as well as when you open a new tab. A blue star in the corner of a thumbnail denotes that the site has been updated.

Safari automatically decides what sites to put in the grid, but you have some control. You can remove sites from the screen, rearrange them, and pin them to the page so they won’t be removed if your browsing habits would cause them to do so. You can make the thumbnails bigger or smaller, changing the number of displayed sites when you do so.

This feature, reminiscent of Google Chrome and Opera, can be configured to be displayed to your liking. If you prefer to have a specific homepage instead of the Top Sites page, you can set one. It is also possible to stop it from displaying whenever you open a new, blank tab.

Tabs

Like Chrome, Safari 4′s tabs are located at the top of the window, and have a similar window-docking feature. You can pop a tab out and convert it to a standalone window, or do the inverse, docking an existing window into the tab bar. It takes a little while to acclimate to the new tab UI, but it seems to work well once you get the hang of it.

One little inconvenience is the difficulty of re-ordering tabs. You have to drag them from the little handles in their upper-right corners, rather than just grabbing the main part of the tab. If you try to move the tabs around “the old way,” you will drag the entire window, as the tab bodies act as the window top. Personally, I tend to sort my tabs often, so this would definitely hinder my productivity, for awhile at least.

Coverflow

Apple sure loves their Coverflow… Safari 4 applies the spiffy effect all over the place. Your browsing history is displayed in a two-paned Coverflow view, and the Bookmarks screen is too.

This navigation method works surprisingly well, especially with the full-text search tool that allows you to narrow things down. It’s easy to pick out what you’re looking for, and it certainly looks pretty.

Search

There are several search-related improvements in the latest Safari beta. The aforementioned full-text search of history and bookmarks can find you the page you seek quickly and with very good precision. It searches the actual page content, from an internal cache one would assume, in addition to the standard title and URL information.

The Google search box to the right of the URL bar has been refined. It displays search term suggestions as you type, including recent queries. An option to use Yahoo results is also included, for Windows users. The useful SnapBack feature remains, providing an easy way to jump back to your results after perusing one of the recommended pages.

Speed

The updated rendering engine is snappy, and JavaScript execution is good too. They seem to be comparable to Google Chrome, possibly faster, though it’s impossible to tell without more formal speed tests.

Web apps like GMail and Bloglines worked well, and didn’t seem to lag for any reason other than network or server problems. I didn’t notice any glaring CSS or JavaScript bugs during the time I used the browser.

Apple claims that Safari 4 Beta tops Chrome and Firefox 3 for speed in both HTML rendering and JavaScript execution, leaving Microsoft’s Internet Explorer in the dust. Bold claims, though we will have to wait to see 3rd-party testing results, which will surely be available soon.

Page loading times are improved with speculative loading. Safari loads files ahead of time so they won’t have to be downloaded later, when you want the page.

Development Features

Safari 4 packs plenty of useful features for web developers. A new Develop menu, which can be activated in the Preferences, houses many of them.

One of the new developer tools is a handy submenu for changing the User Agent string. Safari can masquerade as any browser you may require. You can set one of the numerous versions of Internet Explorer, Firefox, Safari, Opera, Mobile Safari, or a custom value.

One of the more prominent entries in the Develop menu is the Web Inspector. The little window is similar to Firefox’s popular Firebug extension. You can read and modify CSS information, analyze size and loading times, and debug scripts. If you do much in the way of front-end development, this is the killer feature right here.

A “Snippet” window can be called-up to quickly test bits of HTML out. As you enter markup a preview is displayed underneath.

The Develop menu also has several options for disabling browser functions temporarily, including the cache, JavaScript, CSS, images. With the advent of the menu, Safari has become a powerful development tool.

Next-Gen Features

Safari is ready for the future of the internet, including support for technologies that are on the bleeding edge, and aren’t entirely standardized yet. HTML 5 offline support is one of those. Data can be cached in a local SQL database for access when an internet connection isn’t available, a la Google Gears.

CSS 3 “web fonts” are supported as well. Safari has the ability to recognize a properly specified font and download it if it is not already installed, enabling web designers more control typographically.

HTML 5 media elements are also supported. The browser can handle certain audio and video formats natively, without the help from an external media player plugin, just like images are done.

Conclusion

Safari 4 is shaping up to be an excellent browser, a real competitor in the New Browser Wars. Keep in mind that it is still a beta for now, and may have some rough edges. That’s no reason for you not to try it though. It seems stable (on the Mac side at least) and it has a lot going for it.

You can download Safari 4 Beta here. Don’t forget to read the full feature list!

 
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.

Matt is a blogger, web developer, and writer of fantasy short stories. When he's not working on his many web projects, he can usually be found bowling or reading.  

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

    I agree with you. I’ve tried it since they launched the Public Beta and I like it!

  • Branden Silva

    I dig it. I’m going to have to start utilizing @font-face for sure.

  • http://www.teddy-o-ted.com teddY

    Thanks for the walkthrough! I guess the most appealing parts of Safari 4 will be the cover flow, the top sites as well as the user agent feature. My first experience with Safari 4 is a little bit more neutral than positive due to the difficulty in rearranging tabs and the smaller sizes, but I guess I will get used to them sooner or later :) that little problem will not stop me from embracing all the other wonderful features Safari 4 has got!

    And one more important thing – Safari 4 passed the Acid3 test! *woohoo!*

  • http://simplesaeed.com Saeed Jabbar

    It takes very little time to get used to the changes in the interface. Coverflow is nice and all but it has been used a bit too much. Looking forward to trying out the web inspector.

  • Lorenzo

    Safari 4 is awesome! I’ve never seen such a speed. The new web inspector makes me totally forget Firebug and FF.
    Anyone knows where did “Save as web application…” feature go?

    PS: if you don’t like the new tab look you can revert to the old one by simpli entering this in the terminal:

    defaults write com.apple.Safari DebugSafari4TabBarIsOnTop -bool NO

  • Rick

    The inspector you’re praising so much looks exactly (yes, exactly) like the one found in Chrome… http://images.google.com/images?q=google+chrome+inspector

    It’s a brilliant tool for debugging, but was broken in the last dev release. Seems fixed and improved in the latest one though.

    Firebug is still the best, which is a shame since Firefox feels bloated now that I’m used to Chrome

    • Tycho

      The Web inspector feature was actually available in Safari 3.2 if anyone remembers that, and yes you could turn the development menu through the preferences. It was available Before Google Chrome was resleased

  • Jona Goldman

    It’s like they took the best from Chrome and Firefox (and a little bit from iTunes) and put it together…. Too bad I really don’t like the dark grey look of Safari… and like everything from Apple, it tends to became a really big and slow program… If not, remember when iTunes started.

  • http://blog.insicdesigns.com insic

    yes its awesome. for real but some of my Jscripts stack in this browser. But i understand coz its still in Beta. looking forward for the final version.

  • henry

    more like they copied chrome to me just my thoughts i love chrome btw! :)

  • Anthony

    @rick it’s the webkit inspector – that’s why they both have it. Technically chrome got it from them.

  • http://maximebornemann.com Maxime Bornemann

    @Rick I never saw the Web inspector in Chrome but you can easily see that it has a very Apple-like UI and doesn’t match the Chrome’s UI, plus it’s been here for some times in Safari, but not with so much features. So this is kind of controversial.

    Anyway, I think that Safari 4 might be my new favorite browser. The only thing that kept me from using it was Firebug. Well, no anymore !

  • markokaup

    I love it! Dev tools is what I have waited for, cover flow is awesome, speed is amazing and I just dumped firefox! :)

    Did you know that you can switch tabs CTRL-TAB now?

  • Zwoep

    Shame that the inspector doesn’t work as smooth as firebug. Like the fact that you can change the css in realtime in firebug is so handy.

  • http://www.elementalmedia.info/ Stan

    Seems they changed the how the text-shadow css property renders. I guess the the v3 of safari was broken. If you have set the values

    text-shadow: 0 0 0 #000

    you would still get a subtle shadow

    now it disapears, you need to to set a bit of blur at least 1px to actally trigger the shadow. Which makes sense.

  • Pingback: Safari 4 (beta) og Firefox 3.1 › the unborn chikken

  • Devin

    I was going to write about this but something like this is already on appstorm. And I didn’t think I would have been accepted.

  • http://web-kreation.com/index.php/blog jeeremie

    Safari 4 is 42 times faster at rendering JavaScript than IE 7:

    http://news.zdnet.com/2100-9595_22-272792.html

    But for me Safari is still missing an important feature: “continue from last time” at startup. I never close my Gmail in Firefox. In Safari, you need to open it everytime you launch the browser. It is quite annoying.

  • http://willclark.co.cc/ WillClark

    I’m pretty sure the Web Inspector and User Agent String changer have been in since Safari 3… I’ve been using them for developing iPhone sites in Windows.

  • http://ethanturkeltaub.web44.net Ethan

    Very nice. I didn’t know about that Web Inspector thing!

  • http://christophermiles.com.au Christopher Miles

    The Web Inspector is not new, surely? I’ve been using it in Safari 3 for months. It looks slightly different in some details in the screenshots above, but otherwise essentially the same.

  • nhoss2

    hey Matt! nice tut there. the world is a small place lol

  • Emin

    I’m testing it now for about 3 days and I’m loving it. Still, I don’t imported my stuff from Firefox but I think Safari is going to be my new browser. For now, I wait the final product to completely switch over.

    And I really thank you about that Develop Menu. It is great. About the speed, here is a nice article, you may like: http://tinyurl.com/ddmqyh (42 Times faster than IE7, imagine that :D)

    I’ve found a bug so far and thats the JS/Json issue. The WordPress Plugin “Twitter for WordPress” from Gonzales doesn’t laod content “very well”. Often it doesn’t load anything, sometimes it does, and sometimes it doesn’t load the full count of Tweets I’ve set up. Hoefully, this will be fixed. Bugreport already sent to Cupertino.

  • Simon

    Indeed, Safari 4 looks really promising !
    Can’t wait to see Firefox 3.1 which is also supposed to bring some new features (like the enhanced JS engine if I’m correct) !

  • Helen

    I use it since Monday and am loving it. Apples right. Safari 4 is really really fast and the UI work wonderful on Windows.

  • http://www.datamouse.biz DataMouse

    This sounds too good to be true…

  • http://newelementdesigns.com Don

    It breaks my Growl Mail plug-in. I had to disable it. Other than that it rocks.

  • http://www.concept254.com klaus

    The user agent just kills them all.. nice one

  • http://www.duzodesign.com Timothy

    I’m pretty sure the JavaScript rendering is faster than Chrome. I tested some heavy JavaScript pages and it seemed a lot faster.

  • John Dangerous

    I was looking for the Dev option in prefs and can’t find the option. I’m on a mac. Anyone know how to activate that?

  • http://sketchytree.com Nick

    I wish there was a way to use FF addons in Safari. I would totally use it more if so.

  • http://www.jstorimer.com Jesse Storimer

    Yeah the new Web Inspector is awesome! I have been sticking with Firefox just for Firebug, but now that Web Inspector has arrived, I’m stickin’ with Safari.

    I’m also a big fan of how the address bar now suggests search results in a very similar to Spotlight. By breaking them down into categories with headings, very slick.

    The tabs along the top freaked me out at first (and still kind of does) but I’m quickly getting used to it. I like how the tabs no longer encroach on page space.

    And Top Sites ftw!

    @John Dangerous: Go to Safari Preferences => Advanced. At the bottom is a checkbox that reads ‘Show Develop menu in menu bar’

    Why can’t we choose iPhone as a user agent? I know that is an option in Cruz (http://cruzapp.com/) and I figured Apple would be able to do the same.

  • http://www.twitter.com/anthonybruno Anthony B

    The “User Agent” Features are totally bogus.

    Just tried a quick test with advanced selectors and attribute selectors, both showing up correctly while having IE6 checked under the User Agent pane.

    Last time I checked, I didnt know IE6 could handle either.

  • http://www.twitter.com/anthonybruno Anthony B

    Whoops.. after digging around.. here is what apple says –

    “Change User Agent –
    To determine if a website is customizing content for different browsers, change the user agent to have Safari identify itself as a different browser.”

  • Parastratiosphecomyia stratiosphecomyioides

    This is really interesting.
    Searching around web soon brought to my attention that there is a lack of good photoshop tutorials, which guide photoshop users threw a step by step procedure in order create a website design via photoshop. This article features the best photoshop web design tutorials which teaches you simple effects which can be combined together in order to create a great website design.

  • http://www.crearedesign.co.uk Martyn

    This smashes the competition, I’ve always been a fan of firefox and never used safari except for testing purposes but there are some seriously great features with this.

  • http://www.leithjb.net/blog Barney

    I’m enjoying Safari 4. Took some getting used to having the tabs at the top. Not sure if I like that, but pretty much everything else is good.

    Thanks for the tutorial.

  • Somej

    Impressive, I’ve never been a huge fan of Safari, but this looks pretty good. I doubt I’ll switch from Firefox, but I’m definitely going to be looking into it.

  • http://www.kevinquillen.com Kevin Quillen

    Chrome and Safari are both based on WebKit. Neither mimic each other, they only get their guts from WebKit.

    I thought this browser was speedy, but my coworker informed me that the Mac version of this browser hooks right into the operating system. You know, just like IE does. Doesn’t sound like a good move.

  • http://chrisodonnell.name Christopher Francis O’Donnell

    The “Develop” menu has actually been in Safari since before version three, but it has had some small additions in version 4. Not to exciting. The database browser, on the other hand…

  • http://justsimple.110mb.com maniat1k

    Interesante, hay una cantidad de nuevas funciones que me llaman la atencion, creo que voy a checarlo más de cerca… Safari en vez de Mozilla… es una posibilidad.

    Ing.
    There’s a lot of new stuff, maybe a leave mozilla, maybe.

  • http://2fade.net Jamie

    I really like the snippet thing, Really cool don’t like safari though.

  • http://www.ladocriativo.com Lado Criativo

    does the development user agents reliable? like ie6 png fixes… etc etc?

  • http://www.chezchris.de chris

    thx 4 the tut. downloaded it a few hours ago :) lets test it

  • http://adamnbowen.com/ Adam

    This looks really amazing, although the whole Develop>User Agent> stuff is just all lies… It doesn’t actually render any differently (according to it, IE for Mac 5.2.3 passed all three acidtests with 100 percent!). Unless that isn’t the purpose of it–> It did successfully confuse Facebook, which told me that I shouldn’t use IE for Mac 5.2.3, but instead some other set of browsers. But really, what is the point of just “pretending” to be other browsers, without actually being able to come up with the same rendering peculiarities of them?

    Other than that, Safari 4 is looking like a great competitor to Google Chrome for me! The only thing holding me back is the fact that, since Safari isn’t multi-process, if it crashes, it does so all at once, rather than just doing a “Sad-Tab” (which I’ve never had, by the way).

  • http://smilingdesigner.com Bjorn

    Nice overview. Thanks.

  • http://yoosuf.awardspace.com M.A.Yoosuf

    but what you mention only for Apple Mac, not for buggy Windows

    M.A.Yoosuf
    Browser Powered by Safari 4 beta

  • Simon

    I have the feeling that some here are getting a bit confused about the User Agent thing.
    It doesn’t change the rendering engin at all ! It just allows you to make sites think you’re a different browser.
    A page won’t be rendered as if you were using IE ;)

  • Amir

    Cool features, I really like Coverflow, thanks for the tutorial.

  • http://www.webmaster-source.com redwall_hp

    @Lorenzo: Thanks for the tip? Does that revert to the old method of dragging the tabs too?

    @Rick: I know what you mean by Firefox feeling bloated. It does, and it takes forever to launch. These new speedy browsers like Chrome and Safari launch right after you click them, it isn’t fair. :)

    @Jona Goldman: If you’re a Windows user, you don’t get the metal look. Safari now takes on the native skin of your OS. So Vista users get transparent Window borders and tabs, and those loyal to XP get the blue title bar and the like. As for speed, well, iTunes is not guarantee that Safari will become bloated. It’s been around since 2002 or so, and it’s never gotten to that point. (And for the record, iTunes works well on the Mac side, but it’s really bad on Windows. Just my personal experience.)

    @Adam: You are correct, it doesn’t change the rendering engine. (Which would be a great option for development…) It just changes how the browser identifies itself. It’s useful for some things, like sites that block certain browsers, or for testing things that sniff for the User Agent.

  • http://www.quizzpot.com crysfel

    inspect elements!! i love it!!

Newer Comments →