مولد شريط التمرير CSS

أشرطة التمرير بنمط Chrome وSafari وEdge مع عائلة ::-webkit-scrollbar من العناصر الزائفة: قواعد منفصلة للمسار والإبهام وحالة التمرير للإبهام، بالإضافة إلى عرض دقيق للبكسل ونصف قطر حدود الإبهام. يتجاهل Firefox كل ذلك تمامًا ويقرأ بدلاً من ذلك خاصيتين قياسيتين، عرض شريط التمرير ولون شريط التمرير، اللتين أدخلتا لاحقًا في مواصفات أشرطة التمرير في CSS. هاتان ليستا لهجتين لنفس الميزة - بل هما مجموعتان مختلفتان من الميزات بسقوف مختلفة، ومعظم مولدات شريط التمرير تغطى الفجوة بهدوء من خلال إظهار نتيجة WebKit فقط. هذا لا.

قم بتعيين العرض ولون المسار ولون الإبهام ولون التمرير ونصف قطر زاوية الإبهام مرة واحدة، وتقوم الأداة بإنشاء مجموعتين من القواعد من نفس المدخلات. نطاقات كتلة WebKit ::-webkit-scrollbar، ::-webkit-scrollbar-track، ::-webkit-scrollbar-thumb وحالة :hover إلى المربع التجريبي الأيسر، لذا فإن ما تراه هناك هو بالضبط ما يعرضه Chrome وSafari وEdge - المحرك الحقيقي للمتصفح، وليس تراكبًا مقلدًا. تقوم كتلة Firefox بتعيين عرض شريط التمرير ولون شريط التمرير في المربع التجريبي الأيمن باستخدام المحرك الخاص بالمتصفح نفسه، ولهذا السبب يبدو المربع مختلفًا فقط عندما تكون هذه الصفحة مفتوحة بالفعل في Firefox؛ في متصفح WebKit، يُظهر شريط التمرير الافتراضي الخاص به هناك، والأداة تقول ذلك بدلاً من تزييف مظهر Firefox باستخدام وحدات البكسل المستعارة.

يعد تعيين العرض أوضح مثال على هذه الفجوة: لا يقبل عرض شريط التمرير في Firefox سوى الكلمات الرئيسية تلقائية أو رفيعة أو لا شيء - ولا يقبل أبدًا رقمًا دقيقًا بالبكسل. يقوم هذا المولد بتعيين العرض الذي اخترته بأمانة (يصبح 8 بكسل أو أقل نحيفًا، وأي شيء أوسع يصبح تلقائيًا) ويعرض الكلمة الأساسية الناتجة بجوار مدخلاتك، بدلاً من اختراع نتيجة فايرفوكس زائفة مثالية للبكسل وغير موجودة. ليس لدى Firefox أيضًا طريقة لتعيين لون تمرير منفصل، أو نصف قطر حد مستقل للإبهام، أو لون مسار لا يمثل ببساطة القيمة الثانية للون شريط التمرير - فهذه قيود دائمة وحقيقية للنظام الأساسي، وليست إغفالات في هذه الأداة.

انسخ كتلة CSS المدمجة وستنتقل مجموعتا القواعد معًا، كل واحدة تحت تعليقها الخاص، وتكون جاهزة للصقه في ورقة الأنماط كما هي. يتم عرض كل شيء وتحديثه في متصفحك أثناء سحب عناصر التحكم - لا يوجد تحميل، ولا حساب، ولا يوجد خادم ذهابًا وإيابًا، ويستمر العمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.