Feuilles de styles utilisateur avec Internet Explorer

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 ».

6 thoughts on “Feuilles de styles utilisateur avec Internet Explorer”

  1. Pour compléter sur le sujet :

    Opera propose aussi un mode user.
    Un simple clic droit sur la page et on choisi préférences de site, onglet affichage et on peut spécifier sa feuille de style qui va bien.
    http://emberapp.com/dirtyf/images/o

    Voir aussi : http://www.opera.com/docs/usercss/

    Sous Safari il faut aller dans les préférences, onglet (propriétés) avancées et on peut spécifier sa feuille de style :
    http://emberapp.com/dirtyf/images/s

    Il faut redémarrer Safari pour que la feuille de styles soit prise en compte.

    A vos feuilles de styles persos 🙂

  2. Bonjour,

    Il existe également un addon Firefox pour gérer les styles utilisateurs : stylish (https://addons.mozilla.org/fr/firef…)

    On peut aisément activer et désactiver les styles.

    Je m’en sers principalement pour ajouter un focus plus visible grâce aux styles « Bright Focus » et aussi pour surcharger certains styles qui me gênent.

    Yves

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *