Web developers have been concerned about the vendor prefix crisis since February 2012. To summarize the issue, this is what should happen in an ideal world:

1. Vendors implement experimental CSS3 properties using their own prefix, e.g. -webkit-transform, -moz-transform, -ms-transform, -o-transform.
2. Developers can use the technologies today without breaking cross-browser compatibility. Properties can be listed with their prefixed and unprefixed names to ensure they work everywhere.
3. Once a property becomes a W3C recommendation, all browser vendors can provide a stable unprefixed property, e.g. transform.
4. Optionally, developers can remove the prefixed properties from their stylesheets. However, it’s not strictly necessary if the unprefixed property is defined last and CSS cascade rules apply.

This is what occurs in the real world:

1. Vendors implement experimental CSS3 properties using their own prefix. In some cases, vendors promote them as an HTML5 “standard” even if they’re device-specific or never submitted to the W3C.
2. Some developers use the proprietary property from a single vendor, e.g. only -webkit-transform. This might be owing to ignorance, laziness or because they’re testing a limited number of devices.
3. Once a property becomes a W3C recommendation, all browser vendors can provide a stable unprefixed property, e.g. transform…
4. but developers neglect to change their stylesheets. The site looks good in some browsers but worse in others even when they support the standard W3C specification.
5. The vendors become concerned and add support for other prefixes into their browser, i.e. Opera implements the -webkit prefix for some properties. The prefix process is broken and, while it’s too early to predict the outcome, the majority of developers consider it to be a bad move.

We have discussed the issues at length on SitePoint; there are no easy solutions. However, two interesting proposals have been raised by W3C members during the past week.

Option 1: Unprefixed Properties are Supported From Day One

The first proposal comes from Florian Rivoal, Opera’s W3C representative:

When a browser vendor implements a new CSS feature, it should support it, from day 1, both prefixed and unprefixed, the two being aliased. If a style sheet contains both prefixed and unprefixed, the last one wins, according to the cascade.

Authors should write their style sheets using the unprefixed property, and only add a prefixed version of the property (below the unprefixed one) if they discover a bug or inconsistency that they need to work around in a particular browser.

If a large amount of content accumulates using the a particular vendor prefix to work around an issue with the early implementation in that browser, the vendor could decide to freeze the behavior of the prefixed property while continuing to improve the unprefixed one.

For example, you could use the following transform code in your CSS:

transform: rotate(30deg);

The property would be ignored by all browsers which had not implemented transforms. If there were a difference between two or more implementations, e.g. webkit browsers rotated anti-clockwise by default, you could override the property accordingly, e.g.

transform: rotate(30deg);
-webkit-transform: rotate(-30deg);

It’s a simple solution and easy to implement. Most existing stylesheets would continue to work and prefixed properties would rarely be necessary. In most cases, you would never need to update your CSS again.

However, what would happen if webkit changed rotation to the W3C-approved clockwise direction? Developers would need to fix their stylesheets by removing or rearranging the -webkit-transform: rotate(-30deg); property. Unfortunately, not everyone uses the same version of the webkit engine at the same time. You could encounter a situation where your site works in Chrome but not in Safari for several months.

Option 2: A New Vendor-Draft Modifier

The second proposal comes from François Remy:

Let’s introduce the “!vendor-draft” value modifier. I propose we use unprefixed properties from start, but with a token explaining which version of the property we built our CSS for:
border-radius: 3px !webkit-draft;

Any browser which is not webkit but implemented border-radius in a way that is compatible with the “webkit draft” can support the declaration. This is different from vendor prefixes: other browsers don’t impersonate webkit, they just acknowledge they support one specific property the way the webkit draft defines it. Browsers which are not compatible with that draft will just ignore the declaration. Browsers that change their implementation of a property are encouraged to iterate their “!vendor-draft” flag (using a version number, if appropriate).

This solves the issue by changing the property value rather than its name (in a similar way to the !important modifier). Again, the following transform code could be used:

transform: rotate(30deg);

But a default anti-clockwise rotation could be fixed in any browser adhering to a webkit specification:

transform: rotate(30deg);
transform: rotate(-30deg) !webkit-draft;

If a browser subsequently supported the W3C specification, the second property would be ignored.

It would also be possible to implement draft versioning, e.g.

transform: rotate(30deg);
transform: rotate(-30degrees) !webkit-draft;
transform: rotate(-30deg) !webkit-draft-2;

It’s a flexible solution which finally addresses the issue of properties evolving over time.

Unfortunately, it’s more difficult to implement and could take months to appear in browsers even if all vendors agreed today. It may be technically better, but it’s a fundamentally different approach which could break existing stylesheets. In the short term, vendors would probably support both prefixes and value modifiers — and that would lead to confusion.

I like both solutions. From a coding perspective, vendor-draft modifiers seems the most logical option but I doubt it can be considered until vendors “complete” CSS3 and begin work on CSS4.

Supporting unprefixed properties is more practical but will certainly cause versioning issues which couldn’t be fixed in CSS alone. But perhaps that’s the price you pay for using experimental technology?

Do you have a preference for either of these options? Or is it too late to prevent a vendor prefix catastrophe?

Perhaps I’m showing my age but is it really 20 years since Wolfenstein 3D exploded onto the PC gaming scene? To celebrate that momentous occasion, the full game can now be played online within your browser at:

wolfenstein.bethsoft.com

(Note the game is recommended for those over 12 and banned in Germany and several other countries).

