On Safari

So you've been wondering what all the hubbub is about this new browser that Apple has released, right? I bet you're thinking to yourself, "oh dear, even more browsers in which to test." Well, you're right, it is a new browser to test, but it's eerily familiar to many of us.

Apple announced Safari as its new web browser during its MacWorld bonanza, and posted a ~3MB beta download for Jaguar users (OSX v10.2, better for v10.2.3) on its site at http://apple.com/safari/. This page also contains all the latest marketing speak on the browser, something worth reading before downloading.

Safari is built on the KDE rendering engine, using KHTML and KJS libaries (opensource), all of which power the familiar *nix browser, Konqueror. For those who've never been able to test on Konqueror and have access to a Mac, now you can do some basic testing (it won't be an exact match, but it's a start). For those who don't have a Mac but do have access to Konqueror, the same logic applies, just reversed.

Below are some of the known features and bugs of the browser, and while not exhaustive by any means, is good way to get thinking about how it may render your sites.

  • Supposedly CSS1, CSS2, DOM0, DOM1 (reportedly "almost"), and DOM2 compliant.
  • In CSS testing, supports attribute selectors, :first-child pseudo-class, :hover on arbitrary elements (<tr> for sure, anyway), @media, and adjacent sibling selectors.
  • Aiming for compliance with ECMA-262 3rd Edition (JavaScript 1.5).
  • Can render Java applets.
  • Reportedly renders more quickly than Netscape, Internet Explorer, or Chimera.
  • Will try to download XHTML files with XML mimetype instead of just display them.
  • 72dpi (versus 96dpi) rendering of type.
  • Doesn't display link title attributes as tooltips.
  • Pop-up blocking appears to be built in.
  • Currently identifies self as ( Note the "like Gecko" comment.):
    Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-us) AppleWebKit/48 (like Gecko) Safari/48

evolt.org in Safari Screen capture showing how the evolt.org home page renders in Safari. As you can see, it looks pretty darn good, which is a testament to Safari's rendering engine, and the swanky, valid code under evolt.org's hood.


evolt.org in Safari Screen capture showing how a evolt.org article page renders in Safari. Much like the home page, it holds its own for interpreting the code on the page, handily accepting our compliant HTML and CSS and then rendering it into the work of art that you are reading now.

Further Reading

MacEdition Guide to CSS2 Support in Mac-only Browsers, and the first column is Safari. See the abridged version for comparisons with other browsers.

KDE-maintained compilation of CSS2.1 visual media support in KHTML/KDE3.1.

The developer list for the KHTML and KJS libraries that power Safari, which talks about bugs, fixes, and support.

A review at Dive Into Mark, including screen shots and the results on testing across the HTML and CSS specs, as well as a number of CSS techniques/hacks.

Review at Six Log, with reader comments.

Mac Net Journal has a review.

Insanely Great Mac reviews it, and has a bunch of user comments.

The Mac News has an overview.

Safari-specific AppleScripts.

Matt Haughey comments (of MetaFilter fame).

Comments

Add to your testing list

Up until now, you'd have to be pretty dedicated to put Konqueror on your testing list. However, once this is out of beta (and more so, when it's likely the default browser on new Macs), it'll be essential to test on Safari.

Preaching to the choir...

... I _hope_ everyone that tries beta software will just dismiss this comment with a "ya, ya, I already do that", but don't forget: backup your critical files/machine before attempting to horse around with beta software!

Reported bugs

Just to demonstrate the necessity, there have been a few fun and interesting bugs reported (and had doubt cast upon - YMMV).

Safari Enhancer

For those experimenting with Apple's new browser, here is an add-on that enables a debug menu. It allows one to see the DOM tree, Render tree, and View tree, change the UA string (which looks like it can change automatically??) and a few other bits and pieces.

http://gordon.sourcecod.com/sites/safari_enhancer.php

For the non-CLI averse, drop into the Terminal and run (while Safari is not running):

defaults write com.apple.Safari IncludeDebugMenu 1

dhtml support

Does CSS support implies DHTML interfaces compliance, such as overflow scrolling for layers. By the way does DOM compliance include support for document.implementation.createDocument()...

This is for a site that uses DHTML (and client-side XML if it is supported, otherwise serverside), but only as an interface. I don't like browser sniffing and such, but in this case server-side client detect is only for DHTML presentation, not for denying contents. The contents would be the same for all browsers and platforms, only in DHTML for compliant browsers, otherwise HTML.

Konquror vs Safari

It looks as though they eventually will be the same rendering engine.

The KHTML crew are currently working to implement the Safari changes and in the future it is quite likely they will share the same codebase or be very close ala netscape & Mozilla.

Mac OS X info

oh, thanks for that link. It has very useful and exhaustive information...

Safari and history.back and history.go

Safari does not seem to recoginze the javascript history.back or history.go functions. Any workarounds? Should I expect Apple will fix this?\ Thanks.

Problems with Safari

Why does it seems as if Safari gives CSS and JS major problems? I am working a web-app that needs to be tested for users in Safari and my drop-down style menus show up in the upper left hand corner of the screen...although my menu bar is top right. I'm trying to find a fix for this but I haven't yet. Any suggestions?