Il s’agit du cas où les options d’une liste à choix multiples d’un formulaire, sont trop longues pour rentrer dans la taille de cet élément select lorsqu’on a fixé sa taille en CSS. Dans un navigateur moderne, quand on visualise les choix disponibles, la taille de la liste est adaptée (la taille de l’élément parent select n’est pas modifiée). Dans ce cher IE, la liste garde la même taille que le select et on ne voit donc pas la totalité des options, n’ayant que les n premiers caractères affichés.

Les images valant mieux qu’un long discours, en voici deux pour illustrent ce problème. Ici, j’ai fixé la largeur à 300px :

Avec Firefox, Safari, Chrome, Opéra… :

Avec Internet Explorer toutes versions confondues :

Comme on peut le voir, avec IE, si les contenus des options sont long, ils sont tronqués, ce qui n’est pas très pratique.
Pour corriger ce problème un petit javascript qui ne sera executé que sous Internet Explorer.
Le principe est le suivant : On recherche tous les champs select (on peut être plus précis sur le sélecteur si besoin). On passe la largeur en auto le temps de récupérer la largeur nécessaire pour un affichage correct. Lors de l’ouverture de la liste, on applique cette largeur.
Pour ne pas modifier la mise en page, j’ai choisi de passer la liste en positionnement absolu lorsque sa taille est modifiée. C’est un choix qui pourrait avoir des conséquence sur votre mise en page. A vous de modifier ou de proposer une meilleure solution.

P.S : C’est à base de Mootools, mais adaptable à d’autres frameworks si besoin.

if(Browser.Engine.trident){
function adjustWidth(el,m){
el.setStyle('width',m+'px');
el.setStyle('position','absolute');
}
function reinitWidth(el,s,p){
el.setStyle('width',s);
el.setStyle('position',p);
}
$$('form select').each(function(cb){
var initsize = cb.getStyle('width'),initposition = cb.getStyle('position'),maxsize = 0;
cb.setStyle('width','auto');
maxsize=cb.offsetWidth;
cb.setStyle('width',initsize);
if (maxsize > initsize.substring(0,initsize.length-2)) {
cb.addEvent('mousedown',function(e){adjustWidth(cb,maxsize);});
window.document.addEvent('click', function(e) {if(e.target != cb) reinitWidth(cb,initsize,initposition);});
cb.addEvent('change',function(e){reinitWidth(cb,initsize,initposition);});
}
});
}

J’ai donc cherché un script simple à mettre en place et très modulable et comme je n’ai pas trouvé quelque chose qui correspondait exactement à mes besoins, j’ai décidé de créer mon propre script.

Avant tout, je suis contient que le fait de devoir créer des éléments supplémentaires juste pour satisfaire un besoin de mise en page est une technique à proscrire car cela n’a aucun sens. Tout devrait pouvoir se faire directement dans le CSS. Oui mais voilà, le CSS 3 et sa gestion native des bords arrondis (-moz-border-radius et -webkit-border-radius pour Firefox et Safari) est loin d’être implanté sur tous les navigateurs et nous sommes, malheureusement, dans l’obligation de ruser.

Ce que je voulais :

• Les balises ne servant qu’à la mise en page et n’ayant aucune portée sémantique sont générées en javascript.
• Un javascript non obstrusif, une mise en page non dégadée si le javascipt n’est pas activé / installé. Dans ce cas là, les coins restent simplement droits.
• Utilisation des images pour les coins pour un meilleur rendu et une plus grande modularité.
• Un script léger, syntaxe de l’appel simple mais paramétrable.
• Entièrement personnalisable via CSS.
• Conserve le DOM et génère du XHTML et du CSS valide.
• Rapide !

Pour commencer, voici une démo du script en action et une deuxième avec un bouton pour lancer le script.

Le script s’appuie sur le framework Javascript Mootools.

Documentation

class corners

Arguments

element : L’élément sur lequel vous voulez les coins arrondis
options : un objet, voir ci-dessous

Options

elementType : Le type des élément générés (défaut: div)
className : préfixe des classes des élément générés (défaut: corner)

Utilisation

L’élément modifié va être entouré par huit éléments permettant d’appliquer des styles CSS spécifiques sur chacun d’entre eux et correspondent aux cotés et aux coins répartis comme ceci (avec le préfixe par défaut, « corner ») :

