Quick unit adjustement
CSSEditor feature
A frequent use case when authoring CSS is to adjust a value by few units up or down. We should enable quicker and RSI-friendly unit adjustements in our CSS Editor.
Example scenario :
font-size: 0.9em; (hmm a bit too small) => font-size: 1.1em; (hmm a bit too large) => font-size 1.0em; (perfect!)
Actions to perform on most/other CSS editor(s) :
- move caret exactly right before "em"
- press delete
- press delete
- press delete
- press "1"
- press "."
- press "1" (hmm a bit too large)
- press delete
- press 0 (perfect!)
Actions to perform on new Firefox CSS editor :
- have caret anywhere within the value itself OR within all font-size property.
- Control-Up [1.0em]
- Control-Up [1.1em] (hmm a little too large)
- Control-Down [1.0em] (perfect!)
This allows the user to perform the same frequent operation with less than half the number of key strokes and more natural live refresh between changes. It is also possible to operate mostly with the mouse wheel (+ Ctrl key).
This feature should work with any property for any numerical value (em, px, pt, #hex [lighter/darker]).
Example :
margin-top: 8px; => margin-top: 10px;
border-color: #444 => border-color: #222
