0

I have a large css file and i want to convert all 6 digit hex code into shorthand 3 digit. Is there any online or offline tool to do so.

my purpose is to reduce css file size without making something wrong.

any other tips would be be appreciated to reduce css file size without affecting css output.

Edit:

As me_and suggested css drive compressor does the work alt text http://easycaptures.com/fs/uploaded/443/7187499702.png

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 8
    If you have CSS file size problems that you feel you need to address by chopping 3 bytes off some 6 byte color definitions, then my gut feeling is that you're attacking the wrong part of your problem. – Carl Smotricz Dec 09 '09 at 19:18
  • Take a look at: http://stackoverflow.com/questions/787789/any-recommendations-for-a-css-minifier http://stackoverflow.com/questions/1633508/css-minimizer – mlsteeves Dec 09 '09 at 19:18

3 Answers3

1

If have access to a server side scripting language or your editor handles regular expressions, here's a regex replace to do the job:

PHP

preg_replace('/#([\dA-Fa-f])[\dA-Fa-f]([\dA-Fa-f])[\dA-Fa-f]([\dA-Fa-f])[\dA-Fa-f]/m', '#$1$2$3', $str);

JavaScript

var str = '#fd02eb';
str = str.replace(/#([\dA-Fa-f])[\dA-Fa-f]([\dA-Fa-f])[\dA-Fa-f]([\dA-Fa-f])[\dA-Fa-f]/g, '#$1$2$3');
Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
1

By my understanding, you'll most likely lose colour information by converting it from 6-digit to 3-digit, so you'll need to specify what conversion you want. Examples would be good.

Nonetheless, CSS Drive will do code compression for you. Or just try Google for "CSS compression" :)

me_and
  • 15,158
  • 7
  • 59
  • 96
  • Indeed, compressing bring the available color space from 16M colors to just 4096. – Agos Dec 09 '09 at 19:23
  • Unless the second digit is equal to the first in every case :) This would be the only case in which the actual color displayed would not change. – Carl Smotricz Dec 09 '09 at 19:32
  • I use Clean CSS (http://www.cleancss.com/) it has more options and validates your CSS as well. – Mottie Dec 09 '09 at 20:09
1

If I really wanted to do this, I'd fire up vim and edit the file in that.

A command which will do roughly this would be:

:%s/\v#(\x)\x(\x)\x(\x)\x;/#\1\2\3;/g

Which

  • puts vim into line command mode;
  • starts a substitution;
  • puts vim into "very magic" mode with regard to special characters;
  • finds instances of 6 hex digits enclosed by # and ;
  • removes every second digit;
  • throughout every line.
Carl Smotricz
  • 66,391
  • 18
  • 125
  • 167