hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Comment personnaliser Firefox Reader View pour une meilleure lisibilité

Reader View est une fonction populaire du navigateur Firefox, qui modifie l'apparence d'une page Web et la rend plus lisible en supprimant le fouillis visuel comme les images, les publicités, les en-têtes et les encadrés. Reader View n'est cependant 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'une petite icône de livre affichée à droite de la barre d'adresse.

Il existe quelques options intégrées qui permettent aux lecteurs de personnaliser l'aspect de la vue du lecteur . Nous examinerons ces options avant de vous montrer ce que vous pouvez faire pour personnaliser davantage l'apparence de Reader View. À des fins de démonstration, j'utiliserai un article de National Geographic.

Options prédéfinies

Firefox Reader View est livré avec quelques options de personnalisation prédéfinies telles que les arrière - plans sombres, clairs et sépia, les tailles de police réglables et les polices de caractères serif et sans empattement. Vous pouvez personnaliser le thème en remplaçant les règles CSS de ces options préexistantes.

J'utilise un skin foncé avec des polices serif, ce qui signifie que je .dark remplacer les classes CSS d'appartenance, dans mon cas .dark et .serif .

Si vous souhaitez personnaliser une autre variante de thème (skin + police), vous devrez utiliser les sélecteurs CSS appropriés . Vous pouvez les vérifier à l'aide des outils de développement Firefox en appuyant sur F12.

Créez le fichier CSS personnalisé

Vous devez créer un fichier appelé userContent.css dans le dossier chrome de votre dossier de profil Firefox pour vos personnalisations de Reader View. Pour trouver votre dossier de profil Firefox, tapez about:support dans la barre d'adresse et appuyez sur Entrée.

Vous vous trouverez sur une page contenant les données techniques relatives à votre installation de Firefox . Cliquez sur le bouton Afficher le dossier, et il ouvrira 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 dans le dossier chrome . 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 Reader View, vous devez cibler tag 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 est sombre * /: root [hasbrowserhandlers = "true"] body.dark {} / * Lorsque le fond clair est sélectionné * /: root [hasbrowserhandlers = "true"] body.light {} / * Quand sépia l'arrière-plan est sélectionné * /: root [hasbrowserhandlers = "true"] body.sepia {} / * Lorsque la police serif est sélectionnée * /: root [hasbrowserhandlers = "true"] body.serif {} / * Lorsque la police sans-serif 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 empattement sont sélectionnés * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia {} 

N'utilisez pas le sélecteur commun :root[hasbrowserhandlers="true"] body pour cibler tous les paramètres à la fois. Cela fonctionnera, mais cela affectera également d'autres pages du navigateur, comme par exemple about:newtab, car leurs éléments racine portent également l'attribut hasbrowserhandlers (utilisé pour marquer les gestionnaires d'événements des pages internes de Firefox, comme par exemple about: 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 d'autres règles de style selon vos goûts.

 / ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif, : root [hasbrowserhandlers = "true"] body.dark.serif # lecteur-domaine {font-family: "courrier nouveau"! important; }: root [hasbrowserhandlers = "true"] body.dark.serif {background-color: # 13131F! important; couleur: # BAE3DB! important; }: root [hasbrowserhandlers = "vrai"] body.dark.serif # lecteur-domaine {police-style: italique! important; }: root [hasbrowserhandlers = "vrai"] body.dark.serif h1, : racine [hasbrowserhandlers = "vrai"] body.dark.serif h2, : racine [hasbrowserhandlers = "vrai"] body.dark.serif h3, : root [hasbrowserhandlers = "true"] body.dark.serif h4, : racine [hasbrowserhandlers = "vrai"] body.dark.serif h5 {couleur: # 06FEB0! important; }: root [hasbrowserhandlers = "true"] body.dark.serif a: lien {couleur: # 83E7FF! important; }: root [hasbrowserhandlers = "true"] body.dark.serif #container {max-largeur: 50em! important; } 

Notez qu'il est nécessaire d'utiliser le mot-clé !important 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 le Reader View). Par conséquent, toute valeur de propriété spécifiée par l'utilisateur sans le mot-clé !important ne fonctionnera pas si une feuille de style spécifiée par l'auteur cible également la même propriété, car elle sera surchargée.

Résultat final

Vous pouvez voir les changements de mon thème Reader View ci-dessous. Utilisez vos propres règles CSS pour personnaliser le design de votre propre vision de lecteur Firefox.

Avant

Après

Si vous voulez approfondir la personnalisation du thème des outils Firefox, consultez mon précédent tutoriel sur la personnalisation du thème Firefox Developer Tools.

Design Beautiful "Bientôt" Page: 37 Modèles et tutoriels

Design Beautiful "Bientôt" Page: 37 Modèles et tutoriels

C'est un fait connu que la page "coming soon" ne porte plus sur l'icône des hommes au travail ou sur le signe de sous-construction . Il agit comme la première et la plus importante impression pour votre visiteur du site et si c'est bien fait. Il peut attirer votre visiteur du site pour vous mettre en signet, s'abonner à votre newsletter, ou même rejoindre votre empire de réseau social.Nous

(Conseils techniques et de conception)

Créez un blog hébergé par GitHub avec Jekyll maintenant

Créez un blog hébergé par GitHub avec Jekyll maintenant

Jekyll est une plate-forme utilisée pour les sites Web statiques qui veulent simplement publier du contenu rapidement . Le plus gros problème avec Jekyll est le recours aux méthodes de ligne de commande . Si vous n'êtes pas favorable au CLI, vous ne prendrez jamais la peine de toucher Jekyll.Heu

(Conseils techniques et de conception)