Personnalisation des CSS par site sous Firefox (ou comment masquer les pub de linked)

Publié le - Dernière mise à jour le par | Développement|sécurité

Mozilla Firefox intègre des options pour surcharger le CSS des sites. Cette option est utile dans plusieurs contextes (développement, sécurité, intégration) mais aussi pour modifier des sites existants, par exemple contrôler la visibilité de sections ou agrandir des polices (ou dans le cas de réseaux sociaux, masquer le contenu commandité)

Pour ce faire, un fichier nommé userContent.css doit être créer dans le dossier chrome de votre profil Firefox (%AppData%\Roaming\Mozilla\Firefox\Profiles\XXXXXXXXX.default\chrome – il est possible que le dossier chrome ne soit pas créer dans votre profil)

Dans ce fichier, vous identifiez les sites via la directive @-moz-document domain(www.nom_du_domaine.com) { CSS ici } et spécifier les sélecteurs CSS que vous désirez surcharger.

Je ne suis pas très réseaux sociaux, par contre j’utilise linked-in sur une base occasionnelle ainsi voici mes règles associées à Linked-in pour en masquer quelques sections inutiles. Vous pouvez appliquer la même démarche à différents sites Internet.

@-moz-document domain(www.linkedin.com) {

/* Masquer les nouvelles sponsorisées */
#my-feed-post li.linkedin-sponsor {
      display:none;
      }

/* Masquer les emplois recommandés - (J'ai ma propre entreprise, alors pourquoi changer) */      
#my-feed-post li.linkedin-recommend-job {
      display:none;
      } 

/* Masquer les endossements - Personne veut endosser mes compétences en CSS ? */            
#my-feed-post li.linkedin-endorse-by {
      display:none;
  }  
 
/* Non, je ne prendrai pas un compte premium, inutile de me le rappeler */  
div.upsell {
      display:none;
}

/* Masquer la section sur les offres d'emplois */
div#jobsForYou {
      display:none;
}
  
}

Firefox doit être redémarrer pour que les changements s’appliquent.

C’est simple et efficace.