Modifier l’apparence de Firefox avec userChrome.css

Q: userChrome.css ou extension Firefox ?

Les extensions et userChrome.css ne répondent pas au même besoin. BesoinSolution recommandéeChanger la couleur ou l’espacement des ongletsuserChrome.cssMasquer un bouton intégréuserChrome.cssAjouter une fonction au navigateurExtension FirefoxModifier le comportement d’un siteExtension ou userscriptModifier visuellement une pageuserContent.css ou extension dédiéeAutomatiser l’analyse d’une pageUserscript ou outil de développement Pour automatiser une page plutôt que modifier l’interface du navigateur, consultez le tutoriel expliquant comment tester les liens d’une page avec Firefox et un userscript.

Q: À quoi sert userChrome.css dans Firefox ?

userChrome.css permet de modifier l’apparence de l’interface Firefox. Il peut cibler les onglets, la barre d’adresse, les boutons, les menus, les panneaux et plusieurs autres éléments intégrés.

Q: Où placer userChrome.css ?

Le fichier doit être placé dans un dossier nommé chrome, à la racine du profil Firefox actif. Le chemin final doit être profil-actif/chrome/userChrome.css.

Q: Pourquoi userChrome.css ne fonctionne-t-il pas ?

Vérifiez que la préférence toolkit.legacyUserProfileCustomizations.stylesheets vaut true, que le fichier se trouve dans le bon profil et qu’il ne possède pas une extension cachée comme .txt.

Q: Faut-il redémarrer Firefox après une modification ?

Oui. Firefox charge normalement userChrome.css au démarrage. Fermez toutes les fenêtres du navigateur, puis relancez-le après avoir enregistré le fichier.

Firefox peut charger une feuille userChrome.css pour modifier son interface : onglets, barre d’adresse, menus, panneaux et boutons. La méthode exige d’activer une préférence avancée, de créer le fichier dans le profil actif et de redémarrer Firefox après chaque modification.

Firefox reste l’un des rares navigateurs modernes dont l’interface peut être profondément modifiée avec du CSS.

Vous pouvez réduire la hauteur des barres d’outils, masquer certains boutons, modifier l’apparence des onglets ou réorganiser visuellement plusieurs éléments.

Cette personnalisation repose principalement sur un fichier nommé userChrome.css. Malgré son nom, il n’a aucun rapport avec Google Chrome. Dans le vocabulaire historique de Mozilla, le « chrome » désigne l’interface du navigateur.

La méthode reste puissante. Toutefois, Mozilla ne la prend pas officiellement en charge et ne garantit pas que les sélecteurs internes survivront aux prochaines mises à jour.

Autrement dit, vous pouvez refaire le salon. Évitez simplement de supposer que Mozilla conservera chaque mur porteur au même endroit.

Kinsta: Premium Managed WordPress hosting

userChrome.css et userContent.css : quelle différence ?

Firefox peut charger deux feuilles de style personnalisées aux rôles distincts.

Fichier	Zone modifiée	Exemples
`userChrome.css`	Interface de Firefox	Onglets, barre d’adresse, menus, panneaux, boutons
`userContent.css`	Contenu affiché par Firefox	Pages web, pages internes, lecteur PDF, page Nouvel onglet

Utilisez donc userChrome.css pour transformer le navigateur lui-même.

Utilisez userContent.css pour modifier la présentation des pages ou de certaines pages internes.

Les deux fichiers se placent dans le même dossier chrome du profil Firefox.

Avant de commencer : sauvegarder le profil Firefox

Une erreur CSS ne supprime normalement ni vos marque-pages ni vos mots de passe. Elle peut néanmoins rendre l’interface difficile à utiliser.

Avant toute modification importante, sauvegardez au minimum votre dossier chrome. Une copie complète du profil offre une protection supplémentaire.

Pour ouvrir le profil actif, saisissez cette adresse dans Firefox :

about:supportLangage du code : CSS (css)

Dans la section Informations de base de l’application, repérez la ligne Dossier de profil. Cliquez ensuite sur le bouton permettant d’ouvrir le dossier.

Vous pouvez également utiliser le gestionnaire de profils :

about:profilesLangage du code : CSS (css)

Cette méthode est préférable à la recherche manuelle d’un chemin système. Elle ouvre le profil réellement utilisé, même avec plusieurs profils ou une installation Snap ou Flatpak.

Le guide consacré à la récupération d’une session Firefox perdue explique également comment identifier et sauvegarder correctement un profil.

Étape 1 : activer les feuilles de style personnalisées

