Chrome DevTools: Better CSS presets for quick prototyping1st April 2019
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:
transform: matrix(1, 0, 0, 1, 0, 0)
transform: scale3d(1.5, 1.5, 1.5)
background-image: repeating-linear-gradient(45deg, #000, #0000 100px)
To utilise these preset autocompletions, you can use:
- The Tab key to apply the preset value, including its function arguments such as
- The Right arrow key to modify the preset value, and move the cursor to the function arguments, such as the
0.5segment within the value
This feature is currently in Chrome Canary and will make it to Chrome stable soon.