With the advent Google Chrome there has been a lot of media coverage regarding the browser’s uptake and how it will compete with Internet Explorer, Firefox and Safari. This is where the User Agent becomes most valuable. It can be used in analytics software to determine the browser share and consequently aid the development of the website.

But what is a User Agent? A User Agent is the client application used with a particular network protocol; the phrase is most commonly used in reference to those which access the Web. Web user agents range from web browsers and e-mail clients to search engine crawlers (spiders), as well as mobile phones, screen readers and braille browsers used by people with disabilities. When Internet users visit a web site, a text string is generally sent to identify the user agent to the server. This forms part of the HTTP request, prefixed with user-agent: and typically includes information such as the application name, version, host operating system, and language. Bots, such as web crawlers, often also include a URL and/or e-mail address so that the webmaster can contact the operator of the bot.

By simply typing about:version into Chrome’s address bar you will be presented with the following information:

Google Chrome
0.2.149.29 (1798)
Official Build
Google Inc.
Copyright © 2006-2008 Google Inc. All Rights Reserved.
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13

As you can see Chrome’s version information provides limited detail about the browser. The last line is the important one. It is the HTTP User-Agent header:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13.

If you know the RFC 2616 specification on the HyperText Transfer Protocol — which incidentally, I gladly don’t — you would know that the User Agent, or more formally, product token, should be short and to the point:

Product tokens SHOULD be short and to the point. They MUST NOT be used for advertising or other non-essential information. Although any token character MAY appear in a product-version, this token SHOULD only be used for a version identifier (i.e., successive versions of the same product SHOULD only differ in the product-version portion of the product value).

Clearly this isn’t the case! One of Google’s reason’s behind creating the Chrome browser was to start afresh. It would have therefore been truely amazing if they had made the string simply Chrome/0.2.149.27.

Unfortunately, browser sniffing makes an ever-growing UA string the path of least resistance for browser vendors.

So, what does Chrome’s User Agent string actually mean:

• Mozilla/ - This means that browser has the kind of capabilities that Netscape 1.1 had compared to Mosaic and Lynx.
• 5.0 - This means that the browser engine is from the post-Browser War Web Standards era as opposed to being from the Browser War era.
• (Windows; - This means that general windowing system flavor the browser runs on is Windows (as opposed to, for example, Apple and X11).
• U; - This means that the browser has at least the level of cryptographic capability / encryption strength that U.S. versions of browsers had in the late 1990s.
• Windows NT 6.0; - This indicates the operating system the browser is running on. In this instance, the browser is running on Vista.
• en-US) - This indicates the user interface language of the browser (U.S. English in this case). This may be used to choose between different content languages even though HTTP has a different header for that purpose.
• AppleWebKit/ - This indicates that the engine of the browser is WebKit as opposed to being Gecko. Developers should not do user agent sniffing as a rule, but if they still do, this is what they should be sniffing.
• 525.13 - This is the WebKit version from which Chrome branched its copy. Site admins could use this to detect old versions with known bugs.
• (KHTML, like Gecko) - This introduces the substring Gecko into the UA string while pointing out to human readers that Webkit was forked from KHTML. Without this substring, Chrome might be put in the same category as IE and Netscape 4.
• Chrome/ - This string identifies the browser as actually Google Chrome.
• 0.2.149.27 - This is the Chrome version. This could be used to detect old versions with known bugs.
• Safari/ - This means that the browser is like Safari as opposed to being like Firefox.
• 525.13 - This just repeats the WebKit version in order to have some version but not the irrelevant Safari.app version.

On 1st 2nd September 2008 Google launched a new opensource browser project named Chrome.

UPDATE: You can download the beta project from the Google Chrome website.

Instead of me talking you through the project, Google and Scott McCloud have put together a cool little cartoon.

However, as a brief summary:

