Comment personnaliser Firefox Reader View pour une meilleure lisibilité
Reader View est une fonctionnalité populaire du navigateur Firefox, qui change l'apparence d'une page Web, et le rend plus lisible par enlever le fouillis visuel tels que des images, des annonces, des en-têtes et des barres latérales. Reader View n'est toutefois pas disponible pour toutes les pages d'accueil..
Si la fonctionnalité est disponible pour une certaine page, vous trouverez l'icône pour l'activer sous la forme d'un icône de petit livre affiché à droite de la barre d'adresse.
Quelques options intégrées permettent aux lecteurs de personnaliser l’apparence du lecteur. Vue du lecteur. Nous allons examiner ces options avant de vous montrer ce que vous pouvez faire pour personnaliser davantage l'apparence de la vue Lecteur. À des fins de démonstration, je vais utiliser un article de National Geographic.
Options pré-construites
Firefox Reader View est livré avec quelques options de personnalisation prédéfinies telles que sombre, clair et sépia arrière-plans, Ajustable tailles de police, et serif et sans-serif polices de caractères. Vous pouvez personnaliser le thème en redéfinir les règles CSS de ces options préexistantes.
J'utilise une peau sombre avec des polices serif, ce qui signifie que je devrai remplacer les classes CSS d'appartenance, dans mon cas. .foncé et .serif.
Si vous souhaitez personnaliser une autre variante de thème (skin + police), vous devez utiliser les sélecteurs CSS appropriés. Vous pouvez les vérifier à l'aide des outils de développement de Firefox en appuyant sur F12..
Créer le fichier CSS personnalisé
Vous devez créer un fichier appelé userContent.css à l'intérieur de chrome dossier de votre dossier de profil Firefox pour vos personnalisations Reader View. Pour trouver votre dossier de profil Firefox, tapez à propos de: support dans la barre d'URL et appuyez sur Entrée.
Vous vous retrouverez sur une page contenant le données techniques liées à votre installation de Firefox. Cliquez sur le bouton Afficher le dossier pour ouvrir votre dossier de profil..
Créez un dossier appelé chrome dans votre dossier de profil (si vous ne l’avez pas encore) et un fichier appelé userContent.css à l'intérieur de chrome dossier. Le chemin du fichier ressemble à ceci:
… \ Profils \\ chrome \ userContent.css
Ajouter les règles CSS personnalisées
Une fois que vous avez créé et ouvert userContent.css dans un éditeur de code, il est temps d'ajouter vos règles CSS. Pour personnaliser la conception de la vue Lecteur, vous devez: cibler le balise avec les sélecteurs appropriés.
Vous pouvez utiliser les sélecteurs suivants pour les différentes options par défaut:
/ * Lorsque l'arrière-plan sombre est sélectionné * /: root [hasbrowserhandlers = "true"] body.dark / * Lorsque l'arrière-plan est sélectionné * /: root [hasbrowserhandlers = "true"] body.light / * Lorsque sépia l'arrière-plan est sélectionné * /: root [hasbrowserhandlers = "true"] body.sepia / * Lorsque la police avec empattement est sélectionnée * /: root [hasbrowserhandlers = "true"] body.serif / * lorsque la police sans-empattement est sélectionné * /: root [hasbrowserhandlers = "true"] body.sans-serif
Vous pouvez également combiner les classes pour cibler une combinaison spécifique de paramètres..
/ * Lorsque l'arrière-plan sombre et la police serif sont sélectionnés * /: root [hasbrowserhandlers = "true"] body.dark.serif / * Lorsque l'arrière-plan sépia et la police sans-serif sont sélectionnés * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia
Ne pas utiliser le sélecteur commun : root [hasbrowserhandlers = "true"] body pour cibler tous les paramètres à la fois. Ça va marcher, mais ça va affecte également les autres pages du navigateur, tel que à propos de: newtab, comme leurs éléments racines portent également la hasbrowserhandlers attribut (utilisé pour marquer les gestionnaires d’événements des pages internes de Firefox, tels que sur: pages).
Voici le code que j'ai ajouté à mon userContent.css. J'ai changé la famille de police, le style de police, les couleurs et élargi le conteneur de texte. Vous pouvez utiliser n'importe quelle autre règle de style selon vos goûts.
/ ** userContent.css **************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # lecteur-domaine font-family: "nouveau courrier"! important; : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! important; couleur: # BAE3DB! important; : root [hasbrowserhandlers = "true"] body.dark.serif # lecteur-domaine style de police: italique! important; : root [hasbrowserhandlers = "true"] body.dark.serif h1,: root [hasbrowserhandlers = "true"] body.dark.serif h2,: root [hasbrowserhandlers = "true"] body.dark.serif h3,: root [hasbrowserhandlers = "true"] body.dark.serif h4,: root [hasbrowserhandlers = "true"] body.dark.serif h5 color: # 06FEB0! important; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! important;
Notez qu'il est nécessaire d'utiliser le !important mot clé dans userContent.css pour toutes les règles CSS. Le navigateur ajoute des valeurs de propriété spécifiées par l'utilisateur avant les valeurs spécifiées par l'auteur (le développeur de la page Web donnée, ici la vue Lecteur). Par conséquent, toute valeur de propriété spécifiée par l'utilisateur sans le !important le mot-clé ne fonctionnera pas si une feuille de style spécifiée par l'auteur cible également la même propriété, car elle sera remplacée.
Résultat final
Vous pouvez voir les modifications du thème de mon vue Lecteur ci-dessous. Utilisez vos propres règles CSS pour personnaliser le design de votre propre Firefox Reader View.
Avant
Après
Si vous souhaitez approfondir la personnalisation des thèmes des outils Firefox, consultez mon précédent tutoriel sur la personnalisation du thème des outils de développement Firefox..
