Chrome Dev Tools: CSS Auto-Complete
less than 1 minute read
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.
One of the great features of editing CSS is the auto-complete that allows you to quickly add style elements.
|Chrome filters the properties based on the text you enter|
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.
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 :-)
|Hitting 'ctrl+space' provides a full list of static values|
A vast array of other features are available in the tools. Full guidance on how to use them is available here
Leave a Comment
Your email address will not be published. Required fields are marked *