• cornerT : Le bord supérieur
• cornerB : Le bord inférieur
• cornerR : Le bord droit
• cornerL : Le bord gauche
• cornerBL : Le coin inférieur gauche
• cornerBR : Le coin inférieur droit
• cornerTL : Le coin supérieur gauche
• cornerTR : Le coin supérieur droit

Ainsi, il ne reste plus qu’à appliquer les règles CSS adéquates pour ajouter les éléments de décoration voulus (coins arrondis, ombres, etc…)

Deux versions du script :

• non compressé (4143 octets)
• compressé avec YUI Compressor (1615 octets)

Allez plus loin

Je suis conscient que ce script peut alourdir les pages et donc ralentir leur chargement alors que l’on pourrait directement écrire ces balises dans la page sans passer par javascript. Mais ce sont les limitations de CSS 2 et les multiples incompatibilités des navigateurs qui nous forcent à insérer des balises inutiles et n’ayant aucun sens sémantiquement parlant. Ce javascript, ne touche pas à la structure du document et offre un rendu quasi similaire lorsqu’il est non activé.

En résumé, je ne suis pas entièrement convaincu de la pertinence et de l’utilité de ce script en terme de performance et d’optimisation mais son utilisation simple et efficace me semble toutefois interessante. On pourrait même trouver des applications diverses autres que les coins arrondis comme par exemple les ombres, dégradés complexes etc…

Garder un fichier lisible est, selon moi, indispensable pour maintenir son application à jour, la modifier, la corriger et cela d’autant plus lorsqu’on travaille en équipe.

Une des solutions est de garder une version non compressée mais cela sous-entend de jongler sans cesse entre plusieurs versions, ce qui n’est définitivement pas pratique.

Combine

La solution qui me semble la plus intéressante est la classe PHP Combine, simple à utiliser, fiable, gérant la combinaison, la compression, la mise en cache et les dates d’expiration.

Tout d’abord, Combine concatène tous vos fichiers javascript et/ou css et les sert comme un gros fichier. Cela dans le but de réduire le nombre de requêtes au serveur.

Il gère également la compression en détectant si votre navigateur supporte la compression gzip, si oui, il gzip les données et renvoie la version compressée. En général, ceci permet de réduire considérablement la taille du fichier.

Si vous avez créé un répertoire cache, il va stocker la version gzip générée de vos données. Ainsi pour les futures demandes, il récupére simplement la version mise en cache zippé au lieu de générer le contenu de l’archive gzip à la volée. Ceci permet de réduire la charge du serveur.

Enfin, il vérifie les changements effectués. En effet, la date, l’heure et la taille du fichier mis en cache est rapidement vérifiée et, si il y a un changement, il sera automatiquement régénéré. Il gère donc parfaitement les en-têtes ce qui permet de mettre ces fichiers à jour et d’être certain que chacun des visiteurs du site se verra servir la même version du fichier.

Mise en place

L’utilisation est très simple.

Vous devez d’abord télécharger et configurer le script combine.php.

Par défaut, ce script regarde dans les répertoires racines javascript et css de votre site Web, mais si vous utilisez des répertoires différents, vous pouvez changer ces valeurs en haut de combine.php.
Transférer le fichier combine.php à la racine de votre site Web.

Deuxièmement, vous devez créer un répertoire « cache » accessible en écriture. Encore une fois, par défaut, ce script va chercher dans le répertoire racine du site Web, mais vous pouvez modifier cette valeur dans combine.php.

Enfin, il vous faut créer ou modifier un fichier .htaccess. Si vous n’avez pas de .htaccess vous pouvez le créer à la racine de votre site Web et ajouter les lignes suivantes.
Si vous avez déjà un .htaccess vous pouvez simplement ajouter les lignes suivantes dans le fichier :

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^js/(.*\.js) /combine.php?type=javascript&files=$1

Pour finir, dans vos pages remplacez tous vos appels javascript de la forme :

<script src="js/mootools-1.2-core.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>

par :

<script src="js/mootools-1.2-core.js,mootools-1.2-more.js" type="text/javascript"></script>

Idem pour le css, remplacer :

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="screen" />

par :

<link href="css/reset.css,layout.css" rel="stylesheet" type="text/css" media="screen" />

Et voilà ! Plutôt simple et terriblement efficace.
Par contre, un petit désavantage, si vous avez l’habitude d’utiliser Firebug pour débugger, forcement, le numéro de ligne indiqué pour les propriétés css, par exemple, ne correspond à rien dans votre fichier local, puisque tous les fichiers css sont combinés.
Je pense que l’installation de cette solution doit donc intervenir en fin de production, juste avant livraison.

