File Under: Browsers
Jun
18
2012

Mozilla ‘Junior’ Brings Firefox to Your iPad

By

Coming soon: Firefox for the iPad. Photo: Ariel Zambelich/Wired

Mozilla wants to bring Firefox to the iPad. The company is showing off a prototype iPad browser dubbed “Junior.”

Firefox for the iPad won’t be the first alternative browser for Apple’s iOS — iCab Mobile, Dolphin, Mercury, Opera Mini, and several others are already available — but it might be the first with a name most iPad users will recognize. (Google is also reportedly working to bring a version of its Chrome browser to iOS.)

Judging by what you can see in the video below, the name might be the only thing Firefox fans will recognize in Junior.

Due to Apple’s iOS restrictions, Firefox for the iPad would use the same WebKit rendering engine found in Safari for the iPad. As with the rest of the alternative web browsers available for the iPad, Firefox for the iPad’s distinction will lie solely in its user interface and features.

Alex Limi, Mozilla’s User Experience Lead for Firefox, says in the video that the motivation behind Junior wasn’t just to get Firefox on the iPad, but to “reinvent the browser for a new form factor.” “We wanted to make something entirely new,” says Limi, who goes on to add that while Safari for the iPad is “the best browsing experience on a tablet,” it’s still “a pretty miserable experience.”

Mozilla believes it can do better.

Mozilla’s idea of an “entirely new” browser thus far consists mainly of a full screen browsing experience that dispenses with any browser chrome and tabs (something the first version of Safari for the iPad also lacked). Instead you’ll find two buttons toward the bottom of the screen, at roughly thumb height when holding the iPad in portrait mode.

The left-hand button is the back button. The right side harbors a plus button, which brings up a page switching and speed dial interface that’s reminiscent of Opera’s expanded tab view — thumbnails of the actual page rather than just labeled tabs. Both buttons are also hiding some extra features that are revealed only when you press and hold them. Hold down and you’ll reveal features like reload and forward on the left side and some sharing buttons on the right.

Perhaps the best idea Limi mentions in the Junior demo is the ability to create separate user accounts. A simple swipe to the left of the main navigation page will bring up a user login menu. If you share your iPad with other family members you already know that maintaining separate Facebook, Google and other logins is a pain in Safari for the iPad. Junior’s proposed accounts interface would eliminate that headache.

Junior is still very clearly a prototype and many of its user interface ideas are still up in the air. In other words, don’t look for Junior to actually ship any time soon. Junior is also forcing Mozilla to come up with a new building and testing process — the company can’t release test builds via Apple’s App Store as it can on other platforms. According to the video the company is still developing the best way to build and test prototypes. We’ll be sure to let you know when there’s something available publicly.

Tags: ,
File Under: CSS
Jun
15
2012

CSS Variables: WebKit Brings the CSS Jackalope to Life

By

The mythical Jackalope surrounded by CSS bunnies. Image: Wikimedia

The mythical beast known as the CSS Variable is about to be released into the wild.

The WebKit team, which builds the browsing engine that powers both the Safari and Chrome web browsers, recently landed preliminary support for CSS Variables, which means variables will likely turn up soon in Chrome/Chromium and Safari nightly builds.

Variables used to be one of the most requested features for CSS, particularly from programmers accustomed to languages with variables. But, between then and now, CSS preprocessors like SASS and LESS have largely filled the role by offering variables (and more). Still SASS and LESS are not CSS, and do require compiling, so there may still be a place for variables in CSS.

There’s nowhere to actually test out CSS variables yet, but you can read up on the proposed variable syntax at the W3C. The spec is currently a working draft and may change considerably before it is finalized, but the proposed syntax looks like this:

:root {
    var-header-color: #06c;
}
h1 { background-color: var(header-color); }

The first rule is the new variable syntax and defines a property named “var-header-color” on the root element. Then you can use that variable throughout your stylesheets with the var(header-color) syntax. Also note that you can use variables within variables like this:

:root {
    var-my-color: #06c;
    var-background: linear-gradient(left, var(my-color), white);
}

There are some more examples of how to use variables on the W3C page, as well as in WebKit’s test suite.

The bad news is that variables aren’t backwards-compatible at all. Older browsers will simply ignore them (right now all browsers will ignore them) and if you’re defining key elements like background colors with variables the results in older browsers won’t be pretty. Eventually old browsers will fade away and CSS variables will probably become commonplace, but for the next few years at least we suggest looking to a preprocessor if you simply must have your variables.

Tags: ,
File Under: Browsers
Jun
15
2012

Mozilla Celebrates a Year of Shrinking Firefox Memory

By

Photo: Jim Merithew/Wired

One year ago Mozilla launched MemShrink, an aggressive campaign to trim Firefox’s then much larger memory footprint. Since then not only has the browser’s overall memory use dropped considerably, but the effort has been expanded to tackle add-ons, a common source of Firefox memory woes.

Mozilla programmer Nicholas Nethercote, head of the MemShrink effort, takes a look back at the progress and some of MemShrink’s “big wins,” including better JavaScript performance, fewer memory leaks in add-ons and the new about:memory page, which is, according to Nethercote, “the single most important tool we’ve created, and has driven a lot of the MemShrink improvements.”