The site states it’s compatible with IE9, Firefox, Chrome and Safari — although Opera seems to work if you’re not too bothered by a few graphical glitches. The game is mouse-enabled (set it within the configuration options) although few PCs had mice in 1992 and you’ll find keyboard control best.

Wolfenstein was released as DOS shareware in 1992. The web was largely unknown and bulletin boards were the reserve of rich geeks but, despite a lack of social networks and online file sharing, word spread and so did thousands of 720kB floppy disks. Suddenly, there was a reason to use a PC for more than Lotus-123 spreadsheets.

So why the fuss? Wolfenstein started the 3D first-person gaming genre. In 1992, there were relatively few 3D games and most resorted to isometric graphics (Marble Madness, Paperboy), wire-frame (Star Wars, Elite, Starglider) or faked overlaid 2D sprites (Outrun, Chase HQ, Space Harrier). True 3D games were available in the arcades (I-Robot, Hard Drivin’) but they took themselves a little too seriously and couldn’t be replicated on the 16-bit PCs of the day.

I remember playing Wolfenstein for the first time; it changed my perceptions about what could be achieved on a PC. While it looks basic today, having the freedom to explore realistic 3D rooms blasting stuff was revolutionary — and shouldn’t have been possible given the hardware limitations.

More importantly, the game was fun; you played a prisoner trying to escape from a Nazi-controlled castle in World War II. The VGA gore was amusing and you could defeat a robotically-enhanced Hitler at the end of the game. That said, not everything was perfect. The walking movement was unrealistically smooth and the corridor map was always rectangular — combine that with may hours game play and Wolfenstein remains the only game which made me feel genuinely queasy!

iD Software’s success with Wolfenstein led to Doom a year later — it’s fair to say you wouldn’t be playing Call of Duty today if it weren’t for those two ground-breaking games.

A version of Wolfenstein was released on almost every computer and gaming platform (even Nintendo permitted the gore-fest on their family-friendly consoles, although iD were instructed to replace guard dogs with large rats). The browser version if faithful to the original DOS version and permits you to play every level. Actually, it probably plays and sounds better than it did on the latest 386 PCs we had in 1992.

Technically, the game is implemented using JavaScript and HTML5 audio. I first thought it was rendered using a canvas element but, thanks to further investigation by Matt Vaughan (below), it’s actually 320 horizontally-stacked DIVs which have their background, vertical size and top location modified as you move around. It’s clever but slightly unusual solution. The full page weight is a little over 800kB of mostly uncompressed JavaScript — impressive given that most sites use that for their home page.

But who cares about the technical details … Happy Birthday Wolfenstein 3D and thanks for 20 great years of great gaming.

Rumors of a Google cloud-based file storage service have been circulating since 2006 but Google Drive was finally released on April 24, 2012. That’s an unusually long gestation period for a company that normally releases first then tweaks (or abandons) later.

Google Drive is a direct competitor to established players such as Dropbox, SugarSync, Box, Cubby, Microsoft SkyDrive and Apple iCloud. But is it better?

Google Drive Features

It’s important to realize that Google Drive is a replacement for Google Docs (GDocs). Once you sign-up with your Google account, the docs.google.com URL will redirect to drive.google.com. The web interface is fundamentally the same and you can add, create, edit and delete files and folders as before.

Replacing GDocs is a clever idea. The projects are compatible and your cloud-based documents can be browsed from your desktop — an attractive feature for those migrating from Microsoft Office. It’s also apparent Google has learned lessons from doomed projects such as Wave; it’s easier to piggy-back on the success of an existing project than build a new user base from scratch. GDoc’s 40 million users have little reason not to adopt Google Drive.

To make the most of Google Drive, you need to install the desktop application on your PCs, tablets and smart phones. Native applications are currently available for Windows, Mac, Android and iOS but you can be certain that other platforms including Linux and Blackberry will appear shortly.

The desktop application creates a folder on your device. Its files and sub-folders are automatically synchronized to the web and your other devices. Google offer a generous 5GB of free space with competitive plans including 100GB for $60 per year.

How Does it Compare?

Following sign-up, you’ll need to wait for around 24 hours before your existing Docs account is converted. I suspect Google will convert all accounts at some point in the future.

The desktop application is simple to install — assuming it doesn’t throw fatal errors. Many Windows users have reported similar experiences to me although installing Microsoft’s Visual C++ 2008 SP1 Redistributable rectified my issues. Once installed, there’s a little configuration to set the Google Drive folder and the application will run in the background so you can forget about it. On my system, it required a little over 30MB memory to execute — not horrendous, but Dropbox uses less than half that.

If you’ve used similar services you’ll understand how Google Drive works. The main difference is that you’ll find Google Docs files in your synchronized folder. Resources such as PDFs are downloaded as-is so you can open them directly.

Native Google documents are simply URL links which open the file in a browser. While that’s practical, it means you can’t open files offline and you don’t have a real backup in the event of connectivity or service problems. I’m not convinced it’s a major drawback but an option for automatic conversion to desktop formats such as TXT, RTF, DOC, ODT, XLS and PDF would be a bonus.

Finally, there’s the issue of trust. From an ownership perspective, the terms and conditions are clear:

You retain ownership of any intellectual property rights that you hold in that content. In short, what belongs to you stays yours.

Privacy is another matter…

