Quick unit adjustement: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(Created page with "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 Edi...")
 
No edit summary
 
Line 1: Line 1:
CSSEditor feature
CSSEditor feature  


A frequent use case when authoring CSS is to adjust a value by few units up or down.
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.  
We should enable quicker and RSI-friendly unit adjustements in our CSS Editor.


<br> Example scenario&nbsp;:


Example scenario :
font-size: 0.9em; (hmm a bit too small) =&gt; font-size: 1.1em; (hmm a bit too large) =&gt; font-size 1.0em; (perfect!)


font-size: 0.9em; (hmm a bit too small)
<br> Actions to perform on most/other CSS editor(s)&nbsp;:
=> font-size: 1.1em; (hmm a bit too large)
=> font-size 1.0em; (perfect!)


#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 most/other CSS editor(s) :
1) move caret exactly right before "em"
2) press delete
3) press delete
4) press delete
5) press 1
6) press .
7) press 1 (hmm a bit too large)
8) press delete
9) press 0 (perfect!)




Actions to perform on Firefox 6 CSS editor :
Actions to perform on new Firefox CSS editor&nbsp;:
1) have caret anywhere within font-size property
2) Control-Up [1.0em]
3) Control-Up [1.1em] (hmm a little too large)
4) Control-Down [1.0em] (perfect!)


#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]).


Ex. margin-top: 8px; => margin-top: 10px;
<br> 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).
Ex. border-color: #444 => border-color: #222
 
 
 
This feature should work with any property for any numerical value (em, px, pt, #hex [lighter/darker]).  
 
Example :
 
margin-top: 8px; =&gt; margin-top: 10px;
 
border-color: #444 =&gt; border-color: #222

Latest revision as of 04:46, 5 May 2011

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) :

  1. move caret exactly right before "em"
  2. press delete
  3. press delete
  4. press delete
  5. press "1"
  6. press "."
  7. press "1" (hmm a bit too large)
  8. press delete
  9. press 0 (perfect!)


Actions to perform on new Firefox CSS editor :

  1. have caret anywhere within the value itself OR within all font-size property.
  2. Control-Up [1.0em]
  3. Control-Up [1.1em] (hmm a little too large)
  4. 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

Retrieved from "https://wiki.mozilla.org/index.php?title=Quick_unit_adjustement&oldid=305732"