If you’re interested in the finer details about everything that’s been done to reduce Firefox’s memory over the last year, be sure to read through Nethercote’s full post.

As for the future, look for MemShrink to keep bringing down the memory overhead. “There’s no real secret to MemShrink,” writes Nethercote, “so far it’s basically been a long, steady grind, gradually improving tools, fixing leaks, slimming down data structures, and responding to user’s problems…. there are no plans to change that.”

If you’d like to get on the leading edge of MemShrink improvements, you can switch from Firefox’s stable channel to either the Beta or Aurora channels, which include any new features, as well as any memory improvements, much sooner.

Tags:
File Under: Browsers
Jun
14
2012

Retailer ‘Taxes’ Customers Still Using Internet Explorer 7

By

Kogan's new Internet Explorer tax. Image: Kogan.

Kogan, an Australian online electronics dealer, has started imposing a “tax” on customers visiting its site using Internet Explorer 7 (and presumably below, though the announcement doesn’t mention IE6). Yes, that’s right, IE7 users visiting Kogan will pay more than those using a modern web browser. Or, more likely, they’ll just shop elsewhere.

Here’s how the tax will work according the Kogan’s blog: “From today, anyone buying from the site who uses IE7 will be lumped with a 6.8% surcharge — that’s 0.1% for each month IE7 has been on the market.” The post goes on to claim that the move will help Kogan “keep prices for all smart shoppers down.” Sure it’s a cheap, attention-getting gimmick, but who hasn’t wanted to ban IE?

Even Microsoft is frustrated with older versions of Internet Explorer that still hang around. The company already has a site dedicated to tracking the demise of IE6, and it’s not a stretch to imagine that it will soon be extending that death wish to IE7.

That said, browsing through Kogan’s site it’s hard to see what about it is causing IE7 headaches for Kogan. We’re no fans of IE 7, but building websites following best practices like progressive enhancement means your site will work even in older browsers. It may not always look exactly the same as more capable browsers, but it will at least function. In my brief testing it appears that Kogan’s site does indeed work in IE7, though the company might need a few lines of IE7-only CSS to clean things up.

Contrary to what Kogan says, starting with the foundations layering on extras as you go means supporting IE7 isn’t a cost of doing business, it’s just a nice by-product of the process of building successful websites — like supporting older mobile browsers, feature phones, televisions, gaming consoles and dozens of other web-connected devices that aren’t always going to function as well as a desktop browser.

Tags: ,
File Under: Browsers
Jun
14
2012

Speedier Opera 12 Showcases New Web Standards

By

Opera 12 with the "White Lion" theme. Image: Screenshot/Webmonkey

Opera Software has released Opera 12, a major update for the company’s flagship desktop web browser.

If you’d like to take Opera 12 for a spin, head over to Opera’s download page. Current Opera users will be automatically updated.

Opera 12 packs in dozens of new features and is considerably snappier than its predecessors. Part of that speed comes from Opera 12′s 64-bit support on Windows and Mac. Startup and shutdown times have been reduced as well thanks to what Opera calls “smarter tab loading.”

As we mentioned in our beta review, Opera 12 offers experimental WebGL hardware acceleration. Opera’s plans for hardware acceleration go beyond just web content, using your graphics processor to boost the rendering speed of the browser’s user interface as well. While the hardware acceleration is available in this release, you’ll still need to turn it on yourself. See Opera’s earlier guide to enabling hardware acceleration, which also has some good reasons why you might want to wait until it’s finalized before you make the leap.

Opera 12 puts Flash and other plugins out to pasture. All plugins are now “out-of-process,” which means that Flash and other plugins now run in separate processes from the browser itself. That way, should Flash crash, it won’t cause the entire browser to crash with it. Like Chrome and Firefox before it, Opera 12′s isolated processes feature applies to plugins like Flash, Silverlight and Java, among others.

This is first Opera browser to support themes. There’s a new themes gallery you can check out if you’d like to customize Opera’s look.

Opera has long been a pioneer of web standards and this release continues that tradition, bringing support for a wide variety of emerging web standards like CSS 3 Animations and Transitions, and HTML5 Drag-and-Drop. Opera 12 also supports the Web Real Time Communication (WebRTC) standard. Opera has set up some demos to show off the new WebRTC features, including a series of apps that pull images (with your permission) from your webcam. Be sure to visit Photo Booth, Polaroid, and the very cool FaceKat — a driving game you steer with your head — to see the WebRTC support in action.

Opera 12 is also notable for some things it doesn’t include, namely Opera Unite and Opera Widgets. Widgets are easily replaced with add-ons, but Unite has no successor. Unite, which allowed you to host a simple website directly on your own computer, is no longer available by default and the company is no longer actively developing it.

The desktop version of Opera is not the most widely used browser on the web by any measure, but it is responsible for much of the innovation we’ve seen in web browsers over the years. If you’ve never used Opera, Opera 12 makes a good introduction. For more details on everything that’s new in this release, check out Opera’s release notes.

Tags:
« OLDER POSTS