Autres solutions

Il existe une autre classe qui semble assez similaire, Minify!, elle permet en plus de la gestion du cache et de la compression, de supprimer les espaces blancs et les commentaires.

Si vous avez plus d’infos sur Minify ou sur d’autres solutions, n’hésitez pas !

Un bouton permettant de modifier la taille du texte d’une page semble à première vue sans intérêt car il s’agit d’une fonctionnalité classique de tous les navigateurs

De plus, comment une personne ayant un handicap visuel, et qui pourrait donc trouver ce bouton utile, peut elle localiser facilement celui-ci ? Sans compter, que ces personnes naviguent tout le temps avec un affichage adapté à leur handicap et qu’il n’attendent pas que les sites proposent de tels gadgets mais que , par exemple, toutes les tailles de polices soient exprimées de façon relative, en « em ».

Voilà mon avis, mais toujours est-il que des clients peuvent (malgré nos recommandations) trouver cette fonction « intéressante » et demande à ce qu’elle soit intégré au site.

Choix de la technique

Deux solutions à ma connaissance :

• Créer des feuilles de styles avec différentes tailles de polices (feuilles de style alternatives)
• Spécifier des tailles de polices relatives et modifier uniquement celle du conteneur

Ces deux solutions utilisent Javascript et CSS et on peut envisager d’ajouter la « sauvegarde » du choix de la taille avec les Cookies.

J’ai choisi la deuxième solution qui me semble plus souple car aucune feuille de style supplémentaire ne sera créée.

Par contre si Javascript n’est pas activé, il ne se passe rien. SI les cookies sont désactivés on perd la taille choisie. Ces deux points ne me semble pas bloquants, ces deux boutons n’étant que des doublons des fonctionnalité du navigateur.

Les unités relatives

Si toutes vos unités sont fixes et que vous débutez avec les unités relatives en « em », je vous conseille cet aticle : Définir des tailles de police dynamiques cohérentes avec CSS.

Le code

Code javascript :

function fontSize(action) {
  var nb = .1;
  var conteneur = 'article';
  if (action=='+') {
	if (eval(document.getElementById(conteneur).style.fontSize.substring(0,document.getElementById(conteneur).style.fontSize.lastIndexOf('em')))<2) {
    document.getElementById(conteneur).style.fontSize = eval(document.getElementById(conteneur).style.fontSize.substring(0,document.getElementById(conteneur).style.fontSize.lastIndexOf('em'))) + nb + 'em';
    }
  } else if (eval(document.getElementById(conteneur).style.fontSize.substring(0,document.getElementById(conteneur).style.fontSize.lastIndexOf('em')))>1) {
    document.getElementById(conteneur).style.fontSize = eval(document.getElementById(conteneur).style.fontSize.substring(0,document.getElementById(conteneur).style.fontSize.lastIndexOf('em'))) - nb + 'em';
  }
  EcrireCookie("fontsize",eval(document.getElementById(conteneur).style.fontSize.substring(0,document.getElementById(conteneur).style.fontSize.lastIndexOf('em'))));
}
function EcrireCookie(nom, valeur) {
  var argv=EcrireCookie.arguments;
  var argc=EcrireCookie.arguments.length;
  var expires=(argc > 2) ? argv[2] : null;
  var path=(argc > 3) ? argv[3] : null;
  var domain=(argc > 4) ? argv[4] : null;
  var secure=(argc > 5) ? argv[5] : false;
  document.cookie=nom+"="+escape(valeur)+
  ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+
  ((path==null) ? "" : ("; path="+path))+
  ((domain==null) ? "" : ("; domain="+domain))+
  ((secure==true) ? "; secure" : "");
}

Il y a deux variables modifiables dans cette fonction :
- L’identifiant du conteneur : conteneur
c’est la taille de police de cet élément qui va être modifié, ces éléments enfants étant exprimé en « em », ils le seront aussi.
- le nombre nb de « em » à ajouter ou diminuer à chaque clic.

Code html :

<a title="Augmenter la taille du texte" onclick="fontSize('+');return false;" href="#">Abc +</a>
<a title="Diminuer la taille du texte" onclick="fontSize('-');return false;" href="#">abc -</a>

J’ai limité la taille maximum à 2em et la taille minimum à 1em.