/dev tips

(195) Updated Paint Markers Clear Site Data (197)

Chrome DevTools: Better CSS presets for quick prototyping

1st April 2019
Better CSS presets for quick prototyping
We're getting closer to tip 200! Thank you for all your feedback

In the past, DevTools would not provide meaningful autosuggest values for certain property values, such as those values which used CSS functions. Now, in Canary, typing in lin for the background-image property autosuggests:

linear-gradient(45deg, #000, #0000)

Notice that these values are prepopulated in such a way where you can see the visual result on the page immediately. This means you do not have to research the linear-gradient() CSS function signature while prototyping.

Here are other autosuggest examples:

To utilise these preset autocompletions, you can use:

This feature is currently in Chrome Canary and will make it to Chrome stable soon.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.