2

I am using recess (https://github.com/twitter/recess) to compress the CSS file

div {
    color: red
    border: 1px solid red
}

p {
    color: blue
}

# recess test.css --compress (No output)

As you can see, there is missing colon in the CSS file so recess failed to output anything, but in a real browser it is perfactly ok if only part of the CSS contains error

e.g. http://jsfiddle.net/VDQLU/ (see the bule color in p, not affecting by error above)

Q. Are there any way to compress the file anyway with recess? Or using other tool?

Pavlo
  • 43,301
  • 14
  • 77
  • 113
Ryan
  • 10,041
  • 27
  • 91
  • 156

3 Answers3

5

The reason recess fails, is because that is invalid css. (You probably know that). And the reason it works anyway on the browser you use, is because browsers assume some web developers just wont use correct syntax and also they want to be compatible with legacy websites, not because the semicolons are optional on css, or because css parsers are supposed to have a quirks mode!.

I would use a sed line to clean the css file, and from now on, use correct css code. Here is an example sed line: (backup your css file first!)

sed -i '/{/,/}/ { /[}{]/ !{ /\/\*.*[^(\*\/\t )][\t ]*$/,/\*\// !{ s/\([^(\*\/);\t ]\)[\t ]*$/\1;/ }}}' yourcssfile.css

This sed line will:

  • Add ;, only to the lines that end without semicolons; that is, if you do have some lines that end with semicolons, you wont end with two semicolons one after another (like ;;)
  • Check also for commented lines, be on one line like: /* some comment */, or multiple lines.

That does NOT mean the change is automagically done flawlessly; you would probably have to do some manual fixing (and perhaps manual hacking the sed line), but if your css file looks like your example, it should work almost perfect.

chris-l
  • 2,802
  • 1
  • 18
  • 18
2

Any sort of CSS compression will remove line breaks from your CSS.

Though a browser may understand your code now, without line breaks to help it process the incorrect code, it would just have a single string.

Any compressor that did compress that code wouldn't be doing you any favours as it almost certainly wouldn't be understood by any browser once the line breaks were removed.

Matt McDonald
  • 4,791
  • 2
  • 34
  • 55
-1

Please use the div style like this. div {color: red;border:solid red;}

its a good solution for your result.

Frank Lawson
  • 1