When you upload or otherwise submit content to our Services, you give Google (and those we work with) a worldwide license to use, host, store, reproduce, modify, create derivative works (such as those resulting from translations, adaptations or other changes we make so that your content works better with our Services), communicate, publish, publicly perform, publicly display and distribute such content. The rights you grant in this license are for the limited purpose of operating, promoting, and improving our Services, and to develop new ones. This license continues even if you stop using our Services.

Could Google take a sneaky peek at your files to provide context-sensitive advertising? Put it this way, I suggest caution if you’re planning to upload documents containing personal information. But the same can be said for every online service since the dawn of the web.

Google Docs Summary

In essence, there’s little to distinguish Google Drive from its competitors. Google has copied the best features from Dropbox and, while that’s no bad thing, it doesn’t offer a compelling reason to switch. Yet.

More competition is great for users, though. Google may drive down storage prices and you can install different services concurrently to obtain many gigabytes of free backup space.

Pros:

• The service works.
• Generous 5GB of free space and inexpensive storage plans.
• Automatic Google Docs synchronization.
• Google will evolve the product rapidly.

Cons:

• Currently limited to Windows, Mac, iOS and Android platforms.
• Some rough edges; application installation problems and less-efficient memory use.
• Google document synchronization is a little kludgey.
• Fewer features, no API and less capable than competing products.
• Potential trust issues.

Have you installed Google Drive? Do you prefer it to competing services? Should Dropbox be concerned? Do you trust Google keep their eyes off your data?

It’s been one month since we last looked at the browser market. Since then, Firefox 12 and Chrome 18 were released and Microsoft has embarked on an aggressive television, movie and online marketing campaign for IE9. Has any of this affected usage patterns in the worldwide StatCounter statistics?…

The table shows market share estimates for desktop browsers. The ‘change’ column shows the absolute increase or decrease in market share. The ‘relative’ column indicates the proportional change, i.e. another 12.7% of IE6 users abandoned the browser last month. There are several caveats so I recommend you read How Browser Market Share is Calculated.

Chrome’s monthly growth has fallen below 1% for the first time since October 2011. Other vendors dream about a market share increase of 0.37% but it’s unusually low for Chrome. I’m not convinced adoption rates have begun to plateau and it could be a statistical blip. That said, the advantages Chrome holds over the competition are more marginal than they’ve ever been.

This month’s biggest winner is IE9 and it’s risen 3.6% since the start of March. Three factors have contributed to it’s success:

1. Automated browser updates.
2. Microsoft’s glossy marketing campaign.
3. Businesses migrating to Windows Vista/7.

However, Microsoft cannot be complacent. IE8 is falling faster than IE9′s gains and total IE usage dropped by 0.74%. Chrome is still poised to overtake during the summer of 2012.

Safari had another good month and the browser is slowly creeping toward double-digit usage figures. The iPad accounts for 2.12% of the 7.14% total which means it now has more users than IE6.

Firefox and Opera’s market share barely changed. Perhaps this isn’t surprising; there are few major differences between the top five browsers and we could be entering a period of stability with little significant movement in browser market.

Mobile Browser Usage

April’s mobile usage increased to 9.58% of all web activity. This is partly owing to better weather in the northern hemisphere — although the UK had its wettest April for 100 years.

The primary mobile browsing applications are:

1. Opera Mini/Mobile — 21.52% (down 1.34%)
2. Android — 21.31% (up 0.15%)
3. iPhone — 20.04% (down 0.06%)
4. Nokia browser — 11.42% (down 0.44%)
5. UC Browser — 7.77% (up 1.42%)

There’s little change within the top five although UC Browser has helped itself to another slice of Blackberry.

While it’s great to see healthy competition in the mobile market, it remains frustratingly difficult to test web sites and applications on a range of popular devices. Do you bother?

Brian Raymor’s recent SitePoint article, WebSockets: Stable and Ready for Developers provides a fabulous overview of the technology. In essence, WebSockets permit asynchronous bi-directional communication between the client and server. A connection is held open so lightweight messages can be sent from either device at any time. It’s an ideal solution for real-time chat and games and is likely to be more efficient than Ajax polling.

That said, there are a couple of drawbacks:

• WebSocket technology is relatively new and, at the time of writing, it’s only fully supported by Firefox and Chrome.
• Even if your browser supports WebSockets, there’s no guarantee it’ll be natively supported by your server platform.

Stable and ready? Perhaps not yet.

Fortunately, there’s another option if you’re desperate to exploit WebSocket technology today. Pusher is a new service which ployfills over the gaps in WebSocket implementation:

