Feuilles de styles utilisateur site par site
Le fichier userContent.css contenu dans le répertoire chrome du profil de Firefox permet depuis longtemps d’appliquer un style à l’ensemble des pages web visitées. Moins connue, la propriété @-moz-document, présente depuis Firefox 1.5, permet également de modifier la maquette d’un site en particulier.
Concrètement, l’intérêt des feuilles de styles CSS utilisateur n’est pas de bouleverser intégralement l’interface de tous les sites que vous visitez, mais plutôt de personnaliser quelques éléments de leur apparence pour rendre la navigation plus aisée. Il peut s’agir d’augmenter la taille d’une police trop petite, de cacher des blocs, ou encore d’agrandir les dimensions d’une zone de texte multilignes (textarea)...
Les modifications ne s’appliqueront qu’à vous bien entendu, et pas à tous les visiteurs du site. Cela ne dégrade donc en aucun cas le site. Par défaut ce fichier n’existe pas, vous devez le créer en utilisant un éditeur de texte.
Personnalisation s’appliquant à tous les sites
La syntaxe à utiliser pour appliquer un style à l’ensemble des pages web est logiquement la même que celle utilisée pour vos sites webs.
Par exemple, si vous souhaitez empêcher les textes clignotants, il suffit de rajouter la ligne suivante dans votre fichier userContent.css :
blink { text-decoration: none !important; }
Pour que Firefox en tienne compte, vous devez le fermer puis le rouvrir.
Le !important indique que même si la feuille de style de la page web visitée applique déjà son style à l’élément que vous souhaitez modifier, Firefox devra tenir compte uniquement de votre code.
Un autre exemple : pour modifier le curseur de la souris sur les liens ouvrant une nouvelle fenêtre, il faut utiliser ce code :
:link[target="_blank"],
:link[target="_new"],
:visited[target="_blank"],
:visited[target="_new"] { cursor: crosshair; }Personnalisation s’appliquant à un site en particulier
La syntaxe est celle-ci :
@-moz-document url(http://www.w3.org/),
url-prefix(http://www.w3.org/Style/),
domain(mozilla.org)
{
/* Les propriétés CSS mises ici s'appliqueront à :
+ La page "http://www.w3.org/".
+ Chaque page dont l'adresse commencera par "http://www.w3.org/Style/"
+ Chaque page dont le nom de domaine sera "mozilla.org" ou finira par ".mozilla.org"
*/
}Imaginons par exemple que vous soyez inscrit sur notre forum. Vous détaillez toujours chacune de vos réponses et chaque fois vous vous énervez car la taille du champ de texte est trop petite, vous obligeant à utiliser les ascenseurs :
Il vous suffit alors de mettre dans votre fichier userContent.css les lignes suivantes :
@-moz-document url-prefix(http://www.geckozone.org/forum/) {
textarea.post {
width: 600px !important;
height: 500px !important;
}
}Et voilà le résultat :
Aller plus loin
Une extension permet d’exploiter le potentiel de cette fonction plus aisément, elle se nomme Stylish.
Une fois installée, rendez-vous sur Userstyles.org pour trouver des codes. Par exemple celui-là vous permet de fusionner les icônes « Actualiser la page courante » et « Arrêter le chargement de la page » de Firefox. En effet, vous pouvez aussi modifier l’interface de Firefox. Celui-ci vous permet de modifier la fenêtre de login de Gmail. Enfin, celui-là vous permet de changer le logo de Google (je répète : uniquement sur votre navigateur bien entendu).
Pour finir, je vous recommande de consulter aussi le sujet userContent.css : trucs et astuces sur notre forum.
Articles dans la même rubrique
- Nettoyer un profil Firefox (16 novembre 2007 - 32998 visites - popularité 16%)
- Utiliser les titres dynamiques (ou microrésumés) avec Mozilla Firefox (26 septembre 2007 - 8981 visites - popularité 2%)
- Microformats - Partie 1 : Le chaos des données structurées (24 mai 2007 - 9616 visites - popularité 2%)
Commentaires
(Si vous recherchez de l'aide pour l'utilisation d'un produit, veuillez utiliser les forums de Geckozone. Les commentaires concernent uniquement l'article. Merci.)
Afficher les commentaires (2) Ajouter un commentaire
