كيفية تخصيص عرض قارئ Firefox لتحسين القراءة
يعد Reader View ميزة شائعة لمتصفح Firefox يغير المظهر من صفحة ويب ، و يجعلها أكثر قابلية للقراءة بواسطة إزالة الفوضى البصرية مثل الصور والإعلانات والرؤوس والأشرطة الجانبية. عرض القارئ ، على الرغم من أنه غير متوفر ، لجميع الصفحات الرئيسية.
إذا كانت الميزة متوفرة لصفحة معينة ، فستجد الرمز لتمكينها في شكل أ أيقونة كتاب صغير عرض على يمين شريط العنوان.
هناك بعض الخيارات المضمنة التي تسمح للقراء بتخصيص مظهر عرض القارئ. سننظر في هذه الخيارات قبل أن نعرض لك ما يمكنك القيام به لزيادة تخصيص مظهر قارئ العرض. لأغراض العرض التوضيحي ، سأستخدم مقالًا في مقالة ناشيونال جيوغرافيك.
خيارات مسبقة الصنع
يأتي Firefox Reader View مع عدد قليل من خيارات التخصيص المصممة مسبقًا مثل الظلام والضوء والبني الداكن خلفيات, قابل للتعديل أحجام الخطوط, و serif و sans-serif المحارف. يمكنك تخصيص السمة بواسطة تجاوز قواعد CSS من هذه الخيارات الموجودة مسبقا.
أستخدم بشرة داكنة مع خطوط شريفة ، وهذا يعني أنني سأحتاج إلى تجاوز فئات CSS التابعة ، في حالتي .داكن و .الرقيق.
إذا كنت ترغب في تخصيص متغير سمة آخر (skin + font) ، فستحتاج إلى ذلك استخدام محددات CSS المناسبة. يمكنك التحقق من ذلك بمساعدة أدوات مطوري Firefox عن طريق ضرب F12.
قم بإنشاء ملف CSS المخصص
تحتاج إلى إنشاء ملف يسمى userContent.css داخل ال كروم مجلد مجلد ملف تعريف Firefox الخاص بك للقارئ الخاص بك عرض التخصيصات. للعثور على مجلد ملف تعريف Firefox الخاص بك ، اكتب حول: دعم في شريط URL واضغط على Enter.
ستجد نفسك على صفحة تحتوي على البيانات التقنية المتعلقة بتثبيت Firefox. انقر فوق الزر "إظهار المجلد" ، وسيتم فتح مجلد "ملف التعريف" الخاص بك.
إنشاء مجلد يسمى كروم داخل مجلد ملف التعريف الخاص بك (إذا لم يكن لديك بعد) ، وملف يسمى userContent.css داخل ال كروم مجلد. يبدو مسار الملف كما يلي:
… \مظهر\\ الكروم \ 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 المحددة * /: root [hasbrowserhandlers = "true"] body.sans-serif
يمكنك أيضًا الجمع بين الفئات ، لاستهداف مجموعة محددة من الإعدادات.
/ * عند تحديد الخلفية المظلمة وخط serif * /: root [hasbrowserhandlers = "true"] body.dark.serif / * عند تحديد خلفية sepia وخط sans-serif * /: root [hasbrowserhandlers = "true" ] 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 # reader-domain font-family: "courier new"! important؛ : root [hasbrowserhandlers = "true"] body.dark.serif background-color: # 13131F! important؛ اللون: # BAE3DB! : root [hasbrowserhandlers = "true"] body.dark.serif # reader-domain font-style: italic! 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؛
لاحظ أنه من الضروري استخدام !مهم الكلمة الرئيسية في userContent.css لجميع قواعد CSS. يضيف المستعرض قيم الخصائص التي يحددها المستخدم قبل القيم المحددة من قبل المؤلف (مطور صفحة الويب المحددة ، وهنا عرض القارئ). وبالتالي ، أي قيمة الخاصية المحددة من قبل المستخدم دون !مهم لن تعمل الكلمة الرئيسية إذا كانت ورقة أنماط محددة من قِبل المؤلف تستهدف أيضًا نفس الخاصية ، حيث سيتم تجاوزها.
النتيجة النهائية
يمكنك الاطلاع على التغييرات الخاصة بموضوع عرض القارئ الخاص بي أدناه. استخدم قواعد CSS الخاصة بك لتخصيص تصميم عرض القارئ المخصص لمتصفح Firefox.
قبل
بعد
إذا كنت تريد الغوص بشكل أعمق في تخصيص السمة الخاصة بأدوات Firefox ، فراجع البرنامج التعليمي السابق الخاص بي حول تخصيص السمة Firefox Developer Tools.
