Le pouvoir des feuilles de style utilisateur

Publié le dans Articles. Mots-clés : , , .

Alors que je parcourais nonchalamment ma timeline Facebook, le statut d’un de mes contacts m’a interpellé :

Hmm, je sens que ça va vite me gaver cette nouveauté Facebook qui consiste à mettre des suggestions de pages (de la pub quoi) au milieu de ma timeline

En effet, la Suggestion de Page Facebook s’insère dans votre timeline mais prend malicieusement, peu ou prou, la même forme que les publications de vos amis.

Suggestion de page Facebook

Et tout d’un coup, l’idée de masquer ces satanées publicités à l’aide d’une feuille de style utilisateur me traverse l’esprit ! Ni une, ni deux, je me lance !

Feuilles de style utilisateurs ? Qu’est-ce que c’est ?

Avant de rentrer dans le vif du sujet, une petite explication peut être nécessaire si le sujet ne vous parle pas. Sinon, vous pouvez directement aller lire comment créer sa feuille de style utilisateur.

Les feuilles de styles (CSS) permettent de mettre en forme le contenu d’une page web. Elles servent à définir les couleurs, les typographies, les dimensions… bref tous les paramètres qui permettent de gérer l’affichage et de définir comment se présentera une page web.

Lorsqu’on parle de feuilles de styles, on pense généralement aux feuilles de styles auteur, c’est à dire les styles définis par le créateur du site web. C’est en effet son travail de définir comment s’affichera les pages de son site.
Mais le créateur de site web n’a pas tous les pouvoirs ! Il existe aussi d’autres feuilles de style : celles du navigateur et celles de l’utilisateur.

Les feuilles de styles navigateur appliquent un certain nombre de styles par défaut pour s’assurer d’un rendu minimal des pages web. En tant qu’utilisateur, on peut voir leurs effets sur les formulaires par exemple. Si vous avez déjà navigué avec différents navigateurs/systèmes d’exploitation, vous aurez peut-être constaté des traitements différents sur des éléments comme les cases à cocher, les boutons radio ou encore les listes déroulantes. On doit généralement ces effets aux feuilles de styles navigateurs.

Mais ce qui nous intéresse aujourd’hui est la dernière catégorie : la feuille de styles utilisateur !
Cette dernière permet à l’utilisateur final de définir ses propres styles, c’est un outil puissant en terme d’accessibilité. On peut effectivement, par exemple, définir une taille de texte élevée. Dans ce cas, la taille des textes sera appliquée à toutes les pages web et permettra à un utilisateur malvoyant de lire des textes qu’il n’aurait pas forcément pu lire avec la taille défini dans les styles auteur.
Dans la pratique, ce n’est pas toujours aussi simple et l’application des styles utilisateurs n’est possible qu’à condition que les styles auteur respectent un minimum les bonnes pratiques d’usage en CSS. Mais à partir du moment où c’est le cas, l’utilisateur a tous les pouvoir pour adapter une page web à sa convenance !

Voyons donc comment prendre le pouvoir en tant qu’utilisateur.

Créer sa feuille de style utilisateur

Chaque navigateur donne la possibilité d’ajouter des styles utilisateurs. Il suffit généralement d’éditer un fichier mis à disposition par défaut, ou d’en créer. Chaque navigateur ayant un mécanisme qui lui est propre, je vous détaille ci-dessous la démarche pour Firefox, Chrome, Internet Explorer, Safari et Opéra.

Dans Firefox

Pour appliquer ses styles personnalisés, il est nécessaire de les insérer dans un fichier nommé spécifiquement « userContent.css ». Il faut alors le copier dans le répertoire suivant, en fonction de votre OS 

Sur Windows Vista / Windows 7

C:\Users\USERNAME\AppData\Roaming\Mozilla\Firefox\Profiles\ PROFILE.default\chrome\userContent.css

Sur Windows XP

C:\Documents and Settings\USERNAME\Application Data\Mozilla\Firefox\Profiles\default.PROFILE\chrome\userContent.css

Sur Ubuntu

home/.mozilla/firefox/.default/chrome/userContent.css

Note : lorsque vous créez ou modifiez ce fichier, il est nécessaire de redémarrer Firefox pour que les changements soient pris en compte.
Note 2 : ne disposant pas de toutes les configurations possibles, j’invite ceux qui le souhaitent à me transmettre les chemins des OS qui sont absents de cet article, notamment Windows 8 et Mac OSX.

MAJ : Il existe aussi le module complémentaire Stylish pour ajouter ses propres styles, sans avoir à parcourir les dossiers sur son poste.

Dans Chrome

À l’instar de Firefox, un fichier prédéfini permet d’ajouter ses propres styles dans Chrome. Il se nomme « Custom.css » et se trouve dans le répertoire suivant, en fonction de votre OS 
Sur Windows Vista / Windows 7

