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:
0.5segment within the value
This feature is currently in Chrome Canary and will make it to Chrome stable soon.