Chrome Dev Tools: CSS Auto-Complete

The Chrome Dev tools provide a lot of functionality to you as a developer when making changes to scripts, CSS, HTML or testing out the performance of a page.

Chrome filters the properties based on the text you enter

One of the great features of editing CSS is the auto-complete that allows you to quickly add style elements.

Begin typing and Chrome will provide a list of matching CSS properties, use the arrow keys to select an item, hit tab and you'll then be able to set the value.

When setting a value hit ctrl+space and you'll get a list of values appropriate for the property.

Hitting 'ctrl+space' provides a full list of static values

The final icing on the cake; if you enter a value such as 22px you can then use the up and down arrow keys to change the value.  This is ideal when attempting to position of scale elements on the page as all CSS changes are applied in real-time :-)

A vast array of other features are available in the tools.  Full guidance on how to use them is available here