CSS

Code Layout

Compression

• Highest

  c0

  h1{color:red;}h2{color:black;}

• High

  c1

  h1{color:red;}
  h2{color:black;}

• Standard

  c2

  h1 {
  color:red;
  }
  
  h2 {
  color:black;
  }

• Low

  c3

  h1
  {
  	color:red;
  }
  
  h2
  {
  	color:black;
  }

• Custom

  c4

  Use custom template

Custom template

• Text

  *Do not include '-' character

  ct

  Example:
  
  <span class="at">|</span> <span class="format">{</span>
  |<span class="selector">|</span> <span class="format">{</span>
  |<span class="property">|</span><span class="value">|</span><span class="format">;</span>
  |<span class="format">}</span>|
  
  |
  <span class="format">}</span>
  
  ||<span class="comment">|</span>
  |
  |

Options

Preserve CSS

• Yes

  pc

  /* color */
  h1 {
  color:red;
  }

• No

  h1 {
  color:red;
  }

Sort selectors(caution)

• Yes

  ss

  h2{color:black;}
  h1{color:red;}
  ==>
  h1{color:red;}
  h2{color:black;}

• No

  h2{color:black;}
  h1{color:red;}
  ==>
  h2{color:black;}
  h1{color:red;}

Sort properties

• Yes

  sp

  h1{font-size:14px;color:red;}
  ==>
  h1{color:red;font-size:14px;}

• No

  h1{font-size:14px;color:red;}
  ==>
  h1{font-size:14px;color:red;}

Remove last ;

• Yes

  rl

  h1{color:red}

• No

  h1{color:red;}

Remove unnecessary backslashes

• Yes

  rub

  h1{color:blue;}

• No

  h1{color:red;c\olor:blue;}

Discard invalid properties

• Yes

  dip

  h1{color:red;}

• No

  h1{color:red;font-size-adjust:.58;}

CSS level

• CSS2.1

  cl0

• CSS2.0

  cl1

• CSS1.0

  cl2

Silent

• Yes

  s

  No errors are shown

• No

  Errors are shown

Optimise shorthands

• Don't optimise

  os0

  h1{margin-top:10px;margin-right:20px;margin-bottom:10px;margin-left:20px;}

• Safe optimisations

  os1

  h1{margin:10px 20px;}

• All optimisations

  os2

  h1{margin:10px 20px;}

Compress colors

• Yes

  cc

  h1{color:red;}

• No

  h1{color:#ff0000;}

Compress font weight

• Yes

  cf

  h1{font-weight:700;}

• No

  h1{font-weight:bold;}

Lowercase selectors

• Yes

  ls

  h1{color:red;}

• No

  H1{color:red;}

Add timestamp

• Yes

  at

  /* CSSTidy 1.3: Sun Sep 02 17:16:30 2012 */
  h1{color:red;}

• No

  h1{color:red;}

Case for properties

• None

  cfp0

  h1{COLor:red;}

• Lowercase

  cfp1

  h1{color:red;}

• Uppercase

  cfp2

  h1{COLOR:red;}

Regroup selectors

• Do not change

  rs0

  h1{color:red;}
  h2{color:red;}
  ==>
  h1{color:red;}
  h2{color:red;}

• Split at ,

  rs1

  h1,h2{color:red;}
  ==>
  h1{color:red;}
  h2{color:red;}

• Merge same

  rs2

  h1{color:red;}
  h2{color:red;}
  ==>
  h1,h2{color:red;}