Chrome DevTools: 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, 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:

• filter: op -> filter: opacity(0.5)
• filter: b -> filter: blur(1px)
• transform: sc -> transform: scale(1.5)
• transform: ma -> transform: matrix(1, 0, 0, 1, 0, 0)
• transform: scale3 -> transform: scale3d(1.5, 1.5, 1.5)
• background-image: rep -> 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 opacity(0.5)
• The Right arrow key to modify the preset value, and move the cursor to the function arguments, such as the 0.5 segment within the value opacity(0.5)