• Google Chrome is Google’s open source browser project.
• The browser will use the popular Webkit HTML rendering engine used in Safari and Adobe AIR.
• The browser will include a brand new JavaScript Virtual Machine called V8.
• The browser will include Gears to allow developers to enhance the user experience.
• Google Chrome will use special tabs, like more traditional browsers, but set above the address and menu bar.
• Each browser tab will run on its own process. If one tab fails for some reason, the whole browser will not need to be restarted, losing valuable work or tabs. This is similar to functionality found in Internet Explorer 8.
• The browser has an address bar which includes a more intuitive auto-completion feature called ‘omnibox’. It is said to be less ‘irritating’ than current auto-complete/suggest functionality common to Firefox 3 or Google Suggest.
• As a default homepage Chrome presents you with a kind of speed dial feature, similar to the one found in Opera.
• Chrome has a privacy mode, which allows you to create an incognito window and nothing that occurs in that window is ever logged on your computer. Again, this is similar to functionality found in Internet Explorer 8.
• Web apps can be launched in their own browser window without address bar and toolbar, much like Mozilla’s Prism project.
• To fight malware and phishing attempts, Chrome constantly downloads lists of harmful sites.

(Click on the images to see a larger view)

You can find out more information from Google’s blog post on the subject.

This weeks Computer Weekly magazine’s Downtime section has an interesting story:

In what is likely to be better news for men than women, Microsoft’s latest browser, Internet Explorer 8, boasts a feature that allows users to hide the trail of their web browsing.

The feature, predictably nicknamed “porn mode”, stops casual users and, crucially, online advertisers from seeing a browser’s audit trail. This means that advertisers cannot easily target adverts based upon a user’s viewing habits and conversely, advert providers, such as Google’s Adsense, cannot easily reimburse members of their content network since they do not know where the user clicked an advert.

Both Web 2.0 and Software-as-a-Service (SaaS) almost always depend up on the browser as a common denominator. It is with the web browser that web-based applications are accessed and run, yet the browser model is rapidly reaching its limitations.

Adobe thinks it has the answer and so now does Mozilla.

A year ago, most web developers had to think about Firefox, Internet Explorer, Safari, Opera and perhaps WAP for mobile devices and widget development for one of yet more platforms. Today the horizon is changing and web developers are afforded more opportunity and possibly with that more complexity, through offline development.

Browser extensions now exist that allow for the creation of offline web applications with Dojo Offline, Google Gears, Firefox 3, and other options on the market, pioneering the way and making it possible to take your web application with you on an aeroplane or an underground train.

The drive to make these offline applications desktop applications has also been thrown into the mix, with examples coming from Apple with WebKit Cocoa bindings, Adobe with AIR and Microsoft with Silverlight. Now it is the turn of Mozilla to enter the foray with a project called Prism.

Prism is part of an experiment by Mozilla designed to “bridge the divide in the user experience between web applications and desktop applications“. Essentially, Prism will allow you to create a desktop-like application out of individual websites. These site-specific applications are a growing trend and a trend heavily marketed by, not only Adobe, but now Mozilla, as ‘the future’.

While traditionally users have interacted mostly with desktop applications, more and more of them are using Web applications. But the latter often fit awkwardly into the document-centric interface of Web browsers.

In its current form, Prism doesn’t have the ability to function as a desktop application without access to the Internet, but Mozilla says it is “working to increase the capabilities of those apps by adding functionality to the Web itself, such as providing support for offline data storage and access to 3D graphics hardware.”

Instead of needing to run a browser to, for example, access Google Calendar, a simple icon can be clicked on the desktop. The icon will launch the Google Calendar application inside a Prism window, without any of the additional web browser bloat. This can have its benefits, especially when designing workflows and securing applications as the developer’s pain, the back button and address bar, are removed from the equation.

Although Mozilla may be excited about the concepts behind Prism, and Adobe about AIR not everyone shares the same enthusiasm, or has the working habits that require such an application-based approach. For some, the advantage of web applications is that they inherently aren’t desktop applications and everything can be handled in a single application almost anywhere on the planet, assuming a computer with a browser and web connection. However, Prism, AIR and Silverlight could end up offering the best of both worlds.

