What’s New in Chrome 20

Contributing Editor

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.

Web Inspector Override device metrics setting

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Dzre
  • Cobey

    I’m not seeing the mobile development tools on Version 20.0.1132.47 for OS X. The settings tab in the inspector looks the same. Is there something extra that we need to do to enable it, or is this development just for Chrome for Windows?

    • Cobey

      nevermind, saw that you needed to enable the check box first! I was looking for the number inputs and all that, but the control needs to be expanded to enable those.

  • http://twitter.com/gianpaj Gianfranco

    Great stuff, but not sure the datalist as a good UX element.
    is it possible to force the selection to on the the options in the datalist?

    Or how would you prevent users misspelling on a datalist?

  • Subhendu Mishra

    The last link in your related posts section is going out of the outer box.Doesn’t look good for professionals who post stuff web designing.please fix it..:P

  • http://bibidho.com Nash

    HI
    Thank you for this great article, but I not understanding the use of chrome://omnibox/
    Will you write in near future about this?

    Thanks!

  • Fettabachi

    Slightly off topic but for a great development tool for mobile you can’t beat Adobe Shadow. It allows you to mirror your desktop browser (Chrome of course) url on your mobile device. very handy indeed!

  • http://infigadgets.com Tushar Agarwal

    I am facing crashing issues with Chrome 20. Uninstalled it for the time being.