מחולל CSS לפסי גלילה
עצבו רוחב, רקע, אגודל וצבע ריחוף של פס גלילה, וראו את התוצאה האמיתית ב-WebKit לצד התוצאה האמיתית בפיירפוקס — שתי מערכות דפדפן שונות באמת, זו לצד זו.
🔒 מעובד כולו בדפדפן שלך - שום דבר שתזין כאן לא יועלה לעולם.
תוצאה
כרום, ספארי ואדג׳ מעצבים פסי גלילה בעזרת משפחת הפסוידו-אלמנטים ::-webkit-scrollbar: חוקים נפרדים לרקע, לאגודל ולמצב הריחוף של האגודל, בתוספת רוחב מדויק בפיקסלים ועיגול פינות של האגודל. פיירפוקס מתעלם מכל אלה לחלוטין ובמקום זאת קורא שני מאפיינים תקניים, scrollbar-width ו-scrollbar-color, שנכנסו מאוחר יותר למפרט CSS Scrollbars. לא מדובר בשני ניבים של אותה יכולת — מדובר בשתי מערכות יכולות שונות, בעלות תקרות שונות, ורוב מחוללי פסי הגלילה מטשטשים את הפער בשקט כשהם מציגים רק את התוצאה של WebKit. הכלי הזה לא.
הגדירו פעם אחת את הרוחב, צבע הרקע, צבע האגודל, צבע הריחוף ורדיוס פינות האגודל, והכלי בונה משני הקלטים שני מערכי חוקים. גוש ה-WebKit תוחם את ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb ומצב ה-:hover שלו לתיבת התצוגה השמאלית, כך שמה שאתם רואים שם הוא בדיוק מה שכרום, ספארי ואדג׳ מציגים — המנוע האמיתי של הדפדפן, לא שכבת הדמיה. גוש פיירפוקס מגדיר scrollbar-width ו-scrollbar-color על תיבת התצוגה הימנית בעזרת המנוע האמיתי של אותו דפדפן, וזו הסיבה לכך שהתיבה נראית שונה רק כשהדף הזה פתוח באמת בפיירפוקס; בדפדפן WebKit היא תציג שם את ברירת המחדל שלה, והכלי אומר זאת במקום לזייף מראה של פיירפוקס בעזרת פיקסלים מושאלים.
מיפוי הרוחב הוא הדוגמה הברורה ביותר לפער: scrollbar-width של פיירפוקס מקבל רק את מילות המפתח auto, thin או none — לעולם לא ערך מדויק בפיקסלים. המחולל הזה ממפה את הרוחב שבחרתם בכנות (8px ומטה הופך ל-thin, כל דבר רחב יותר הופך ל-auto) ומציג את מילת המפתח המתקבלת לצד הקלט שלכם, במקום להמציא תוצאה מזויפת מדויקת-פיקסלים לפיירפוקס שאינה קיימת. לפיירפוקס גם אין דרך להגדיר צבע ריחוף נפרד, רדיוס פינות עצמאי לאגודל, או צבע רקע שאינו פשוט הערך השני של scrollbar-color — אלה מגבלות אמיתיות וקבועות של הפלטפורמה, לא השמטות של הכלי.
העתיקו את גוש ה-CSS המשולב ושני מערכי החוקים עוברים יחד, כל אחד תחת הערה משלו, מוכנים להדבקה בגיליון הסגנון כמות שהם. הכל רץ ומתעדכן בדפדפן שלכם תוך כדי גרירת הפקדים — בלי העלאה לשרת, בלי חשבון, בלי סבבי תקשורת מול שרת, וממשיך לעבוד גם במצב לא מחובר ברגע שהדף נטען.