Comme dans beaucoup d'agences nous utilisons quotidiennement un outils en ligne pour saisir les temps passés sur les différents projets. Classiquement on retrouve des listes déroulantes (<select />) pour choisir un premier périmètre projet puis un projet et enfin un sous projet. En ce qui me concerne les libellés sont trop longs et la taille des <select /> étant fixée avec des styles en ligne, on ne voit pas les libellés sans passer la souris dessus. Je me suis donc penché sur la question des feuilles de styles utilisateurs afin de forcer l'augmentation de la largeur de ces menus.
Il y a une fonctionnalité d'Internet Explorer qui permet de spécifier une feuille en 3 clics et qui pourrait donc convenir aux usagers non avertis et qui ne nécessite donc pas d'installation de plug-in ou d'édition de configuration. Merci de bien comprendre que le but de cet article est de répondre à une besoin large d'utilisateurs dans un contexte global ou Internet Explorer est utilisé par un public nombreux et pas forcément rôdé aux bons navigateurs.
Au niveau de la feuille de styles, cela donne le code simple suivant :
#identifiant {width: 300px !important;}
"!important" permet d'augmenter le poids de la règle et donc de surpasser les styles en ligne.
Attention toutefois, l'application d'une feuille de style utilisateur s'applique à tous les sites que vous visitez ce qui peut provoquer des effets de bords importants sur des identifiants courants comme "#menu" ou "#nav" par exemple.
J'ai placé une page de démonstration ici : http://adrien.leygues.free.fr/test/10pxText.htm qui donne le résultat suivant :
Si je veux appliquer une feuille locale que vous pouvez télécharger à cet url : http://adrien.leygues.free.fr/test/feuille.css , il n'est actuellement pas possible d'indiquer un URL comme source du fichier.
Je passe par le menu "Outil" puis je clique sur le bouton "Accessibilité" en bas à droite :
qui ouvre le panneau suivant :
dans lequel je spécifie le chemin vers la feuille à appliquer, ici "d:\feuille.css".
Une fois la feuille chargée, j'obtiens le résultat suivant dans lequel le texte est bien passé de 10px à 20px :
En ce qui concerne Firefox, vous pouvez passer par la WebDeveloper Toolbar via le menu "CSS" > "Ajouter une feuille de style personnalisée".