Firefox ne charge plus userChrome.css par défaut. Cette vérification a été désactivée afin de ne pas ralentir inutilement le démarrage des utilisateurs qui n’emploient pas cette fonction.

Ouvrez l’éditeur de configuration :

about:configLangage du code : CSS (css)

Acceptez l’avertissement, puis recherchez la préférence suivante :

toolkit.legacyUserProfileCustomizations.stylesheetsLangage du code : CSS (css)

Définissez sa valeur sur :

trueLangage du code : JavaScript (javascript)

La modification prendra effet au prochain démarrage de Firefox.

Étape 2 : créer le dossier chrome

Ouvrez le dossier du profil actif depuis about:support.

À la racine de ce profil, créez un dossier nommé exactement :

chrome

Respectez les minuscules. Ce dossier n’existe généralement pas dans un profil neuf.

La structure doit ressembler à ceci :

xxxxxxxx.default-release/

├── chrome/
│ └── userChrome.css
├── prefs.js
├── places.sqlite
└── ...Langage du code : PHP (php)

Le nom du profil varie selon l’installation. Ne copiez donc pas aveuglément un chemin trouvé sur Internet.

Étape 3 : créer le fichier userChrome.css

Dans le dossier chrome, créez un fichier texte nommé exactement :

userChrome.cssLangage du code : CSS (css)

Attention aux extensions masquées sous Windows. Le fichier ne doit pas s’appeler :

userChrome.css.txtLangage du code : CSS (css)

Vous pouvez l’éditer avec Visual Studio Code, Notepad++, BBEdit, Sublime Text, Vim ou n’importe quel éditeur capable d’enregistrer du texte brut en UTF-8.

Fermez complètement Firefox avant de tester votre première modification.

Tester que userChrome.css fonctionne

Commencez par une règle volontairement visible. Elle permet de confirmer que Firefox charge correctement le fichier.

/**
Test de chargement de userChrome.css.
*/
#nav-bar {
background-color: #ff4f64 !important;
}Langage du code : CSS (css)

Enregistrez le fichier, fermez toutes les fenêtres de Firefox, puis relancez le navigateur.

Si la barre de navigation change de couleur, la configuration fonctionne. Supprimez ensuite cette règle de test.

Le plus lu : MariaDB ne veut plus redémarrer : quelques solutions

Un simple rechargement d’onglet ne suffit pas. Firefox lit normalement userChrome.css au démarrage.

Faut-il encore ajouter la directive @namespace ?

Les anciens tutoriels commencent souvent par cette directive :

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");Langage du code : CSS (css)

Elle n’est plus nécessaire pour une feuille moderne.

Cette déclaration limitait les sélecteurs non préfixés aux éléments XUL. Or l’interface actuelle de Firefox mélange plusieurs technologies et utilise aussi des éléments HTML.

Dans certains cas, une ancienne directive @namespace peut donc empêcher une règle moderne de cibler l’élément attendu.

Sauf besoin précis, commencez simplement votre fichier par des commentaires et vos règles CSS.

Exemple complet de userChrome.css

Voici une base raisonnable qui réduit certains espacements sans reconstruire toute l’interface.

Les sélecteurs internes peuvent évoluer. Ajoutez donc les règles progressivement et testez-les après chaque mise à jour majeure.

/**
Personnalisation légère de l’interface Firefox.
Emplacement :
profil-firefox/chrome/userChrome.css
*/

/**

Réduire légèrement les marges internes des boutons.
*/
:root {
--toolbarbutton-inner-padding: 6px !important;
}

/**

Réduire la hauteur minimale de la barre d’onglets.
*/
#TabsToolbar {
min-height: 34px !important;
}

/**

Réduire la hauteur minimale des onglets.
*/
.tabbrowser-tab {
min-height: 32px !important;
}

/**

Arrondir légèrement les onglets sélectionnés.
*/
.tabbrowser-tab[selected] .tab-background {
border-radius: 8px !important;
}

/**

Atténuer l’opacité des onglets non sélectionnés.
*/
.tabbrowser-tab:not([selected]) {
opacity: 0.82 !important;
}

/**

Restaurer l’opacité au survol.
*/
.tabbrowser-tab:not([selected]):hover {
opacity: 1 !important;
}

/**

Masquer le bouton d’accueil.
*/
#home-button {
display: none !important;
}

/**

Masquer le bouton Pocket s’il est présent.
*/
#save-to-pocket-button {
display: none !important;
}