• Pusher is a proxy service that sits between your clients and server.
• On the client, Pusher provides a range of WebSocket libraries for JavaScript, iOS, Android, Flash, .NET, Silverlight, Ruby and Arduino.
• If you’re using a browser which doesn’t offer native support, the JavaScript library automatically imports a Flash-based shim which implements WebSocket technology on IE6 to 9, Chrome 1 to 4, Firefox 1 to 3, Safari 1 to 4, Opera and Android.
• On the server, Pusher provides a range of WebSocket libraries for PHP (generic and framework options), Ruby, ASP.NET (C# and VB.NET), Python, Node.js, Java, Groovy/Grails, Clojure, Coldfusion and Perl.
• If you’d prefer not use the WebSocket API for triggering server events, you can adopt Pusher’s REST API.

The whole process is reassuringly simple. Once you’ve registered for a Pusher account, you’ll receive an API key. Your HTML5 page includes the JavaScript library, establishes a connection and subscribes to a named channel:

<script src="http://js.pusher.com/1.11/pusher.min.js"></script>
<script>
var pusher = new Pusher("YOUR-PUSHER-API-KEY");
var channel = pusher.subscribe("my-channel");

You can then define callbacks that bind to events coming in via the Pusher socket:

channel.bind("my-event", function(data) {
	alert("An event was triggered with message: " + data.message);
});

To send a message from PHP:

require('Pusher.php');
$pusher = new Pusher($key, $secret, $app_id);
$pusher->trigger( 'my-channel', 'my-event', array('message' => 'hello world') );

The Pusher website provides full documentation, a selection of tutorials for PHP and Ruby and a showcase with case studies which might inspire your next world-beating real-time app.

I like the concept behind Pusher. It’s a great solution if you want to try WebSockets today while supporting the majority of browsers and native OS platforms. There are free plans for experimental prototypes as well as paid accounts for heavier usage.

For more information, refer to Pusher.com.

You’re using Dropbox right? If not, you should — it’s rapidly become one of the most useful applications ever devised. The concept is simple; install the Dropbox application on your PCs, smartphones and tablets and it creates a magic folder which synchronizes all its files across all your devices. As a bonus, it’s useful for backing-up, accessing files online, extracting historical versions, exploiting the API and sharing files with other users. With a free 2GB account, it’s no wonder venture capitalists have invested 48 gazillion dollars in the company.

Unfortunately, Dropbox sharing could lead to complications. The first stumbling block was that users needed to sign-up and install the Dropbox application. That may be easy for you, but try explaining it to more technically-challenged users — like those who are yet to appreciate the differences between files and folders. You then need to ensure users click a sharing link and navigate to the correct place on their file system. Finally, just as you got everything working, someone would delete an essential file which disappeared from everyone’s Dropbox folder (I mention no names — you know who you are!)

Fortunately, the situation’s just become a whole lot easier. You can share a file or folder with anyone just by sending them a link. They don’t require a Dropbox account and they’re even provided with a great online file viewer so it may not be necessary to download files.

Easy sharing should be activated in your Dropbox application (try rebooting or restarting Dropbox if it’s not). Right-click any file in your Dropbox folder and select Get link from the Dropbox menu. The file will be shown in your browser — simply copy the URL and share with whoever needs it.

Alternatively, log on at Dropbox.com, navigate to the file or folder you want to share and click its Get link icon.

To remove sharing, visit the shared URL again, click the cog icon at the top-right of the screen and select Remove link. You can also click Links on the website’s menu to view your shared files and remove any links.

Easy sharing is an amazing new feature which is certain to attract new users to Dropbox. You could even use it as a rudimentary CDN for your website. Let us know if you think of other interesting uses.

I’m sure that you’ve heard the expression “A picture is worth 1,000 words.” This is no less true, whether you are a seasoned professional photographer, or an aspiring amateur. What many people don’t realize is that your pictures could be worth $1,000. That may be exaggerating a bit, but making money selling your photography is not as far fetched as you might think. Many stock photography websites are more than willing to give you a cut of their profits for selling your work on their site.

Here is how it works. You build a nice collection of great photos, and you want to begin selling them. You sign up with a stock photography company and in return, if someone buys your photo to use in their work, then you get a percentage of each sale. If your work is good enough, and your photos are relevant to a certain topic, they could be worth money.

Stock photography websites sprang up over the recent years, due to the increase in freelance graphic designers and startup design firms. The economy has everyone watching their budgets, and it can be expensive to hire a professional photographer for a project. It can also be a lot of work, time, and money to set up the scene that they want. This is where a good stock photography website comes in. You go to their site, sign up for a membership, and you can immediate begin to search for images via topic. Some larger stock photo companies have 1 million+ images in their database. You find an image that fits your creative vision, pay a reasonable price ($5- $50), download the image, and you are creating your design work in minutes. Some stock photo sites offer a monthly membership fee, and you can download as many images as you want, or you may have a predetermined amount of images that you can download each month. This usually depends on your membership level. This puts professional level photography in the hands of designers quickly and easily, and the designer saves tons of time.

Where to Sell Your Photos

iStockPhoto- iStockPhoto can be a bit of a challenge to join. You have to join their site, read their manual, and take a quiz. Then you have to submit samples of your best work, and if accepted, you can start selling your photos. If you sell to multiple sites, you can earn 15% through iStockPhoto, but if you decide to become exclusive to their site, then you can earn anywhere between a 22-45% royalty rate on your photos. If you fulfill certain requirements, you can sell your images to the entire Getty Images Family.

ShutterStock- It is free to contribute. All you have to do is sign up, and you can earn anywhere from $0.25 all the way up to $28.00 per image download. This can be very lucrative if your images are common or very general in subject, while being professional at the same time.

Fotolia- Fotolia has a huge library of images available for professionals. You can sign up for a free account. Then, you just upload your images and give them relevant tags. Fotolia breaks down your ability to earn into 2 categories. The first one is for single image downloads and you can earn anywhere from 20%- 63% for each image, but this rate depends on if you are exclusive to Fotolia, and what your ranking is. The second rate is for when your image is sold via subscription download. You can earn 0.25 credits to 0.40 credits.

Shutterfly- Shutterfly does things a little differently. Instead of selling your photos directly on their site, you pay an annual fee and they allow you to set up a gallery to market and sell your photos. The nice part about this is that you pay a reasonable annual fee to set up your gallery. $99 gets you 5GB of hosting space for your images, and $199 per year gives you unlimited hosting space, so if you have a very large collection of photography that you would like to sell, that package is for you. Another great aspect is that you set your own prices for your photos, which means that you make what you want to make from your work. People can order prints of your work and you get paid, or they can buy your work via digital download.

ShutterPoint- Shutterpoint makes it easy to join and start selling your photos immediately. All you have to do is sign up. They also accept all types of photos, so there isn’t a test or acceptance process before you can start selling. They also mention a bulk upload tool, so you can upload many photos quickly. They have a payout rate of 85% for Full Royalty Free images, and 70% for Standard Royalty Free images.

BigStockPhoto- This site allows you to sign up, but you have to complete a tutorial before you can begin uploading your images. Before you start selling your images on BigStockPhoto, their review team must approve them. Pay As You Go purchases will pay you 30% of the US dollar price when someone downloads a single image. This can equal up to $29.70. When someone buys your image using BigStock credits, you will receive $0.50 for every credit spent.

123RF- 123RF is another good site where you can sell your photos. Simply sign up, upload your images, and you get paid depending on how they downloaded your photo. If someone pays for your photo with credits, then you receive 50% of the selling price. If they download your photo when they are on a subscription plan, then you will receive $0.36 per download.

Dreamstime- Dreamstime allows anyone to become a member, but to sell your photos, your work has to be reviewed and you have to be accepted. The pay that you receive depends on the level that you photos are on when they sell. Every image starts at level 0 and the more times the image is downloaded, the higher its level will increase. Each level has a percentage, based on certain criteria. The whole process is rather complicated, and to understand, it would be best to view the chart on their website. There are 5 levels, and different pay scales depending on size.

Corbis- Corbis is a professional stock photography site that also allows for photography submissions. The difference here is that they are very vague on the details of being a contributor. You have to fill out an application, but it doesn’t say anywhere on the site what your compensation will be, the rates, how it works, or any details. Corbis is not as user-friendly and straightforward about compensation as the other sites listed here are.

CanStockPhoto- CanStockPhoto makes it easy to sell your photos online. Sign up for an account, fill out an application, and once you are accepted, you can begin uploading your photos quickly. You also receive money for referring other photographers. Exclusive rights photos earn 50% commission, and different sized images and assets earn different amounts of commission. To see a detailed list, click here.

DepositPhotos- DepositPhotos makes it quick and easy to get started with selling you images. Sign up for an account, pass a quick exam (they assure you that it is easy), and then you can start uploading images. The only snag is that each image has to be approved before it is officially displayed on the site to be sold. Their pay scale is similar to that of Dreamstime, where your images increase in level when they sell a certain amount. The higher the level is, the more money you make from each sale. They have a chart with examples available on their site. One stand out feature that they have is that you can sell vector images as well, but you have to upload them in the format specified.

Photography Image via Shutterstock

We’re a quarter of the way through 2012 so it’s time to take another look at the worldwide browser market. Last month was bad for Microsoft and IE lost almost two percentage points — mostly to Google Chrome. Android also overtook Opera to become the most-used mobile browser. Has any company been made to look foolish in April’s worldwide StatCounter statistics?…

The table shows market share estimates for desktop browsers. The ‘change’ column shows the absolute increase or decrease in market share. The ‘relative’ column indicates the proportional change, i.e. another 9.5% of IE6 users abandoned the browser last month. There are several caveats so I recommend you read How Browser Market Share is Calculated.

It’s the same old story. Chrome leaped another 1% primarily at the expense of Internet Explorer. If we look at individual versions, Chrome 17 is the world’s most-used browser with a 27.2% share. IE8 is far behind in second place with 16.0%. At best, Microsoft has two or three months before Chrome overtakes IE’s total and we crown a new champion for the first time in 13 years.

There’s some consolation for Microsoft; IE9 was the fastest growing browser in March 2012. It gained another 2.5% of the market to increase its user base by 20% and become the most-used version in Europe and the US. Many users would have been upgrading XP to Vista/7 which is good for the company’s bottom line.

However, IE8 is dropping fast — and by more than I expected. Many of us doom-mongers prophesied IE8 would morph into another IE6 following Microsoft’s decision to abandon XP users. The browser’s unlikely to become irrelevant for a while but it’s almost certain to reach single-figures within a few months.

IE6 usage in China is still a concern and it retains almost 26% of the market. Elsewhere, IE6 and 7 combined share has dropped to 4.25% — or fewer than one in 20 users. You should always check your site’s figures but we’ve reached a point where there’s no need to spend a disproportionate amount of time developing and testing the browsers. IE6 and 7 are dead to me, but still rise like zombies now and again.

Firefox holds 25%. Version 11 has reached 6% within a few weeks and the 4+ line is growing steadily. That said, version 3 and below are dropping at a similar rate.

Both Safari and Opera dropped although statistical fluctuations are amplified by their relatively low figures. They’ll probably regain that loss next month.

Mobile Browser Usage

March’s mobile usage increased to 8.99% of all web activity.

The primary mobile browsing applications are:

1. Opera Mini/Mobile — 22.86% (up 1.16%)
2. Android — 21.16% (down 1.51%)
3. iPhone — 20.10% (down 0.96%)
4. Nokia browser — 11.86% 11.24% (up 0.62%)
5. UC Browser — 6.35% (up 0.45%)

There’s more bad news for Blackberry. It dropped 0.35% to 6.18% and has been knocked out of the top five by UC Browser — an independent application for most platforms which users have to choose and install.

I hope Android enjoyed its single month at the top of the chart because Opera has regained the crown again. There’s a three-way tie between Opera, Android and the iPhone which highlights healthy competition in the market. Don’t make the mistake that everyone’s using the same phone as you!

2012 is only three months in and there are already two new SitePoint books for all you developers and designers (CSS and jQuery). Plus DealFuel.com is now brimming with cool deals for you each week.

But now, let’s have some fun! :)

