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

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

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

تخطيط العرض هو أوضح مثال على الفجوة: scrollbar-width في Firefox يقبل فقط الكلمات المفتاحية auto، thin أو none — ولا يقبل رقمًا دقيقًا بالبكسل أبدًا. يخطّط هذا المولّد عرضك المختار بأمانة (8px فأقل يصبح thin، وأي عرض أوسع يصبح auto) ويعرض الكلمة المفتاحية الناتجة بجانب مدخلك، بدلًا من اختراع نتيجة وهمية دقيقة البكسل لـ Firefox لا وجود لها. كما لا يملك Firefox طريقة لتعيين لون تمرير منفصل، أو نصف قطر حدود مستقل للإبهام، أو لون مسار ليس ببساطة القيمة الثانية لـ scrollbar-color — هذه قيود حقيقية دائمة للمنصة، لا سهو في هذه الأداة.

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