/**

Masquer l’en-tête du panneau latéral.
*/
#sidebar-header {
display: none !important;
}Langage du code : CSS (css)

Ne copiez pas nécessairement toutes les règles. Conservez uniquement celles qui répondent à un besoin réel.

Une feuille courte reste plus facile à maintenir lorsqu’une mise à jour de Firefox modifie son interface.

Masquer des éléments de l’interface

La propriété display: none permet de retirer un élément de l’interface.

Par exemple, vous pouvez masquer plusieurs boutons facultatifs :

#home-button,

#save-to-pocket-button,
#fxa-toolbar-menu-button {
display: none !important;
}Langage du code : CSS (css)

Évitez toutefois de masquer des commandes essentielles sans prévoir une autre manière de les utiliser.

Retirer visuellement un bouton ne désactive pas forcément la fonctionnalité correspondante. Le raccourci clavier ou l’entrée de menu peut rester disponible.

Modifier l’apparence des onglets

Les onglets constituent l’une des zones les plus souvent personnalisées.

La règle suivante distingue davantage l’onglet actif :

.tabbrowser-tab[selected] .tab-background {
background: color-mix(
	in srgb,
	AccentColor 25%,
	transparent
) !important;
border: 1px solid color-mix(
	in srgb,
	AccentColor 50%,
	transparent
) !important;
border-radius: 8px !important;

}Langage du code : CSS (css)

La couleur système AccentColor suit la couleur d’accent fournie par Firefox ou le système d’exploitation.

Cette approche s’intègre mieux aux thèmes clairs et sombres qu’une couleur codée en dur.

Réduire l’espace occupé par les barres d’outils

Les variables CSS internes permettent parfois de réduire les espacements sans fixer chaque dimension individuellement.

:root {
--toolbarbutton-inner-padding: 5px !important;
--tab-min-height: 30px !important;

}

#nav-bar {
min-height: 36px !important;
}

#urlbar-container {
--urlbar-container-height: 34px !important;
}Langage du code : CSS (css)

Ces dimensions ne conviennent pas à tous les écrans. Une interface trop compacte peut réduire la taille des cibles cliquables et compliquer l’utilisation tactile.

Réduisez donc les valeurs progressivement plutôt que de transformer Firefox en tableau de bord d’un sous-marin soviétique.

Adapter les règles au thème sombre

La requête média prefers-color-scheme permet d’appliquer certains styles uniquement avec un thème sombre.

@media (prefers-color-scheme: dark) {
#navigator-toolbox {
	border-bottom: 1px solid rgb(255 255 255 / 12%) !important;
}

.tabbrowser-tab:not([selected]) {
	opacity: 0.75 !important;
}

}Langage du code : CSS (css)

Pour le thème clair, ajoutez une seconde requête :

@media (prefers-color-scheme: light) {
#navigator-toolbox {
	border-bottom: 1px solid rgb(0 0 0 / 12%) !important;
}

}Langage du code : CSS (css)

Organiser une feuille userChrome.css volumineuse

Une personnalisation importante devient rapidement difficile à maintenir dans un fichier unique.

Le plus lu : Ubuntu : associer une clé bluetooth avec des enceintes bluetooth Novodio PureSound

Vous pouvez séparer les règles dans plusieurs fichiers et les importer depuis userChrome.css.

@import url("tabs.css");

@import url("toolbar.css");
@import url("sidebar.css");Langage du code : CSS (css)

Le dossier peut alors adopter cette structure :

chrome/

├── userChrome.css
├── tabs.css
├── toolbar.css
└── sidebar.css

Placez les directives @import au début du fichier, avant les autres règles.

Cette organisation facilite les tests. Vous pouvez désactiver temporairement une section en commentant son import.

/* @import url("sidebar.css"); */Langage du code : PHP (php)

Comment trouver les bons sélecteurs CSS ?

Les éléments de l’interface Firefox ne se trouvent pas dans l’inspecteur classique d’une page web.

Vous devez utiliser la boîte à outils du navigateur.

Activer le débogage du navigateur

Ouvrez les outils de développement avec la touche F12, puis accédez aux paramètres des outils.

Dans les options avancées, activez :

Activer le débogage du chrome du navigateur et des modules ;
Activer le débogage distant, si cette option est demandée par votre version.

Ouvrez ensuite la boîte à outils du navigateur depuis le menu :

Outils supplémentaires → Outils de développement du navigateur → Boîte à outils du navigateur.

Firefox peut afficher une demande de confirmation. Acceptez-la pour ouvrir l’inspecteur de l’interface.

Inspecter un élément

