Tag Archives: browsers

FillDisk Proof-of-Concept Demonstrates Flaw in Browsers’ localStorage Implementations

HTML5’s localStorage API makes it possible for a web page to store 5-10MB of persistent data, much like cookies, but for more complex data—as you probably already know if you’re familiar with HTML5’s fancy new APIs. Feross Aboukhadijeh came up with an interesting and relevant proof-of-concept that’s been making its rounds on the internet: a little something called FillDisk.

Apparently Chrome, Safari, Internet Explorer and Opera all have a flaw in their localStorage implementations that allow a website to use a little trick to fill your hard disk up. They allow each subdomain of an origin to have its own storage pool, so you can bypass the quota by looping around and storing data for tons of subdomains. FillDisk manages 1GB per 16 seconds on the author’s MacBook Pro. Firefox gets it right and sets the quota for the entire second-level domain.

Now Mozilla’s solution doesn’t exactly seem optimal to me. There are plenty of sites that allow users to host things on subdomains, GitHub Pages being a noteworthy example. It seems to me that a more equitable solution is to extend the partial solution Firefox implements and prompt the user to allow the pool to be enlarged when needed.

Introducing the HTML5 Hard Disk Filler™ API [Feross.org]

Opera Announces Move to WebKit

Opera + WebKitOpera made an unexpected announcement this past week, stating that they intend to discontinue using their custom Presto rendering engine in future versions of the browser. Instead, they will be using WebKit.

On the same day as announcing that Opera has 300 million users, we’re also announcing that for all new products Opera will use WebKit as its rendering engine and V8 as its JavaScript engine. It’s built using the open-source Chromium browser as one of its components. Of course, a browser is much more than just a renderer and a JS engine, so this is primarily an “under the hood” change. Consumers will initially notice better site compatibilty, especially with mobile-facing sites – many of which have only been tested in WebKit browsers. The first product will be for Smartphones, which we’ll demonstrate at Mobile World Congress in Barcelona at the end of the month. Opera Desktop and other products will transition later.

In the short term, this will be good for Opera (less time spent on the rendering engine means more time available to work on user-facing features) and perhaps for some web designers, I can’t help but think it’s an overall step in the wrong direction. We’re left with only three major rendering engines—WebKit, Gecko and Microsoft’s proprietary Trident—which will likely mean a further focus on bad designers building sites for WebKit rather than the standard. Just look back to the bad old days of the Netscape/IE browser war…and the horrible, horrible fallout when Netscape was crushed and only Internet Explorer was widely used for the following decade.On the other hand, having the Opera developers’ expertise contributing to the WebKit project can only be good for the other browsers using it.

300 million users and move to WebKit [Opera Developer News]

The W3C Has Released the First Working Draft of CSS4

Yes, you read that properly. The W3C has released the first specs for CSS4. Now that most modern browsers are well on their way to supporting CSS3, the W3C is getting started on the next “layer” of CSS.

The Selectors Level 4 document already has one feature that is unfortunately missing from CSS3: parent selectors. You will finally be able to do things like selecting all a elements that have an img element inside them, with this syntax: $a > img { ... }.  The draft also mentions “nth-column” selectors, for styling all of the cells in a specific table column.

Of course, it’s probably going to be awhile until we start seeing browsers supporting this on a usable level.

Before anyone comments about the CSS3 spec not being “finished,” note that W3C specs are not prescriptive. They’re not “finished” until they’re pretty much supported by the major browsers, and changes have been made based on the implementation. A couple of the documents for CSS3, Selectors Level 3 and CSS Color Module Level 3, are already under the Completed Work section of their website.

How to Turn Off Auto-Reloading Tabs in Safari 5.1

When Apple released Safari 5.1 recently, it ignited a bit of outrage amongst its users. For whatever reason, Safari began refresh the page content of a tab whenever you switched to it. This kind of defeats the purpose of tabs, as you can’t leave Pandora running or flip between a form you’re filling out and something you’re referencing.

Oddly enough, there’s a quick and easy fix.

  1. Open the Preferences window (Command+,).
  2. Switch to the Security tab.
  3. In the “Web content” section, uncheck Java. (But leave JavaScript checked!)
  4. Close the Preferences dialog. Now tabs should no longer reload whenever you switch between them. You won’t be able to run Java applets embedded in web pages, though.

I’m guessing that the behavior is the result of a bug, and not some weird decision of Apple’s.

How to Bring Back “http://” in Firefox 7

Firefox 7 is out now, bringing with it much-welcome memory usage reductions and speed improvements. It has one annoying UI change, though: URLs in the address bar no longer have the “http://” protocol prefix. While that may be okay for casual users, it will annoy a lot of power users.

To fix it, just follow these steps:

  1. Open a new tab and type about:config into the address bar.
  2. Search for browser.urlbar.trimURLs
  3. Double click on the browser.urlbar.trimURLs key to change its boolean value from true to false.
  4. Close the tab and enjoy your unhidden URL protocols.

This is the second time in two versions Mozilla has made an unhelpful UI tweak. In Firefox 6 they added “domain highlighting,” which greys-out the URL text, while leaving the domain in darker lettering. Fortunately, it was just as easy to fix.

