What’s New in Chrome 20

If you noticed a subtle slow down with your Chrome browser this morning, it will have been updating to version 20. Chrome 19 was released in mid-May, so what have Google’s engineers been up to?

For the most part, Chrome 20 is a big bug fix. Other than the updated version number and a slightly larger “new tab” button, regular users won’t notice anything new. Fortunately, there are a number of features lurking under the hood for developers.

HTML5 Datalist Element

The HTML5 datalist provides an auto-suggest box. When the user starts to type, suitable options appear in a drop-down list or a new value can be entered. For example:

<label for="choose">What's your favorite browser?</label>
<input id="choose" type="text" value="" list="browser" />
<datalist id="browser">
	<option value="Safari">Apple Safari</option>
	<option value="Chrome">Google Chrome</option>
	<option value="IE">Microsoft Internet Explorer</option>
	<option value="Firefox">Mozilla Firefox</option>
	<option value="Opera">Opera</option>
</datalist>

Webkit isn’t always ahead of the game and the element has been supported in Firefox and Opera for some time. Implementations differ slightly:

• Firefox offers the best experience and users can search for text appearing anywhere within the option text.
• Opera only permits searching within the option value attributes. The drop-down shows options where the start of the value matches the search string.
• Chrome has a similar implementation to Opera except that the option text is shown as well as the value.

Datalists do not work in Safari or IE9 and below. Fortunately, you can provide a fallback with a standard select box in conjunction with a regular input, e.g.

<label for="choose">What's your favorite browser?</label>
<datalist id="browser">
	<select>
		<option value="">Other</option>
		<option value="Safari">Apple Safari</option>
		<option value="Chrome">Google Chrome</option>
		<option value="IE">Microsoft Internet Explorer</option>
		<option value="Firefox">Mozilla Firefox</option>
		<option value="Opera">Opera</option>
	</select>
	<label for="choose">or type one:</label>
</datalist>
<input id="choose" type="text" value="" list="browser" />

New Mobile Development Features

The Web Inspector (Ctrl+Shift/Cmd + I or F12) settings (cog icon in bottom-right of window) now provides a helpful “Override device metrics” option to resize the viewing window and set font scaling.

You will also notice the “Emulate touch events” option. All very useful for mobile developers.

New Chrome Pages

Several internal pages have been added to the browser:

• chrome://inspect/ — lists running extensions and opened tabs with links to the Web Inspector.
• chrome://omnibox/ — displays results for a specific Omnibox search term. This is primarily of interest to Chrome developers although I suspect it could be used by SEO specialists.
• chrome://policy/ — used to apply group policies in large companies. The feature does not appear to be fully implemented yet.

While Chrome 20 is hardly revolutionary, it remains the world’s most-used browser. Chrome 21 is expected to appear in mid-August 2012.