Nous allons apprendre à customiser Firefox en CSS
[toc]
# Activer la prise en compte de la feuille de style personnalisée pour Firefox
[doc](https://www.userchrome.org/how-create-userchrome-css.html)
1. Ouvrez la configuration de Firefox en saisissant `about:config` dans la barre d'URL
2. cherchez la configuration suivante : `toolkit.legacyUserProfileCustomizations.stylesheets` et passez-la à `true`

# Trouver le répertoire profil de votre instance de Firefox
1. Ouvrez la gestion de profil de Firefox en saisissant `about:support` dans la barre d'URL
2. A la ligne [Répertoire de profil] cliquez sur [Ouvrir le répertoire correspondant]

# Créer le fichier de stylisation de Firefox
1. Dans le répertoire du profil, cherchez ou créez un répertoire [chrome]
2. à l'intérieur de celui-ci, créez un fichier `userChrome.css`

# Exemple de customisation stylistiques pour Firefox 
Le code ci-dessous va permettre d'agrandir les onglets épinglés au survol et de leur donner une couleur plus visible
```CSS
.tabbrowser-tab[pinned]:hover{
 min-width: 150px !important;
 z-index: 10 !important;
}
.tabbrowser-tab[pinned]{
 z-index: 10 !important;
 background-color:#3b5f63 !important;
 border-right: 2px solid white !important;
}
```

# NE PAS OUBLIER DE REDÉMARRER FIREFOX
Malheureusement à chaque modification de `userChrome.css` vous devrez redémarrer Firefox pour qu'elles prennent effet

#Inspecter le DOM du navigateur lui même
Afin de déterminer quelle classe, id ou element cibler dans la css, on a besoin d'inspecter le navigateur lui-même.
Pour ce faire ouvrir inspect element, puis dans les options (F1) activer dans les [parametre avancés] les cases [activer le débogage du chrome du navigateur et des modules] ET [activer le débogage distant]

On pourra alors ouvrir un inpect element special pour inspecter le dom du navigateur lui même (voir dans le menu hamburger -> OUtil supplémentaire -> boite a outil du navigateur)