SitePoint’s GREAT MYSTERY HUNT is on!

Search SitePoint for the answers to three clues, and save yourself a thrilling 75% on our – Ultimate Design Bundle, which includes:

• jQuery: Novice to Ninja, 2nd edition (ebook)
• Principles of Beautiful Web Design, 2nd edition (eBook)
• SEO Guide Kit (digital version)
• 1 Month’s Learnable Membership

Make sure you also sign-up to DealFuel to receive your FREE digital copy of our just released HTML5 poster.

Happy Hunting Sherlocks!

51% of all web site traffic is non-human. If you’re reading this, you’re in the minority. Unless you’re a machine (check your ports — if they’re warm and moist, you’re probably OK).

The study was undertaken by Incapsula, a website security company. While we haven’t quite reached the point where Skynet becomes self-aware and dispatches Terminators to wipe us out, it does appear that the web would continue to operate happily without us.

Data was collected from a sample of 1,000 websites which use Incapsula services. The report concluded that web traffic is generated from:

• 49%: people browsing the web
• 20%: search engines bots indexing pages
• 19%: spy-bots collecting competitive intelligence
• 5%: website scrapers
• 5%: automated hacking tools searching vulnerabilities
• 2%: automated comment spammers

It’s easy to be cynical about these reports, especially when they’re conducted by a security company which could enjoy commercial benefits from scare-mongering. That said, it does indicate a significant volume of hacking activity even if the report is somewhat skewed or exaggerated.