A Potential Windows 8 Caveat: Alternate Browsers in Metro

Microsoft has been showing off developer previews of Windows 8 lately, with it’s new multitouch “Metro” UI. The idea behind Metro is to have a tablet-friendly interface that boots quickly, with an option to switch into the traditional desktop interface.

Metro apps, from what I’ve heard, will be built with HTML5 and Silverlight rather than being native apps. This comes in handy, as Microsoft is fracturing their platform a bit. Some Windows 8 devices will run on Intel’s x86 architecture as before, but Microsoft plans for a lot of the new tablets to be ARM-based. That will create a lot of software incompatibility, as applications will need to be re-compiled for ARM processors. (So don’t buy an ARM-based computer if you want to run Photoshop on it…)

Now, we can probably assume that most people will spend a lot of time in Metro, right? It seems like a convenient tool for casual computing, and certainly better-suited for touch-enabled devices. If you need to look something up quickly, you boot your machine to the Metro interface, click on the Internet Explorer icon and head over to Wikipedia, right? That raises one very important question:

Can you replace Internet Explorer 10 with Firefox, Chrome or Opera? If Metro applications have to be written in HTML5 and Silverlight, the browsers would certainly need to be re-written, assuming that you can even build a browser with such limited tools. And will Microsoft even allow you to move that big IE tile off the primary screen?

I hope Microsoft addresses this, because it seems rather anti-competitive to me, with their large market share and all. A return to the dark days between the death of Netscape Navigator and the birth of Firefox, if you will. Web standards and browser innovation basically stagnated for a decade until the open source cavalry arrived.

Update: Apparently Microsoft has partially addressed this at the Build conference. Metro applications will be written with a new API called WinRT that will also be available in C++/C#/VB/etc.. So browsers will have to be rewritten for the new UI, but they won’t be excluded.

Firefox 7 to Use 20-50% Less Memory

Mozilla engineers have began and effort known as “MemShrink” to reduce Firefox’s rather large memory footprint, with the changes being made in Firefox 7. (I still haven’t quite figured out Mozilla’s new version numbering scheme, and Firefox 5 is the current release…)

In short:

Firefox 7 uses less memory than Firefox 6 (and 5 and 4): often 20% to 30% less, and sometimes as much as 50% less. In particular, Firefox 7′s memory usage will stay steady if you leave it running overnight, and it will free up more memory when you close many tabs.

Also, there are already some early mock-ups of what the UI in Firefox 8 might look like.

Firefox 7 is lean and fast [Nicholas Nethercote]

Disable Domain Highlighting in Firefox

If you just upgraded to Firefox 6, you probably noticed the new “domain highlighting” feature. The address bar now greys-out the protocol and path in the URL, leaving the domain highlighted in the darker black text. The theory is that it will help less-savvy users easily spot phony phishing domains.

I find it annoying, though. It looks a bit weird, and it makes the path less visible, which is something I work with on a regular basis. If you’re like me and want to turn off the feature, here’s an easy way to do it:

  1. Open a new tab and type about:config into the location bar
  2. Search for browser.urlbar.formatting.enabled in the filter field. (It searches as you type.)
  3. Double click on the browser.urlbar.formatting.enabled line to change the value from true to false.
  4. Close the tab and enjoy your lack of domain highlighting.

Don’t Assume a User’s Browser Window Size

Chris Coyier has an amazing article that finally puts the screen resolution myth to rest. Despite screen resolutions getting progressively bigger, the available width for your web designs is not. If you have a ginormous 30-inch monitor, you probably don’t keep your web browser full-screen. You probably have it at a more comfortable size and use the extra space to keep other things visible simultaneously. (This goes double for Mac users, who don’t really have the whole “full screen” habit to begin with.)

The post also demonstrates a way to use a bit of jQuery magic to record users’ browser window sizes and dump it into a database, since Google Analytics does not yet provide this metric.

Practically, it’s still best to use the old “keep it under a thousand pixels” rule. It matches up well with the most common browser window ranges, and many of us have lower screen resolutions anyway. I primarily use a 13″ laptop with a 1200-pixel wide LCD. That means I keep Firefox resized to be around one thousand pixels wide, leaving some breathing room while still being able to view most web sites without annoying horizontal scroll bars.

Screen Resolution ≠ Browser Window [CSS-Tricks]

How to Remove the Bookmark Toolbar Icons in Firefox 4

Prior to Firefox 4, the Mac version didn’t display favicons beside items on the Bookmarks Toolbar, unlike its Windows counterpart. I’ve become accustomed to this behavior, as it uses significantly less space. (I tend to use the Bookmarks Toolbar not just for frequently-used links and bookmarklets, but as a sort of “in tray” for things I need to keep an eye on temporarily.)

Some people will probably be happy about the addition of the favicons in Firefox 4, but if you’re like me you prefer to cram as many three to five letter bookmarks in as possible, which is significantly less with the icons included. But what can be done about it?

Fortunately, someone has already whipped-up a handy extension to revert back to a text-based bookmark bar. You don’t even need to restart your browser after installing it.

Bookmarks Deiconizer [Firefox Add-ons]