C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Sur Windows XP

C:\Documents and Settings\USERNAME\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

MAJ : Il existe aussi l’extension Stylish pour ajouter ses propres styles, sans avoir à parcourir les dossiers sur son poste.

Dans Internet Explorer

Il faut au préalable avoir créé votre feuille de style personnalisée et la stocker sur votre ordinateur. Une fois fait, procédez comme suit :

  1. Dans le menu « Outils », sélectionnez l’option « Options Internet » pour ouvrir la fenêtre des options.
  2. Sur l’onglet « Général », cliquez sur le bouton « Accessibilité » qui se trouve en bas.
  3. Cochez la case « Mettre les documents en forme en utilisant ma feuille de style ».
  4. Le champ « Feuile de style » est rendu actif et vous pouvez spécifier le chemin de votre feuille de style personnalisée.

Dans Safari

Il faut au préalable avoir créé votre feuille de style personnalisée et la stocker sur votre ordinateur. Une fois fait, procédez comme suit :

  1. Rendez-vous dans le menu « Préférences » (vous pouvez aussi utiliser le raccourci Ctrl + ,) pour ouvrir la fenêtre des Préférences.
  2. Allez sur l’onglet « Avancées ».
  3. Vous verrez une liste déroulante « Feuilles de style » avec la valeur « Aucune sélection » par défaut. À l’aide de cette liste, vous n’avez plus qu’à spécifier le chemin de votre feuille de style personnalisée.

Dans Opéra

Il faut au préalable avoir créé votre feuille de style personnalisée et la stocker sur votre ordinateur. Une fois fait, procédez comme suit :

  1. Rendez-vous dans le menu « Réglages » puis « Préférences » (vous pouvez aussi utiliser le raccourci Ctrl + F12) pour ouvrir la fenêtre des Préférences.
  2. Allez sur l’onglet « Avancé ».
  3. Cliquez sur l’entrée « Contenu » puis le bouton « Options de style » pour ouvrir la fenêtre Options de style.
  4. Dans le champ « Mon style », vous n’avez plus qu’à spécifier le chemin de votre feuille de style personnalisée.

Exemples de styles utilisateur pratiques

Vous savez désormais comment créer vos propres styles utilisateur. Retournons donc au point d’origine de cet article : comment masquer les publicités Facebook ?
Le code suivant permet donc de masquer les Suggestions de page, mais aussi les colonnes de publicité à droite des pages (sur la timeline, le profil et la messagerie) :

#pagelet_ego_pane_w,
#pagelet_side_ads,
#pagelet_ego_pane,
.uiStreamStoryAttachmentOnly {
	display: none;
}

Dans le même ordre d’idée, il est possible de masquer les tweets sponsorisés sur Twitter :

.promoted-tweet {display: none;}

Et voilà, bye bye les publicités Facebook (de visu en tout cas).

Conclusion

Avec cet article vous avez les armes pour créer vos propres styles utilisateurs. Après, il est vrai que ce n’est à la portée de tous car il est nécessaire d’avoir un minimum de connaissance en CSS. La portée de ce mécanisme est donc plutôt limitée mais il ne tient qu’à nous (ndla: aux personnes maîtrisant CSS) d’accompagner les personnes qui n’ont pas les connaissances suffisantes mais souhaiteraient profiter des bienfaits des feuilles de styles utilisateur. :-)