If you or your clients aren’t concerned about security, perhaps it’s time to evaluate that policy. If we assume Incapsula report is over-estimated by a factor of 300%, malicious activity will still account for one in ten website requests. That’s equivalent to the average number of all IE6, IE7, Firefox 3.x and Opera users combined. Nasty.

Humans may be losing the web war, but at least we can win a few battles.

Do you believe Incapsula’s report? How does it compare with your website statistics? Have you successfully defeated a major hacking attempt?

Where did the last six weeks go? Following the Firefox 10 release on January 31 2012, Firefox 11 was released on March 13. We rarely see major new features in Chrome, so it’s great to discover that Mozilla has added several new toys for us:

Style Editor

Firefox 11 provides a new stylesheet editor. Visit any page, then select Style Editor from the Web Developer menu or press Shift+F7:

While there are several excellent add-ons which offer similar functionality — Firebug, the Web Developer Toolbar and Firefox’s own Page Inspector tool — the Style Editor is dedicated to editing styles and does it very well. It’s main advantages:

• all stylesheet files are displayed — you can disable or enable any by clicking the ‘eye’ icon
• compressed CSS is automatically decompressed
• you can add or import additional files
• all changes are live — start typing and the page will re-render immediately
• you can save any file to your hard disk
• it’s fast and looks great.

I’m a fan and will certainly use it on a day-to-day basis.

“Tilt” 3D Page Structure View

Tilt was previously available as an add-on. It’s accessed from the Inspector tool which now offers a “3D” button (Inspect from the Web Developer menu, Ctrl+Shift+I, or “Inspect” from the context menu):

The view stacks elements as they are nested in the DOM and displays any which are hidden or off the page. You can zoom in and out, rotate and pan the map using +/-, a/d/w/s, and the cursors. It’s integrated with the Page Inspector so you can use the element breadcrumbs and style windows as before.

The 3D page view requires a graphic card which supports WebGL. Mine does and it runs Trigger Rally without problems but, for some reason, 3D page view wouldn’t work on my PC. Hopefully, you’ll have better luck.

text-size-adjust CSS property

text-size-adjust or, more specifically, -moz-text-size-adjust is a non-standard property which caused much of the CSS vendor prefix controversy. Apple introduced the property for their smartphones and tablets but has not submitted it to the W3C. However, that’s likely to change now it’s been implemented by Microsoft and Mozilla.

text-size-adjust controls how mobile devices size text and show scrollbars when zooming into a web page. It can be set to inherit, none, auto or a percentage — the MDN page explains more.

outerHTML property

outerHTML has finally made it to Firefox — it’s available in all the competing browsers and was originally implemented in IE4.

You may have encountered innerHTML which can extract or replace an element’s descendants with a serialized HTML fragment, e.g.

<div id="myelement">
	<p>Hello</p>
</div>
<script>
var m = document.getElementById("myelement");
m.innerHTML = "<p>Goodbye</p>";
</script>

The resulting HTML:

<div id="myelement">
	<p>Goodbye</p>
</div>

outerHTML is similar to innerHTML except that it can extract or replace the selected element as well as its descendants, e.g.

<div id="myelement">
	<p>Hello</p>
</div>
<script>
var m = document.getElementById("myelement");
m.outerHTML = "<p>Goodbye</p>";
</script>

The resulting HTML:

