All posts tagged ‘safari’

File Under: HTML5, Web Standards

Chrome Shows Off Some Fancy HTML5 Tricks

Google’s Chrome browser has a well-established reputation for being not only extremely fast at rendering executing JavaScript, but also robust in its support of cutting-edge HTML5 technologies.

Both of these capabilities are on display at Chrome Experiments, a site that Google set up to showcase some of the coolest demos on the web for JavaScript apps, intricate CSS layouts and animations done with Canvas.

Chrome Experiments now has over 100 demos on offer, and we picked out some of our favorites for this little gallery.

Interest is exploding in HTML5 and its companion technologies. The hope is that these emerging standards will be widely used to power new web apps, as well as for playing animations, songs and videos in the browser without any plug-ins. Developers and content providers continue to rely on plug-ins like Flash or Silverlight for such multimedia playback tasks for now, but they are increasingly turning to HTML5, JavaScript and other web standards as browser makers continue to build the new capabilities into their latest releases.

We tested all of these experiments in multiple browsers, and almost all of them worked in Safari and Firefox, though they performed much better in the latest beta of Firefox 4 than in the current stable Firefox 3.x builds. Some of them also work splendidly in the latest Microsoft pre-release, Internet Explorer 9 preview 3.

Of course, a few of the Chrome demos on the Experiments site use Webkit-specific technologies and CSS prefixes, so those only work in Chrome and Safari. Some have poo-poohed vendor-specific prefixes, and others see them as a necessary step to force browser makers to adopt the latest behaviors being used in the wild. Regardless of that debate, it’s encouraging to see the different browsers all improving their JavaScript capabilities, which all of these demos exploit.

In short, you don’t need Chrome to view these, but they will all be more impressive in Chrome than in other browsers.

Continue Reading “Chrome Shows Off Some Fancy HTML5 Tricks” »

File Under: CSS, HTML, Web Standards

The Solar System, Rendered in CSS and HTML

A web developer named Alex Giron has created a working model of the solar system using only web standards.

It’s fully animated — though Alex takes advantage of some new CSS 3 features (border-radius, transforms and animations) and utilizes the -webkit prefix, so you’ll need to view it in Safari or Chrome to see the planets move around the sun.

Firefox and Opera users won’t see the animations, just a static CSS layout. But the hover events work, so you can mouse over each planet and learn the story of each celestial body. And yes, he included Pluto.

Here’s Alex’s blog post that includes a walk-through of the code.

Bonus: Alex’s screenshot of the same page in IE.

[Via kottke]

See Also:

File Under: Browsers

Chrome Gains More Converts, Edges Out Safari

Google’s Chrome web browser has, for the first time ever, surpassed Apple’s Safari browser in the United States according to some new browser share data released Monday by StatsCounter.

Chrome now accounts for 8.97 percent of U.S. web traffic, putting it ahead of Safari which is used by 8.88 of U.S. web surfers. In the worldwide arena, Chrome has had the lead since September, 2009.

That’s not much of margin, and it may well be that when Safari 5, released at Apple’s World Wide Developer Conference earlier in June, is added to the numbers, Chrome will slip again.

But considering that Chrome has been around less than two years and Safari has over seven under its belt, even matching Safari’s numbers is impressive.

Of course the two titans of the internet have little to fear from either browser. Microsoft’s Internet Explorer still lays claim to 52 percent of the market with Firefox picking up the slack at 28.5 percent.

The numbers come from StatsCounter, which also has global statistics that put Chrome well ahead of Safari. But, as with any market share survey, take these numbers with a grain of salt. Browser usage routinely fluctuate from month to month and it may well be to early to say Chrome is really ahead of Safari. Here’s StatsCounter’s methodology, if you’re interested.

This does possibly mean good news for Google’s WebM video codec, though. Given that Safari is now the only browser lacking support for the new open WebM video codec, Chrome’s rise may mean that early adopters of HTML5 video will treat WebM as a “works-everywhere” solution.

After all, Safari’s tiny market share is in the same range as the number of users without JavaScript, and clearly that group is routinely ignored.

Horse race photo by Paolo Camera/Flickr/CC

See Also:

File Under: Browsers, Software

Review: New Features Bring Safari 5 Up to Speed

Apple released an update to its Safari web browser Monday afternoon. We’ve been testing it for close to a full day, and we’ve found that Safari 5 performs as advertised: It’s faster, more capable and well worth the upgrade.

Safari 5 was launched rather quietly at the end of the first day of the 2010 Worldwide Developer Conference, an event that was dominated by Steve Jobs’ debut of the next iPhone and the new iOS. Safari wasn’t discussed during the morning keynote, but an announcement was made later that afternoon at a web-developer session.

You can download Safari 5 on Apple’s site. Both Mac OS X (Leopard or better) and Windows (XP and up) versions are available.

First up is the speed boost, which is definitely noticeable in GMail, Facebook, our WordPress admin and other sites with lots of “stuff” going on, like Huffington Post. This is thanks to Safari 5′s new Nitro JavaScript engine. This is the same piece of engineering previously named SquirrelFish (we kind of wish they’d kept that name), that powers JavaScript rendering on top of Safari’s WebKit engine. It gives a small bump to page-load times, but the real improvements are seen in page performance. The complex web apps we tested perform with close to zero latency, about as fast as Google Chrome, the most nimble of the major browsers.

For faster page loads, Safari 5 is implementing DNS pre-fetching. Basically, the browser looks at all the links on the page you’re currently on and fetches the IP addresses of all the linked sites and page assets, preparing itself to make the jump more quickly as soon as you click on a link and begin loading another page. All of this happens in the background. Google Chrome and Firefox do this, too.