15 commentaires sur « Le pouvoir des feuilles de style utilisateur »

  1. Nico a répondu le

    Yop,

    j’ai mis un certain temps à m’en servir, mais y a vraiment moyen de se marrer avec les CSS utilisateur, un retours d’expérience : CSS utilisateur pour virer les Tweets sponsorisés.

    Sous Firefox, il existe une extension nommée Stylish qui est vraiment très pratique pour faire mumuse : Refaire l’affichage de Twitter à l’arrache en 10 minutes.

    Je m’en sers aussi pour adapter certains back-end, genre les textarea trop rikikies, etc. :)

    à+
    Nico

    Répondre
    1. Luc (Rédacteur) a répondu le

      J’ai hésité à parler de Stylish mais comme il y a déjà un gros pavé je me suis abstenu.
      Mais en réfléchissant, je vais quand même ajouter les liens pour télécharger le module. À défaut d’expliquer, ça donne au moins l’occasion de prendre connaissance de son existence. :)

  2. PhilippeVay a répondu le

    Bonjour,

    pour les chemins d’accès sur Windows, il y a les variables %USERNAME% et/ou %USERPROFILE% (le 1er ne fonctionne pas sur W7 alors de mémoire je dirais que le 1er est pour XP, le 2nd pour W7 ?).

    Ça donne « cd %userprofile% » (avec un % avant et après collés aux lettres indifféremment en minuscules ou majuscules).

    Sinon AdBlockPlus ne fonctionnerait-il pas avec ces pubs (ne m’étant pas connecté sur FB depuis approx. l’été 2012, je n’ai pas vérifié ^^)

    Répondre
    1. Luc (Rédacteur) a répondu le

      J’ai déjà croisé les variables %USERNAME% et/ou %USERPROFILE% mais j’ignorais qu’on pouvait les utiliser dans l’explorateur :o Merci pour la découverte !
      Du coup j’ai testé C:\Users\%USERNAME%\AppData\Roaming\Mozilla\Firefox\ et ça fonctionne sur W7 chez moi.

      AdBlockPlus bloque certainement ces pubs, mais c’était surtout un prétexte pour parler des CSS utilisateurs en fait :-p

  3. Gaël a répondu le

    Allez, devenons de vrais power-users et boutons les pubs hors de nos réseaux :D

    Répondre
    1. FloR a répondu le

      Attention à ne pas bloquer trop de pubs et tuer le web … Il est important de bien choisir, certains sites en abusent vraiment mais d’autres en vivent, sans pub, le web serait vide …

  4. Victor Brito a répondu le

    L’exemple des contrôles de formulaire pour illustrer les feuilles de style des navigateurs n’est pas très pertinent, dans la mesure où, dans ce cas précis, les systèmes d’exploitation y mettent leur grain de sel (sous un même navigateur, la mise en forme d’un contrôle de formulaire peut varier d’un OS à un autre), s’il bien qu’on est souvent contraint de lâcher prise et de ne pas chercher à styler (y compris dans une feuille de style auteur) la plupart de ces contrôles, notamment les boutons radio et les cases à cocher.

    Répondre
    1. Luc (Rédacteur) a répondu le

      C’est pas faux et je me suis d’ailleurs posé la question de cet exemple.
      Comme j’essaie de rester compréhensible même pour ceux qui n’y connaissent rien, je me suis dis que l’exemple du formulaire serait tout de même assez parlant pour que tout le monde comprennent l’idée.

      Vu qu’un formulaire est un des éléments qu’on rencontre le plus et dont on peut facilement constater les différences de rendu quand on change de navigateur ou d’OS, j’ai quand même conservé cet exemple.
      À défaut d’être totalement pertinent techniquement, il a l’avantage d’être facilement compris. :)

  5. Répondre
    1. Luc (Rédacteur) a répondu le

      Merci pour ce commentaire enjoué :D

      Sans ignorer le sujet de l’accessibilité, mon parti pris a été de rentrer par un problème qui « touche » plus facilement les gens (d’où les publicités Facebook).

      Je réfléchis à un petit projet de promotion des CSS utilisateurs (pour aller plus loin que ce billet) qui implique la communauté. Si j’arrive à poser la première brique, je ne manquerai pas de le faire savoir au plus grand nombre ;)

    2. Victor Brito a répondu le

      Alors, lance-toi, Luc ! ;)

  6. Benoit a répondu le

    Salut!

    Je déterre un peu le sujet, désolé! :D

    Il y aurait-il eu des mises à jours quant aux feuilles de styles utilisateurs ? Car de mon côté, j’ai bien modifié les différents ID et CLASS que tu as fourni et j’y ai ajouté: »#pagelet_ticker,.fbSidebarGripper » ce qui devrait avoir pour effet de masquer le petit fil d’actualités pour stalkers en haut à droite de Facebook mais rien n’y fait… Même avec un !important.

    Aurais-tu une idée ?

    Répondre
    1. Luc (Rédacteur) a répondu le

      Bonjour Benoît,

      C’est possible qu’il y ait eu des mises à jour. D’ailleurs dans mon fil d’actu principal, j’ai de nouveau des publications sponsorisées mais elles n’ont ni id ni class spécifiques (vs. les publications d’amis) donc en l’état, je ne vois pas comment les masquer. :(

      Par contre pour la colonne de droite je n’ai toujours aucune pub affichée de mon côté. Après c’est possible que tu constates ça sur une page que je n’ai pas l’habitude de visiter. Ils utilisent différents id/class en fonction des pages donc il est possible que je n’aies pas de quoi masquer toutes les pubs dans mon code.
      Pour être sûr quand même, « le fil d’actualités pour stalkers » dont tu parles c’est la colonne où se trouvent les liens Confidentialités, Conditions d’utilisation, etc ?

  7. Gaël Poupard a répondu le

    Je reviens dessus car je m’en sers désormais sur Ubuntu (14.04 LTS) : le chemin pour Firefox est home/.mozilla/firefox/.default/chrome/userContent.css. À noter que le dossier Chrome n’existe pas par défaut, j’ai du le créer.

    Merci pour cette super astuce :D

    Répondre
    1. Luc (Rédacteur) a répondu le

      Hop, ajouté. Merci. ;)

Laisser un commentaire

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>