<p>Goodbye</p>

The div is removed from the DOM.

Miscellaneous Updates

That’s not quite everything. As well as several bug fixes and speed improvements:

• Sync can synchronize your add-ons across devices.
• Firefox can now migrate your bookmarks, history, and cookies from Google Chrome.
• The default HTML5 video controls have been redesigned.
• HTML5 tags are correctly highlighted when viewing the source.
• Files can be stored in IndexedDB.
• The moz prefix has been removed from the Websockets API.
• When viewing a single image from a URL, the graphic is now centered on a gray background — try it.

Despite the initial teething problems, Firefox gets better with every release. If you were disillusioned with v4.0+ and migrated elsewhere, I recommend you give it another try.

Another month has passed so it’s time to look at the browser market once more. During February, Chrome 16 became the world’s most-used browser version and exceeded IE8′s market share by 5%. Can Chrome continue it’s meteoric rise? Let’s look at the latest worldwide StatCounter statistics to find out…

The table shows market share estimates for desktop browsers. The ‘change’ column shows the absolute increase or decrease in market share. The ‘relative’ column indicates the proportional change, i.e. another 9.4% of IE8 users abandoned the browser last month. There are several caveats so I recommend you read How Browser Market Share is Calculated.

There’s a little good news for Microsoft: IE8 has become the most-used browser version once again.

The bad news:

• It only occurred because Google released Chrome 17. Half of Chrome’s user base upgraded last month which resulted in version 17 gaining 13.7% while version 16 retained 13.4%.
• IE8 slipped below 1 in 5 users for the first time since November 2009.
• Internet Explorer lost almost 5% of its user base in one month. That’s a shocking figure.

IE10 may be stunning, but it’s unlikely to appear for a while and IE9 is being left behind. Microsoft’s decision to abandon XP users has also back-fired: the aging OS still accounts for more than one in three PC users who must either stick with IE8 or switch to an alternative browser.

Technically, IE8 isn’t too bad and will happily support HTML5 with a little JavaScript shim-magic. But it lacks basic CSS3 features such as rounded corners and shading which we’re all using. The result: sites are usable but look terrible in IE8 when compared with any other browser.

Of course, Microsoft want users to upgrade to Windows 7 or 8 so they can use IE9/10. Unfortunately, that won’t happen quickly. Even if the economy and costs were not factors, large organizations implement long-term IT plans and upgrading thousands of users takes time. The PC market has also been saturated for several years; many individuals will stick with XP until their machine breaks down and they’re forced to buy a replacement. And let’s not forget that XP remains a capable OS; some users prefer it and Microsoft would not contemplate withdrawing support for major products such as Office.

Microsoft has a simple choice: either release IE9/10 on XP or continue to lose massive chunks of market share. There will be technical hurdles but IE9 already has a software rendering mode and few would complain if the XP version was slower. The relatively tiny Opera can create a modern HTML5 browser which works on Windows 2000 — Microsoft has few excuses. Users are increasingly browser-literate and, once they’ve switched to an alternative, it’ll be tougher to get them back on IE.

Usage patterns are not quite so straight-forward, but the bulk of those IE users switched to Chrome. If anything, the browser’s market share gains appear to be accelerating as its user base expands. There’s no sign of the predicted growth plateau.

Mozilla Firefox held steady at 25%. Version 10 has been well received and many of the memory and add-on glitches which frustrated users have been solved. Mozilla hasn’t reversed the downtrend, but Firefox’s future looks brighter.

Safari and Opera both enjoyed modest gains. Significantly, Opera has broken through the 2% barrier once again — it’s been below that level for more than 12 months.

Mobile Browser Usage

Mobiles accounted for 8.53% of all web activity during February 2012.

The primary mobile browsing applications are:

1. Android — 22.67% (up 1.28%)
2. Opera Mini/Mobile — 21.70% (down 1.64%)
3. iPhone — 21.06% (up 1.55%)
4. Nokia browser — 11.24% (down 0.58%)
5. Blackberry — 6.53% (down 0.15%)

The top three have almost identical usage figures but Opera has been knocked off the top spot for the first time. The Android browser has been rising steadily at a rate similar to Chrome — it’s desktop cousin.

Blackberry has fallen a little further. It held a 19% share just 18 months ago which illustrates just how fickle the mobile market can be.

(Try saying that title after a few drinks!)

Flash has reached a crossroads. It’s been the only reliable rich-media delivery platform for the past decade but the technology is being attacked on several fronts:

• HTML5. Native browser audio, video and features such as canvas provide an alternative to Flash. They’re not without their own set of issues but are backed by many large IT companies.
• Apple. Whether it was technical, commercial or political reasons, Apple banned Flash on the iPhone and iPad. That policy ultimately led to Adobe abandoning Flash on mobile devices (although AIR can still be used to create cross-platform ‘native’ applications).
• Competing plugins. To a lesser extent, alternatives such as Microsoft’s Silverlight and Google’s native client want a slice of Adobe’s market.

Developer opinions range from “HTML5 will never supersede Flash” to “Flash is dead and buried”. Personally, I think it’s good to have a range of options but the days of Flash being the only contender are long gone. Which is why it’s refreshing to see a little commercial honesty in Adobe’s roadmap for the Flash runtimes.

Adobe is shifting focus to gaming and premium video. The company believes Flash is particularly suited to those markets and is concentrating its efforts accordingly:

