Πώς να προσαρμόσετε την προβολή του Firefox Reader για καλύτερη αναγνωσιμότητα
Το Reader View είναι ένα δημοφιλές χαρακτηριστικό του προγράμματος περιήγησης Firefox, ότι αλλάζει την εμφάνιση μιας ιστοσελίδας, και καθιστά πιο ευανάγνωστο με την αφαίρεση της οπτικής ακαταστασίας όπως εικόνες, διαφημίσεις, κεφαλίδες και πλευρικές γραμμές. Ωστόσο, το Reader View δεν είναι διαθέσιμο για όλες τις αρχικές σελίδες.
Εάν η λειτουργία είναι διαθέσιμη για μια συγκεκριμένη σελίδα, θα βρείτε το εικονίδιο για να το ενεργοποιήσετε με τη μορφή α μικρό εικονίδιο βιβλίου που εμφανίζεται στα δεξιά της γραμμής διευθύνσεων.
Υπάρχουν μερικές ενσωματωμένες επιλογές που επιτρέπουν στους αναγνώστες να προσαρμόσουν την εμφάνιση του Προβολή αναγνώστη. Θα εξετάσουμε αυτές τις επιλογές πριν σας δείξουμε τι μπορείτε να κάνετε για να εξατομικεύσετε περαιτέρω την εμφάνιση του Reader View. Για demo σκοπούς, θα χρησιμοποιήσω ένα άρθρο από το άρθρο του National Geographic.
Προκατασκευασμένες επιλογές
Η προβολή του Firefox Reader έρχεται με μερικές προ-δομημένες επιλογές προσαρμογής όπως το σκοτάδι, το φως και η σέπια υπόβαθρα, ευκανόνιστος μέγεθος γραμματοσειράς, και serif και sans-serif γραμματοσειρές. Μπορείτε να προσαρμόσετε το θέμα με παρακάμπτοντας τους κανόνες CSS από αυτές τις προϋπάρχουσες επιλογές.
Χρησιμοποιώ ένα σκούρο δέρμα με γραμματοσειρές serif, και αυτό σημαίνει ότι θα πρέπει να παρακάμψω τις ανήκουσες κλάσεις CSS, στην περίπτωσή μου .σκοτάδι και .ελαφρή γραμμή.
Αν θέλετε να προσαρμόσετε μια άλλη παραλλαγή θεμάτων (skin + font), θα χρειαστεί να το κάνετε χρησιμοποιήστε τους κατάλληλους επιλογείς CSS. Μπορείτε να τα ελέγξετε με τη βοήθεια των Εργαλείων για προγραμματιστές του Firefox πατώντας το F12.
Δημιουργήστε το προσαρμοσμένο αρχείο CSS
Πρέπει να δημιουργήσετε ένα αρχείο που καλείται userContent.css μεσα στην χρώμιο φάκελο του το φάκελο προφίλ Firefox για τις προσαρμογές του Reader View. Για να βρείτε το φάκελο προφίλ Firefox, πληκτρολογήστε σχετικά με: υποστήριξη στη γραμμή URL και πατήστε Enter.
Θα βρεθείτε σε μια σελίδα που περιέχει το τεχνικά δεδομένα σχετικά με την εγκατάσταση του Firefox. Κάντε κλικ στο κουμπί Εμφάνιση φακέλου και θα ανοίξει ο φάκελος Προφίλ.
Δημιουργήστε ένα φάκελο που ονομάζεται χρώμιο μέσα στο φάκελο Προφίλ (αν δεν το έχετε ακόμα) και ένα αρχείο που καλείται userContent.css μεσα στην χρώμιο ντοσιέ. Η διαδρομή του αρχείου φαίνεται ως εξής:
... \ Προφίλ \\ chrome \ userContent.css
Προσθέστε τους Προσαρμοσμένους Κανόνες CSS
Μόλις δημιουργήσετε και ανοίξετε userContent.css σε έναν επεξεργαστή κώδικα, ήρθε η ώρα να προσθέσετε τους κανόνες CSS. Προκειμένου να προσαρμόσετε το σχέδιο του Reader View, πρέπει να το κάνετε στοχεύστε το ετικέτα με τους κατάλληλους επιλογείς.
Μπορείτε να χρησιμοποιήσετε τους ακόλουθους επιλογείς για τις διάφορες προεπιλεγμένες επιλογές:
/ * Όταν είναι επιλεγμένο το ανοιχτό φόντο * /: root [hasbrowserhandlers = "true"] body.light το φόντο είναι επιλεγμένο * /: root [isbrowserhandlers = "true"] body.sepia / * Όταν είναι επιλεγμένη η γραμματοσειρά serif * /: root [hasbrowserhandlers = "true"] body.serif επιλεγμένο * /: root [hasbrowserhandlers = "true"] body.sans-serif
Μπορείτε επίσης να συνδυάσετε τις κλάσεις, για να στοχεύσετε έναν συγκεκριμένο συνδυασμό ρυθμίσεων.
/ * Όταν επιλέγεται η σκούρα φόντο και η γραμματοσειρά serif * /: root [isbrowserhandlers = "true"] body.dark.serif / ] body.sans-serif.sepia
Μη χρησιμοποιεις τον κοινό επιλογέα : root [hasbrowserhandlers = "true"] σώμα να στοχεύσετε όλες τις ρυθμίσεις ταυτόχρονα. Θα λειτουργήσει, αλλά θα το κάνει επηρεάζουν και άλλες σελίδες του προγράμματος περιήγησης, όπως σχετικά με: newtab, καθώς τα ριζικά τους στοιχεία φέρουν επίσης το hasbrowserhandlers (που χρησιμοποιείται για την επισήμανση των χειριστών συμβάντων εσωτερικών σελίδων του Firefox, όπως π.χ. σχετικά με: σελίδες).
Εδώ είναι ο κώδικας που πρόσθεσα στο δικό μου userContent.css. Αλλάξα την οικογένεια των γραμματοσειρών, το στυλ γραμματοσειράς, τα χρώματα και διευρύνθηκε το δοχείο κειμένου. Μπορείτε να χρησιμοποιήσετε οποιονδήποτε άλλο τύπο στυλ σύμφωνα με τη δική σας προτίμηση.
/ ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # αναγνωστικό πεδίο font-family: "courier new"! : root [hasbrowserhandlers = "true"] body.dark.serif χρώμα-φόντο: # 13131F! χρώμα: # BAE3DB! : root [hasbrowserhandlers = "true"] body.dark.serif # αναγνωστικό πεδίο font-style: italic! important; : root [isbrowserhandlers = "true"] body.dark.serif h1,: root [hasbrowserhandlers = "true"] body.dark.serif h2: root [hasbrowserhandlers = "true"] body.dark.serif h4,: root [hasbrowserhandlers = "true"] body.dark.serif h5 χρώμα: # 06FEB0! : root [hasbrowserhandlers = "true"] body.dark.serif α: σύνδεσμος χρώμα: # 83E7FF! : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em!
Σημειώστε ότι είναι απαραίτητο να χρησιμοποιήσετε το !σπουδαίος λέξη-κλειδί σε userContent.css για όλους τους κανόνες CSS. Το πρόγραμμα περιήγησης προσθέτει τιμές ιδιότητας που καθορίζονται από το χρήστη πριν από τις τιμές που καθορίζει ο συντάκτης (ο υπεύθυνος για την ανάπτυξη της συγκεκριμένης ιστοσελίδας, εδώ το Reader View). Ως εκ τούτου, οποιαδήποτε τιμή ιδιότητας που καθορίζεται από το χρήστη χωρίς το !σπουδαίος η λέξη-κλειδί δεν θα λειτουργήσει εάν ένα φύλλο στυλ που έχει οριστεί από τον ίδιο χρήστη έχει ως στόχο την ίδια ιδιότητα, καθώς θα αντικατασταθεί.
Τελικό αποτέλεσμα
Μπορείτε να δείτε τις αλλαγές στο θέμα μου Reader View παρακάτω. Χρησιμοποιήστε τους δικούς σας κανόνες CSS για να προσαρμόσετε το σχέδιο της δικής σας εξατομικευμένης προβολής του Firefox Reader.
Πριν
Μετά
Εάν θέλετε να εμβαθύνετε στην προσαρμογή των θεμάτων των εργαλείων του Firefox, ανατρέξτε στο προηγούμενο φροντιστήριο σχετικά με την προσαρμογή του θέματος των Εργαλείων για Προγραμματιστές του Firefox.