There’s added support for various pieces of the HTML5 stack in Safari 5, as well as more support for CSS 3 and other technologies powering modern web apps. According to Apple’s overview page, Safari 5 supports geolocation, sectioning elements, drag and drop, HTML5 form validation, Ruby, AJAX History, EventSource and WebSocket. We can’t tell which version of WebSocket is being supported — typing javascript:alert('WebSocket' in window) into the URL bar just tells us “True,” but nothing else.

At any rate, all of these new features are great to see, as Firefox, Chrome and Opera have supported most or all of these APIs and technologies for a while, and IE9 will support most of them. It also washes away some of the bitter aftertaste left by last week’s PR mess around HTML5 support.

There’s also support for full-screen playback of H.264 videos, and for subtitles — the screenshot at the top shows YouTube’s H.264 player. Apple is touting this as HTML5 video support, but we’d like to point out that while H.264 does make up the bulk of online video, HTML5 doesn’t require videos be H.264. All the other major browsers are backing the new, open source WebM format for video, which we’ve urged Apple to support as well.

One of the most talked-about new features is Safari Reader. A small gray “Reader” button now appears in the URL bar when you land on a news website or blog. Click it, and Safari strips out all of the clutter on the page (ads, widgets, sidebars, headers and footers) and presents just the text in a large typeface, cleanly formatted in a white window that floats, lightbox-style, over a darkened page. It also strings multipage articles together in the same window automatically. It’s intriguing to speculate about how Reader, if widely adopted, will change website-design principles by encouraging cleaner, more readable layouts. Scott Gilbertson explores this idea in detail in his in-depth look at Safari Reader here on Webmonkey.

Continue Reading “Review: New Features Bring Safari 5 Up to Speed” »

File Under: Browsers, UI/UX

Safari 5′s ‘Reader’ Simplifies the Web

Steve Jobs hates your website’s design.

That’s the impression we’re left with after playing with Safari 5′s new feature, Reader. It takes a web page and, in Apple’s words, “removes annoying ads and other visual distractions from online articles,” presenting a clean, uncluttered version of the page content.

To try it out — head the Safari download page and grab a copy of Safari 5, which was made available Monday for Mac OS X and Windows. Click the Reader button (located in the URL bar once a page loads) and Safari 5 will overlay the current page with a black shade. You can also launch it with a keyboard shortcut (Command-Shift-R on a Mac, Esc to exit). The main article on the page is shown against a plain white background, stripping away ads, sidebars, headers and footers. Also, Reader pulls multiple-page articles into the window, so once you hit the first page, you don’t have to click anything to read more. Just scroll down, and the extra pages are tacked on at the end automatically.

The result is a clear message to web designers: Your designs are failing your readers. In contrast to what we all see everyday, Reader’s vision of the web is a very clean and more readable place — there are no distractions, nothing competes for your attention, the web page is suddenly simple and elegant.

It’s no secret that most people spend very little time on a web page; sites have mere seconds to capture a reader’s attention. With so many sidebars, gadgets, animated ads and other confusion, is it any wonder that most people just move on?

Reader’s vision of the web doesn’t make sense on every site, but for long articles in particular, it’s a godsend.

Read our full walk-through of Safari 5 here on Webmonkey.

Of course, Reader isn’t an entirely new idea. Browser add-ons and bookmark scripts like Readability have long offered the same feature (with customization options even), but this is the first time we’ve seen a browser ship with the feature. In that sense, Reader could be a signal of the tides changing.

On one level, Reader seems like it could hurt publishers by subtracting ad revenue, and it could hurt ad networks like Google’s. But Safari loads the entire page — ads and all — before it presents the Reader button in the URL bar. So, by the time the person clicks on the button and launches the Reader view, the ad impressions have already been counted. Reader also has the ability to string multiple pages together, and it appears as though Safari is loading all of the information (including the ads) from the next pages, but only displaying the text. Ad impression numbers should be unaffected by Safari Reader, but click-through numbers will no doubt go down. Also, we noticed some ads served within the text body made it through into the Reader view, so it’s not perfect at stripping out ads.

The message that ads are distracting is nothing new — ad blockers are as old as sin — but the the more interesting implicit message is that the web is currently a cluttered confusing mess. Or at least Apple thinks it is and, having used Reader all morning, we’re inclined to agree.

Apple’s vision of the web does not include Twitter sidebars, recently popular article links, fancy headers or sharing widgets. In short, Reader cuts through the distractions to the actual content. Of course, that’s exactly what good design should do in the first place — focus your attention on what’s important. If every web page were well-designed, there would be no need for Reader. Clearly, that’s not the case.

As web developers ourselves, we appreciate experimental page layout designs. But when it comes to actually reading things on the web, less is far more. In short, we’re hooked. Well, technically, we installed Readability in Chrome and Firefox, but conceptually, the idea of a cleaner, simpler, more readable web is a step forward.

What remains to be seen is how designer’s react to Reader. Some backlash seems inevitable; some sites may even go so far as to block Safari — though that would an extreme move given that just because you’re using Safari does not mean you’re using Reader. In fact, most users may not even notice or use the feature.

However, we’re hoping that not only will something similar appear in other browsers, but that web designers will focus on simplifying their designs. Reader takes things to an extreme. There are ways to give content focus without eliminating nearly everything, and we look forward to seeing that idea gain more currency.

We’re also looking forward to an iPhone version of Reader that eliminates iAds.

See Also: