3 min read

New version of Safari stays ahead of the pack

Safari 3.1 gives Web designers much more flexibility and control

Safari 3.1 is the first browser to work with such up-and-coming technologies as CSS Animations and the and tags in HTML version 5, which is still in draft mode.

Safari’s interface is mostly unchanged, and for Web sites that haven’t yet implemented new technologies, browsing behavior is virtually identical to what the previous version offered. Safari’s strengths remain the same, as do its limitations (such as a lack of official support for third-party plug-ins). But the new features provide a glimpse into the Web of the future.

One subtle but important change to the interface is a checkbox in the Advanced pane of the Preferences window: Show Develop menu in menu bar. This optional menu, designed primarily to aid Web developers, contains several commands that previously required a command-line hack to activate a hidden Debug menu. Among these are a User Agent submenu, which lets Safari easily masquerade as another browser; Web Inspector, a window showing page elements such as style sheets, images, and scripts; Network Timeline, which displays detailed information on each element’s size and how long it took to load; and commands to selectively disable Web features such as caches and JavaScript.

But the real news with Safari 3.1 is the support for new standards, which will give Web designers much more flexibility and control.

First up is Web Fonts, an extension to CSS (cascading style sheets) whereby an entire TrueType font downloads automatically when a page loads. This eliminates the tedious design step of converting unusual fonts to graphics before placing them on a Web page, and assures that all viewers will see pages the same way, whether or not they have the fonts installed on their systems. (For an example of Web Fonts in action, use Safari 3.1 to visit this page.) Pages using Web Fonts load quickly and transparently in Safari 3.1.

Safari 3.1 supports Web Fonts, an extension to CSS, which allows fonts to download automatically with pages. This eliminates having to convert display fonts to graphics before placing them on a Web page and assures that all users see all fonts in the browser the same way. In the image on the left, Firefox substitutes fonts used in the layout to simulate the design in the browser window, because the user does not have the fonts installed.

In the image on the right, Safari 3.1 actually downloads the correct font so the viewer can see the design as it’s supposed to be rendered, even without the correct fonts installed.

The and tags in the upcoming HTML 5 give Web designers a standard way to embed video and audio files in their pages with simple tags (similar to tags) that don’t require any scripting. As with Web Fonts, Safari’s support for such tags is seamless, though good examples of sites that use these tags are currently difficult to find.

Using CSS Animations, a Web page can animate block elements (such as causing a text box to spin) without requiring the creation and downloading of any graphics. Once again, Safari handles such animations brilliantly, as Safari 3.1 users can see in this example. Safari 3.1 also offers, for the first time, client-side storage in the form of an SQLite database. This means, for instance, that a Web-based application such as a word processor or image editor could gain the capability to store documents on your hard drive, which would result in faster performance and possibly the option to use the Web-based applications even when your computer is offline. You can see a simple example; to determine how much space Safari allots for database storage or to remove a database, use the Default space for database storage pop-up menu and Show Databases buttons at the bottom of Safari’s Security preference pane.

In my testing, the new features in Safari 3.1 functioned exactly as they should, and as Web designers begin to add support for these elements, Safari will become progressively more useful and functional for typical users.