מחולל סרגלי CSS

פסי גלילה בסגנון כרום, ספארי ו-Edge עם משפחת ::-webkit-scrollbar של אלמנטים פסאודו: כללים נפרדים עבור המסלול, האגודל ומצב הריחוף של האגודל, בתוספת רוחב מדויק לפיקסלים ורדיוס גבול אגודל. פיירפוקס מתעלם מכל זה לחלוטין ובמקום זאת קורא שני מאפיינים סטנדרטיים, רוחב סרגל גלילה וצבע סרגל גלילה, שנכנסו מאוחר יותר למפרט סרגלי הגלילה של CSS. אלה אינם שני דיאלקטים של אותה תכונה - הם שני סטים שונים של תכונות עם תקרות שונות, ורוב מחוללי פסי הגלילה מנפים בשקט את הפער על ידי הצגת תוצאת WebKit בלבד. זה לא.

הגדר את הרוחב, צבע המסלול, צבע האגודל, צבע הריחוף ורדיוס פינת האגודל פעם אחת, והכלי בונה שני קבוצות כללים מאותן כניסות. ה-WebKit בלוק מקיף ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb ומצב ה-:hover שלו לתיבת ההדגמה השמאלית, כך שמה שאתה רואה שם הוא בדיוק מה ש-Chrome, Safari ו-Edge מציגים - המנוע האמיתי של הדפדפן עצמו, לא שכבת-על מדומה. בלוק פיירפוקס מגדיר את רוחב סרגל הגלילה ואת צבע סרגל הגלילה בתיבת ההדגמה הימנית באמצעות המנוע של אותו דפדפן עצמו, וזו הסיבה שהתיבה נראית אחרת רק כאשר הדף הזה פתוח בפועל בפיירפוקס; בדפדפן WebKit הוא מציג שם את פס הגלילה המוגדר כברירת מחדל, והכלי אומר זאת במקום לזייף מראה של Firefox עם פיקסלים שאולים.

מיפוי הרוחב הוא הדוגמה הברורה ביותר לפער: רוחב פס הגלילה של פיירפוקס מקבל רק את מילות המפתח auto, thin או none - אף פעם לא נתון פיקסל מדויק. מחולל זה ממפה את הרוחב שבחרת בכנות (8 פיקסלים ומטה הופך לדק, כל דבר רחב יותר הופך לאוטומטי) ומציג את מילת המפתח המתקבלת ליד הקלט שלך, במקום להמציא תוצאה מזויפת לפיקסלים מושלמת של Firefox שאינה קיימת. לפיירפוקס אין גם דרך להגדיר צבע ריחוף נפרד, רדיוס גבול אגודל עצמאי או צבע מסלול שהוא לא רק הערך השני של צבע פס גלילה - אלה מגבלות קבועות וממשיות של הפלטפורמה, לא השמטות בכלי הזה.

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