Utilisez l’outil de sélection, puis cliquez sur l’élément de Firefox à modifier.

Repérez ensuite :

son identifiant, par exemple #home-button ;
ses classes, par exemple .tabbrowser-tab ;
ses attributs, par exemple [selected] ;
les variables CSS appliquées ;
les règles existantes que votre feuille doit remplacer.

Vous pouvez tester une propriété directement dans l’inspecteur avant de la copier dans userChrome.css.

Cette méthode reste bien plus fiable que la copie d’un extrait publié plusieurs années auparavant.

Pourquoi utilise-t-on souvent !important ?

L’interface de Firefox possède déjà ses propres règles CSS, parfois très spécifiques.

La déclaration !important aide une règle personnelle à prendre le dessus :

#home-button {
display: none !important;

}Langage du code : CSS (css)

Sur un site web classique, l’utilisation massive de !important signale souvent une cascade mal maîtrisée.

Dans userChrome.css, son emploi est davantage justifié. Vous surchargez volontairement une interface dont vous ne contrôlez ni les feuilles d’origine ni la spécificité.

Il reste néanmoins préférable de cibler précisément les éléments plutôt que d’appliquer des règles globales agressives.

userChrome.css ne fonctionne pas : les vérifications à effectuer

La plupart des problèmes proviennent d’un chemin incorrect, d’un mauvais nom de fichier ou d’une préférence non activée.

Vérifier la préférence about:config

Confirmez que cette préférence vaut bien true :

toolkit.legacyUserProfileCustomizations.stylesheetsLangage du code : CSS (css)

Vérifier le profil actif

Firefox peut contenir plusieurs profils. Le fichier doit se trouver dans celui qui est réellement utilisé.

Utilisez toujours about:support ou about:profiles pour retrouver son emplacement.

Vérifier l’arborescence

Le fichier doit se trouver directement ici :

profil-actif/chrome/userChrome.css

Évitez les structures incorrectes suivantes :

Profiles/chrome/userChrome.css

profil-actif/chrome/chrome/userChrome.css
profil-actif/userChrome.css
profil-actif/chrome/userChrome.css.txt

Redémarrer entièrement Firefox

Fermez toutes les fenêtres. Vérifiez également que le processus Firefox ne reste pas actif en arrière-plan.

Relancez ensuite le navigateur.

Tester avec une seule règle

Commentez temporairement tout le fichier et conservez uniquement une modification évidente :

#nav-bar {
background: red !important;

}Langage du code : CSS (css)

Si cette règle fonctionne, le problème provient probablement d’un sélecteur obsolète ou d’une erreur de syntaxe dans le reste du fichier.

Vérifier les accolades et les commentaires

Une accolade manquante ou un commentaire non fermé peut invalider toutes les règles suivantes.

/* Commentaire correctement fermé */

#home-button {
display: none !important;
}Langage du code : CSS (css)

Une mise à jour de Firefox a cassé le CSS

Firefox peut modifier ses identifiants, sa structure interne, ses attributs ou ses variables CSS.

Une règle fonctionnelle pendant plusieurs années peut donc cesser de produire un effet après une mise à jour.

Procédez méthodiquement :

faites une copie du fichier actuel ;
commentez toutes les règles ;
réactivez-les section par section ;
identifiez le bloc défectueux ;
inspectez à nouveau l’élément concerné ;
remplacez uniquement les sélecteurs devenus obsolètes.

Ne remplacez pas immédiatement tout votre fichier par une configuration trouvée sur un dépôt public. Vous risqueriez d’échanger un petit problème contre une collection complète.

Démarrer Firefox sans les personnalisations CSS

Si l’interface devient inutilisable, commencez par renommer le fichier :

userChrome.css.disabledLangage du code : CSS (css)

Relancez Firefox. Le navigateur ne chargera plus la feuille.

Le plus lu : BASH : lister, bloquer et débloquer des adresses IP avec iptables

Vous pouvez également désactiver entièrement le mécanisme depuis about:config en remettant cette préférence sur false :

toolkit.legacyUserProfileCustomizations.stylesheetsLangage du code : CSS (css)

Le mode de dépannage de Firefox peut aussi aider à déterminer si un problème provient d’une personnalisation ou d’une extension.

Si les problèmes persistent après la désactivation du CSS, consultez le guide pour réinstaller Firefox sans perdre ses données.

Bonnes pratiques pour maintenir userChrome.css