Internet Explorer 6 is notoriously rubbish at supporting PNG transparency resulting in images that appear with a grey background; not very useful. All is not lost. Angus Turnbull has created a work around for this issue. You can get all the information needed at this link http://www.twinhelix.com/css/iepngfix/, including support forums. This is possibly the easiest way to get full PNG transparency and importantly the technique works for CSS backgrounds, albeit when no used with the no-repeat attribute.

The secret behind this implementation is a filter introduced in IE55 that is called AlphaImageLoader. This filter takes an image with alpha channels and displays it. It has also a property for deciding how to scale the image.

To download this permanently: iepngfix.zip (15kb).

How to Implement

1. Put the iepngfix.htc file into your CSS directory
2. Put the blank.gif file into your CSS directory (otherwise you will need to edit the HTC file)
3. Edit your CSS to include the following line behavior:url(iepngfix.htc); for the <img> tag

Known Issues

This uses CSS “behaviors”, a custom Microsoft extension to CSS. As such, it will not affect any other browsers like Mozilla and Opera which already implement good PNG support. It will also not help IE4.0 and IE5.0, which don’t include the necessary IE filter, and does nothing with IE5/Mac (which natively supports translucent PNG foreground images, however).

You should not apply other visual filters to the iamge with the PNG behavior because these other filters do not respect the alpha channels and the result will most likely not be satisfactory.

Alternatives

An alternative source that I recently discovered is found at the following link http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

By itself, Firefox is a lean and fast browser, but lacks many functions useful to a Web Developer. This is where extensions come to the rescue. Web Developers use a host of Firefox extensions to increase their efficiency.

Here is a list of the Firefox extensions I utilise in my day-to-day work:

ColorZilla

https://addons.mozilla.org/firefox/271/

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

Firebug

https://addons.mozilla.org/firefox/1843/

FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, an error console, command line, and a variety of fun inspectors.

FireFTP

https://addons.mozilla.org/firefox/684/

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SSL encryption, file hashing, and much more.

HTML Validator

http://users.skynet.be/mgueury/mozilla/

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla.
The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
The details of the errors are seen when looking the HTML source of the page.

The extension is based on Tidy. Tidy, was originally developed by the Web Consortium W3C. And now extended and improved by a lot of people. Tidy is embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.

IE Tab

http://ietab.mozdev.org/

This extension embeds Internet Explorer (IE) in a Mozilla/Firefox tab, which allows you to view your work in IE without launching a separate window.

LinkChecker

https://addons.mozilla.org/firefox/532/

Checks the validity of links on a web page.

MeasureIt

https://addons.mozilla.org/firefox/539/

Draw out a ruler to get the pixel width and height of any elements on a webpage.

SEO for Firefox

http://tools.seobook.com/firefox/seo-for-firefox.html

This tool was designed to add more data to Google and Yahoo! to make it easier to evaluate the value and competitive nature of a market. SEO for Firefox pulls in many useful marketing data points to make it easy get a more holistic view of the competitive landscape of a market right from the search results. In addition to pulling in useful marketing data this tool also provides links to the data sources so you can dig deeper into the data.

Server Spy

https://addons.mozilla.org/firefox/2036/

Server Spy indicates what brand of HTTP server (eg. Apache, IIS, etc.) runs on the visited sites. When a tab is selected, the corresponding server name is shown on the right-hand side of the browser’s status bar.

Snapper

https://addons.mozilla.org/firefox/2703/

People often take screenshots of web pages for miscellaneous reasons - when designing a page, debugging a web application, or even for graphical reference. Usually, though, only a portion of the screenshot is actually relevant to the user’s purpose, leading to a large portion of the image getting cropped. This can be time consuming, and annoying at times.

Snapper allows users to designate an area of a web page for a focused snapshot, cutting out the additional work needed for cropping unecessary information.

Web Developer

https://addons.mozilla.org/firefox/60/

http://chrispederick.com/work/webdeveloper/

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools.

Here is a list of other extensions I find useful:

CustomizeGoogle
Gmail Space
Google Notebook
GooglePreview
SessionSaver
Tails Export