Increasingly, rich motion graphics will be deployed directly via the browser using HTML5, CSS3, JavaScript and other modern web technologies. While the primary role of Flash Player as an engine for innovation on the web remains the same, what it is used for will change.

Adobe believes that the Flash runtimes are particularly and uniquely suited for two primary use cases: creating and deploying rich, expressive games with console-quality graphics and deploying premium video.

This shift in focus for Flash does not mean that existing content will no longer run, or that Flash cannot be used for content other than gaming and premium video. However, it does mean that when prioritizing future development and bug fixes, gaming and premium video use cases will take priority.

My favorite quote:

Adobe believes that Flash is the game console for the web

It’s a sensible move. Reliable native video is a few years away; vendors are yet to agree on a single codec and IE8 usage will remain high until Windows XP dies. You can use Flash as a fallback but, if you’re doing that, there’s little point using a multitude of HTML5 formats.

HTML5 gaming is possible but can be a lot of effort — especially if you’re relying on newer technologies such as 3D transforms or WebGL. Flash offers a more consistent platform although the gap is narrowing.

Adobe is reassuring Flash developers that the runtime will meet their needs over the next five to ten years. If you’re using Flash now, there’s no immediate reason to panic (unless your audience is primarily mobile users). Ironically, Flash’s advantages will dwindle to nil once Adobe’s own development tools can export native HTML5. The plug-in will become irrelevant but that doesn’t mean ActionScript and its associated technologies can’t be used.

Developers have a love-hate relationship with CSS vendor prefixes. They allow us to use bleeding-edge technologies at the expense of long-winded declarations:

background-image: -webkit-linear-gradient(#fff, #000);
background-image: -moz-linear-gradient(#fff, #000);
background-image: -ms-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);

It works well in theory but consider what happens in the wild:

1. Experimental properties are often implemented in the webkit engine first and there’s no guarantee they’ll be replicated in other browsers.
2. It’s often difficult to determine whether a vendor-prefixed property is part of the CSS specification. Some vendors don’t submit properties for standardization.
3. Even if the standard property changes, the incorrect vendor-prefixed version continues to be supported. Your old code still works; you won’t revisit it to correct the implementation.

You’ll often find sites using the -webkit prefixes alone — even if other browsers support the property or it has widespread availability without a prefix (such as border-radius). Chrome and Safari therefore look better than competing browsers — and the other vendors aren’t happy.

The issue was raised and discussed in the W3C meeting on February 7, 2012:

Web standards activists are teaching people to use webkit. You will see presentations from all the web standards advocates advocating people to use webkit prefixes.

Our job is to solve interoperability.

At this point we’re trying to figure out which and how many webkit prefix properties to actually implement support for in Mozilla.

If we don’t support webkit prefixes, we are locking ourselves out of parts of the mobile web.

Let that sink in for a moment.

Non-webkit browsers will support the -webkit prefix. That is the solution being considered by the W3C.

The idea is likely to fail miserably. Two or more implementations of the same webkit property won’t be compatible so developers won’t be able to use it anywhere. No one wins — including Apple and Google.

But I’m more concerned about the irreparable damage it’ll cause if the solution is successful. Once developers discover webkit prefixes working in Firefox, IE and Opera, they’ll expect them to work on all properties. Webkit-only adoption will rise exponentially and the vendors will be forced to implement the prefixes throughout. At that point, webkit properties will become the de facto standard regardless of any W3C specification. Game over: the open web is closed.

The implications also go further than CSS: many of the new JavaScript APIs have vendor prefixes.

Who’s to Blame?

We can point the sticky finger of failure at:

The W3C Working Group
It takes too long for web standards to reach maturity. That may be unavoidable but browser vendors are bypassing the process.

Browser Vendors
In their rush to push new technologies, it’s too easy for vendors to add a prefix and forget about it. Web developers require more information: is the property being considered by the W3C and when will the prefix be dropped?

In an ideal world, experimental prefixes would disappear once the browser implements the standard property. Vendors won’t do that because it’d break sites, but they could do more to highlight the problem, e.g. provide obsolescence detection tools or output error messages to the developer console.

Apple and Google
Both are guilty of promoting webkit prefixes as though they’re a standard part of day-to-day HTML5 web development. Apple has been accused of actively working against the W3C.

Mozilla, Microsoft and Opera
Other vendors are often months behind the webkit browsers — if not years. Adding webkit prefixes is a ludicrous solution: it’s time to up their game.

Technology Websites and Evangelists
We all love cool demonstrations but evangelists often neglect to mention that properties are experimental and may never have full browser support (and, yes, that includes SitePoint). Ideally, code should work in at least two browsers; at least it would indicate that multiple vendor prefixes are required.

Web Developers
We’re too lazy. We’re writing browser-specific code and, while we may have good intentions about correcting it later, we rarely do.

Do you recall the last time developers targeted a specific browser? It was IE6. We’re still living with the legacy of that decision a decade later. Do you really want history to repeat itself?

It’s Time to Act

I’m opposed to non-webkit browsers supporting webkit prefixes. At best, it makes prefixes unusable. At worst, it breaks the whole standardization process. You may agree or disagree but make your opinion known to colleagues, in blogs and on social networks. The W3C and browser vendors will listen to your feedback; you just need to provide some.

Then test your site in multiple browsers. A little graceful degradation is fine but neglecting one or more modern browsers with equivalent support is not. Fix the code, otherwise your site is contributing to the problem.