Add a section to the Rules autocomplete popup that shows the format of CSS shorthand values (or for any property that has multiple value parts).
This could start as an informative feature, but it could get more interactive - e.g. inlining the autocomplete so that after you type border: it puts in 1px solid black with 1px highlighted, ready to be edited. Press space or tab to go to solid.
MDN has structured data on all css values which we could use this to guide the autocomplete.
Chrome currently does this for CSS functions such as filter: values.
See Google spreadsheet formula which shows value order
Xcode, VScode may do something similar
Atom does inline documentation at the bottom of their autocomplete popup with link to MDN, as well as fuzzy matching
Extra info from @oslego:
A smart default that can be atomically edited will also help with prefilling basic CSS Shapes, for example polygon() -> polygon(0 0, 0 100% 100% 100%, 100% 0) (bug filed).
To achieve this, we need to make changes to InlineEditor.js so it supports the concept of “parts” for a value and then hook up a dictionary mapping value parts for properties. (We’ll also have to reconcile events for when a user may want to fully replace the value, not individual parts) Not trivial, but definitely worthwhile investing the effort. To my knowledge, no other DevTools have this feature (navigate by value parts), but it is an indispensable feature in great code editors. The Emmet extension for code editors popularized this for CSS (AFAIK)
Add a section to the Rules autocomplete popup that shows the format of CSS shorthand values (or for any property that has multiple value parts).
This could start as an informative feature, but it could get more interactive - e.g. inlining the autocomplete so that after you type
border:it puts in1px solid blackwith 1px highlighted, ready to be edited. Press space or tab to go tosolid.MDN has structured data on all css values which we could use this to guide the autocomplete.
filter:values.Extra info from @oslego:
A smart default that can be atomically edited will also help with prefilling basic CSS Shapes, for example polygon() -> polygon(0 0, 0 100% 100% 100%, 100% 0) (bug filed).
To achieve this, we need to make changes to InlineEditor.js so it supports the concept of “parts” for a value and then hook up a dictionary mapping value parts for properties. (We’ll also have to reconcile events for when a user may want to fully replace the value, not individual parts) Not trivial, but definitely worthwhile investing the effort. To my knowledge, no other DevTools have this feature (navigate by value parts), but it is an indispensable feature in great code editors. The Emmet extension for code editors popularized this for CSS (AFAIK)