CSS : supprimer les caractères inutiles pour le code couleur

Quand on crée une feuille de style ou qu'on met un peu de style en ligne, on peut alléger le poids de ces feuilles en mettant le moins de caractères possible dans ces fichiers.
On peut bien sûr passer par un compresseur de CSS, qui supprimera les espaces et les sauts de ligne, notamment.
On peut aussi faire un petit truc "à la main" : passer par la forme courte des codes couleur... quand cela est possible.
Soit comme moi, vous récupérez des CSS d'un projet déjà bien avancé... il faudrait passer tous les codes couleurs à la forme courte quand c'est possible.

Un exemple : passer de #ffffff à #fff

Dans votre éditeur de texte favori, Notepad++ pour moi, ouvrir la petite fenêtre qui permet de remplacer des caractères, passer en mode Expression régulière, rechercher #(.)\1\1\1\1\1 et remplacer par #\1\1\1

Comme dans l'exemple ci-dessous :

Outils pour partager du code en ligne

Il y a pleins d'outils apparemment pour faire cela mais je me suis arrêté sur celui-là :
http://jsfiddle.net/ : permet de partager du code HTML, CSS, JavaScript

Bordures dynamiques que l'on peut retailler

 http://jsfiddle.net/lnplnp/MxKLH/

HTML

<div id="container">

  <div id="panel1" class="panel" >

    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.

  </div>

  <div id="panel2" class="panel" >

    some more text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.

  </div>

  <div id="panel3" class="panel" >

    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.

  </div>

  <div id="panel4" class="panel" >

    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.

  </div>

  <div class="clear"></div>

</div>

CSS

.clear{

  clear:both;

}

#container{

  border: 1px red solid;

  margin: 0 auto;

  width: 900px;

}

.panel{

  background-color: #9999FF;

  float: left;

  height: 200px;

  padding: 2.5px;

}

#panel1{

  background-color: #FF0000;

}

JS

$(document).ready(function() {

  // init

  var containerWidth = $("#container").width();

  var nbpanels = $(".panel").size();

  var padding = 2.5;

 

  $(".panel").width( (containerWidth / nbpanels) - (nbpanels * padding - 2 * padding));

  $(".panel").resizable({

    handles: 'e',

    maxWidth: 450,

    minWidth: 120,

    resize: function(event, ui){

      var currentWidth = ui.size.width;

      // set the content panel width

      $(".panel").width( ( (containerWidth - currentWidth + padding ) / (nbpanels - 1) ) - ((nbpanels - 1) * padding) );

      $(this).width(currentWidth);

    }

  });

});

Batman CSS