Ajoutez une seule modification à la fois.
Commentez chaque groupe de règles.
Conservez une copie fonctionnelle du fichier.
Évitez les sélecteurs trop génériques.
Préférez les variables CSS aux dimensions répétées.
Testez Firefox après les mises à jour majeures.
Supprimez les règles dont vous n’avez plus besoin.
Notez la source et la date des extraits récupérés ailleurs.
Utilisez un gestionnaire de versions pour une configuration importante.

Vous pouvez, par exemple, enregistrer le dossier chrome dans un dépôt Git privé.

cd "/chemin/vers/le/profil/chrome"

git init
git add .
git commit -m "Initial Firefox CSS configuration"Langage du code : JavaScript (javascript)

Vous pourrez alors comparer les versions et revenir facilement à une configuration précédente.

userChrome.css est-il synchronisé par Firefox Sync ?

Firefox Sync ne synchronise pas automatiquement les fichiers userChrome.css et userContent.css.

Pour utiliser la même configuration sur plusieurs ordinateurs, vous devez copier manuellement le dossier chrome ou le gérer avec un dépôt privé.

Attention toutefois aux différences entre Windows, macOS et Linux. Certains sélecteurs restent identiques, mais les barres de titre, boutons de fenêtre, polices et dimensions peuvent varier.

Vous pouvez cibler un système avec des règles conditionnelles propres à Mozilla, mais cette approche augmente la complexité et la maintenance.

userChrome.css ou extension Firefox ?

Les extensions et userChrome.css ne répondent pas au même besoin.

Besoin	Solution recommandée
Changer la couleur ou l’espacement des onglets	`userChrome.css`
Masquer un bouton intégré	`userChrome.css`
Ajouter une fonction au navigateur	Extension Firefox
Modifier le comportement d’un site	Extension ou userscript
Modifier visuellement une page	`userContent.css` ou extension dédiée
Automatiser l’analyse d’une page	Userscript ou outil de développement

Pour automatiser une page plutôt que modifier l’interface du navigateur, consultez le tutoriel expliquant comment tester les liens d’une page avec Firefox et un userscript.

Conclusion

userChrome.css permet toujours de personnaliser profondément l’interface de Firefox.

La procédure moderne repose sur quatre étapes :

activer toolkit.legacyUserProfileCustomizations.stylesheets ;
ouvrir le profil actif depuis about:support ;
créer chrome/userChrome.css ;
ajouter les règles CSS et redémarrer Firefox.

La méthode reste réservée aux utilisateurs prêts à maintenir leur configuration. Mozilla peut modifier l’interface interne et casser certains sélecteurs après une mise à jour.

Avec une feuille courte, documentée et sauvegardée, le risque reste facile à maîtriser.

Vous obtenez alors un navigateur réellement adapté à votre manière de travailler, plutôt qu’une interface conçue pour satisfaire statistiquement tout le monde et précisément personne.

Questions fréquentes sur userChrome.css

À quoi sert userChrome.css dans Firefox ?

userChrome.css permet de modifier l’apparence de l’interface Firefox. Il peut cibler les onglets, la barre d’adresse, les boutons, les menus, les panneaux et plusieurs autres éléments intégrés.

Où placer userChrome.css ?

Le fichier doit être placé dans un dossier nommé chrome, à la racine du profil Firefox actif. Le chemin final doit être profil-actif/chrome/userChrome.css.

Pourquoi userChrome.css ne fonctionne-t-il pas ?

Vérifiez que la préférence toolkit.legacyUserProfileCustomizations.stylesheets vaut true, que le fichier se trouve dans le bon profil et qu’il ne possède pas une extension cachée comme .txt.

Faut-il redémarrer Firefox après une modification ?

Oui. Firefox charge normalement userChrome.css au démarrage. Fermez toutes les fenêtres du navigateur, puis relancez-le après avoir enregistré le fichier.

Quelle différence existe entre userChrome.css et userContent.css ?

userChrome.css modifie l’interface du navigateur. userContent.css modifie le contenu des pages web ou de certaines pages internes affichées par Firefox.

Mozilla prend-il officiellement en charge userChrome.css ?

Non. Firefox peut toujours charger ces feuilles, mais Mozilla ne garantit pas leur fonctionnement après chaque mise à jour. Les utilisateurs doivent maintenir eux-mêmes leurs règles CSS.

Comment annuler toutes les modifications ?

Renommez ou supprimez userChrome.css, puis remettez la préférence toolkit.legacyUserProfileCustomizations.stylesheets sur false. Redémarrez ensuite Firefox.

Sources et ressources

Report a typo

Facebook Tweet Pin LinkedIn