דף הבית » שולחן העבודה » כיצד להתאים אישית את פיירפוקס Reader הצג עבור קריאה טובה יותר

    כיצד להתאים אישית את פיירפוקס Reader הצג עבור קריאה טובה יותר

    Reader View הוא תכונה פופולרית של דפדפן פיירפוקס, כי משנה את המראה של דף אינטרנט, ו עושה את זה יותר קריא על ידי הסרת העומס החזותי כגון תמונות, מודעות, כותרות וסרגלי צד. תצוגת קורא היא, עם זאת לא זמינה, עבור כל דפי הבית.

    אם התכונה זמינה עבור דף מסוים, תמצא את הסמל כדי לאפשר את זה בצורה של סמל ספר קטן המוצג מימין לסרגל הכתובות.

    IMAGE: Mozilla.org

    ישנן מספר מובנית אפשרויות המאפשרים לקוראים להתאים את המראה של תצוגת קורא. אנחנו נסתכל על האפשרויות האלה לפני שנראה לך מה אתה יכול לעשות כדי להמשיך ולהתאים אישית את המראה של Reader View. למטרות הדגמה, אשתמש במאמר של נשיונל ג'יאוגרפיק.

    אפשרויות שנבנו מראש

    פיירפוקס Reader View מגיע עם כמה אפשרויות התאמה מראש שנבנו מראש כגון כהה, אור ספיה רקעים, מתכוונן גדלי גופנים, ו serif ו sans-serif גליונות. ניתן להתאים אישית את ערכת הנושא על ידי דוחה את כללי CSS של אופציות קיימות אלה.

    אפשרויות תצוגת ברירת מחדל של קורא

    אני משתמש עור כהה עם גופני serif, וזה אומר שאני צריך לעקוף את השייכות CSS CSS, במקרה שלי .אפל ו .סריף.

    אם אתה רוצה להתאים אישית עוד גרסה אחרת (עור + גופן), תצטרך השתמש בבוררי CSS המתאימים. אתה יכול לבדוק את אלה בעזרת כלי הפיתוח של Firefox על ידי להכות F12.

    יצירת קובץ CSS מותאם אישית

    עליך ליצור קובץ שנקרא userContent.css בתוך ה כרום תיקיית תיקיית הפרופיל שלך ב- Firefox עבור ההתראות האישיות של Reader שלך. כדי לאתר את תיקיית הפרופיל של Firefox, הקלד אודות: תמיכה לשורת הכתובת ולחץ על Enter.

    תמצא את עצמך בדף המכיל את נתונים טכניים הקשורים להתקין את Firefox. לחץ על הלחצן הצג תיקייה, והיא תפתח את תיקיית הפרופיל שלך.

    הלחצן 'תיקיית פרופילים'

    צור תיקייה בשם כרום בתוך תיקיית הפרופיל שלך (אם עדיין אין ברשותך) וקובץ בשם userContent.css בתוך ה כרום תיקייה. נתיב הקובץ נראה כך:

    ... \ פרופילים \\ chrome \ userContent.css 
    הוסף את כללי CSS המותאמים אישית

    לאחר שיצרת ופתח userContent.css בעורך קוד, הגיע הזמן להוסיף את כללי CSS שלך. כדי להתאים אישית את העיצוב של קורא תצוגה, אתה צריך לכו עם הבורר המתאים.

    ניתן להשתמש בבוררים הבאים עבור אפשרויות ברירת המחדל השונות:

     / * כאשר הרקע הכהה נבחר \ /: root [hasbrowserhandlers = "true"] body.dark  / * כאשר הרקע הבהיר נבחר / /: root [hasbrowserhandlers = "true"] body.light  / * כאשר sepia הרקע נבחר \ /: root [hasbrowserhandlers = "true"] body.sepia  / * כאשר גופן serif נבחר * /: root [hasbrowserhandlers = "true"] body.serif  / * כאשר sans-serif font נבחר * /: root [hasbrowserhandlers = "true"] body.sans-serif  

    ניתן גם לשלב את השיעורים, למקד לשילוב מסוים של הגדרות.

     / * כאשר רקע כהה וגופן serif נבחרים * /: שורש [hasbrowserhandlers = "true"] body.dark.serif  / * כאשר רקע גופן ו sans-serif גופן נבחרים * /: root [hasbrowserhandlers = "true" ] body.sans-serif.sepia 

    אל תשתמש בורר משותף : root [hasbrowserhandlers = "true"] הגוף כדי לכוון את כל ההגדרות בבת אחת. זה יעבוד, אבל זה יהיה משפיעים גם על דפי דפדפן אחרים, כמו אודות: newtab, כמו אלמנטים שורש שלהם גם לשאת יש (המשמשת לסימון מטפלי האירועים של דפים פנימיים ב- Firefox, כגון על אודות: עמודים).

    הנה הקוד שהוספתי ל- My userContent.css. שיניתי את משפחת הגופנים, סגנון הגופן, הצבעים והרחיב את מיכל הטקסט. ניתן להשתמש בכל כללי סגנון אחרים בהתאם לטעם שלך.

     / ** userContent.css *************************** /: root [hasbrowserhandlers = "true"] body.dark.serif,: root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-family: "שליח חדש"! חשוב; : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! חשוב; צבע: # BAE3DB! חשוב; : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: italic! חשוב; : root [hasbrowserhandlers = "true"] body.dark.serif h1,: root [hasbrowserhandlers = "true"] body.dark.serif h2,: root [hasbrowserhandlers = "true"] body.dark.serif h3,: שורש [hasbrowserhandlers = "true"] body.dark.serif h4,: root [hasbrowserhandlers = "true"] body.dark.serif h5 color: # 06FEB0! חשוב; : root [hasbrowserhandlers = "true"] body.dark.serif a: link color: # 83E7FF! important; : root [hasbrowserhandlers = "true"] body.dark.serif #container max-width: 50em! חשוב; 

    שים לב כי יש צורך להשתמש !חשוב מילת מפתח ב- userContent.css עבור כל כללי CSS. הדפדפן מוסיף ערכי מאפיינים של המשתמש לפני הערכים שצוין על ידי המחבר (היזם של דף האינטרנט הנתון, כאן Reader View). לפיכך, כל ערך נכס שצוין על ידי המשתמש ללא !חשוב מילת מפתח לא תפעל אם גיליון סגנונות שהוגדר על ידי המחבר גם ממקד לאותו נכס, כיוון שהוא יידרוס.

    תוצאה סופית

    תוכל לראות את השינויים של ערכת הנושא של Reader Reader שלי. השתמש בכללי CSS שלך כדי להתאים אישית את העיצוב של תצוגת ה- Firefox המותאמת אישית שלך.

    לפני

    ברירת המחדל של

    לאחר

    תצוגה מותאמת אישית של

    אם אתה רוצה לצלול עמוק יותר את הנושא התאמה אישית של כלי פיירפוקס, לבדוק את המדריך הקודם שלי על התאמה אישית של ערכת נושא של פיירפוקס כלים.