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

Réglage pour que les colonnes suivent toujours le bord du tableau

Il arrive parfois que l'on veuille que les champs ( = field) d'un objet ListGrid prennent toujours toutes la largeur de son contenant et par là éviter un vide inutile à droite.

Ma solution c'est de donner une largeur de 100%, relative donc, à chaque colonne et de donner une largeur fixe à au moins une de ces colonnes. Si le tableau ne comporte qu'une colonne alors field.setWith("100%") suffira.



Inconvénient avec cette solution : il arrive parfois que certaines colonnes générées "automatiquement" par SmartGWT ne soient pas taillable. Je rencontre ce problème notamment sur la colonne de bouton de suppression d'enregistrement. Il est dans la plupart des cas impossible de lui donner une taille malgré le fait que l'on puisse récupérer son nom.

J'ai demandé de l'aide un peu partout sur la toile sans résultat acceptable jusqu'aujourd'hui.
Je vais mettre ici les références de mes demandes d'aide... si vous vous sentez d'y répondre de manière constructive n'hésitez plus !

• Sur StackOverFlow
• ListGrid doesn't want to set the width of the delete-button column (solution)
• ListGrid column auto fit layout
• Sur Isomorphic Forum, le forum de l'éditeur de SmartGWT
• ListGrid doesn't want to set the width of the delete-button column (solution)
• ListGrid doesn't want to set the width of the delete-button column (solution)
• Sur le forum GWT de www.developpez.net
• Problème pour tailler les colonnes d'un ListGrid (solution)

Concernant le bouton de suppression des enregistrements, la solution se trouve finalement ici.

Bords et bordures

Après avoir un peu galérer j'ai enfin trouvé le moyen de supprimer le bord d'un composant. Je dis le bord et non la bordure... vous comprendrez en lisant la suite...

A savoir :

anglais	français
edge	bord
border	bordure

A savoir donc que l'on parle de "bordure" (en anglais "border") pour ce qui est en bleu et vert dans cette image et que l'on parle de "bord" (en anglais "edge") pour la partie grise entre les deux bordures.

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

    }

  });

});

Test SyntaxHighlighter

http://alexgorbatchev.com/SyntaxHighlighter/

/** * SyntaxHighlighter */

function foo() {

  if (counter <= 10) return;

 // it works!

}

GWT abandonné par Google

C'est con ! Je commence sur GWT, Google Web Toolkit, et le projet va bientôt être abandonné par Google !
Comment est-ce qu'il va être nommé maintenant ? ! Anonymous Web Toolkit, ... ? !
En tout cas, j'espère que le projet sera bien alimenté par la communauté Open Source.

jQuery latest

http://code.jquery.com/jquery-latest.js

Faut absolument que je retienne cette adresse... je suis tout le temps en train d'essayer de m'en souvenir.

Commentaires conditionnels pour IE et les autres navigateurs

http://www.unintentionallyblank.co.uk/2006/09/19/if-internet-explorer-then-do-something-else-a-how-to/

Voilà, ici est expliqué que l'on peut produire du code HTML visible pour IE et invisible pour les autres et inversement.


  <!--[If IE]>
    <select id="liste_valeurs">
  <![endif]-->
  <!--[if !IE]>-->
  <datalist id="liste_valeurs">
    <!--<![endif]-->

    <option label="suggestion 1" value="suggestion 1" />

    <option label="suggestion 1" value="suggestion 1" />

    <!--[if !IE]>-->

  </datalist>

  <!--<![endif]-->

  <!--[If IE]> 

    </select>

  <![endif]-->

Test connexion avec Google +

Test connexion avec Google +