עיצוב פסי הגלילה (Scrollbars) של הדפדפן נראה כפופולרי לאחרונה ואני נתקל בלא מעט אתרים המעצבים זה בצורה שונה, כזו המתאימה לעיצוב הכללי ולמיתוג האתר שלהם.
ישנם מספר דרכים לעצב פסי גלילה אלו, ובפוסט זה נראה כיצד לעשות זאת באמצעות CSS3. ואם אתם חדשים בעולם, דעו כי עוד מתחילתו של האינטרנט שינוי הנראות של פסי הגלילה היה משימה לא פשוטה, בטח עם הצורך בקונסיסטנטיות בדפדפנים השונים.
אך לשמחתנו בספטמבר 2018 שוחררה טיוטה של W3C הנקראית CSS Scrollbars והיא נראית כדרך מעשית וטובה להשיג זאת.
עיצוב פסי הגלילה בדפדפן יכולה להיות בעלת ערך לקשר עם מיתוג החברה או העסק, תנו מבט ב Scrollbars של עמוד זה וראו על מה אני מדבר – זוהי דוגמה לאיך שפסי הגלילה יכולים להראות.
אגב, במהלך השנים הופיעו המון דרכים לעשות זאת ו Internet Explorer הייתה הראשונה לספק CSS API עבור עיצוב פסי גלילה. אך מפתחים רבים היו מתוסכלים בחיפוש אחר פתרון כולל ולבסוף יצרו פתרונות Javascript שונים.
Fast Forward לימינו, ועכשיו כש- Internet Explorer מתחלפת לאיטה ל Microsoft Edge על מנוע של כרום, האפשרויות לעיצוב פסי הגלילה מצמצמות לשתי גישות CSS:
- Chrome/Edge/Safari – על ידי שימוש ב
-webkit-scrollbar - Firefox – עושה שימוש ב CSS Scrollbars API החדש (
scrollbar-colorוscrollbar-width).
בואו נראה מספר דוגמאות…
פסי גלילה ב Chrome/Edge/Safari
עיצוב פסי הגלילה בדפדפנים אלו אפשרי עם שימוש ב vendor prefix הנקרא -webkit-scrollbar:
body::-webkit-scrollbar {
width: 12px; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
background: #fbfaf8; /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
background-color: #2d2d2d; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid #fbfaf8; /* creates padding around scroll thumb */
}אך ישנן חדשות טובות וחדשות רעות… החדשות הטובות הן שהקוד יעבוד מצויין בגירסאות האחרונות של Chrome/Edge/Safari. החדשות הרעות הן שספסיפיקציות אלו ננטשו לאחרונה על ידי W3C וניתן לצפות כי אלו יפסיקו לעבוד בשנים הקרובות.
פסי גלילה ב Firefox
פיירפוקס ידועים כאלו הראשונים לאמץ את הסטנדרטים של W3C. כעת, הפיצ׳רים החדשים של CSS Scrollbars כבר קיימים בגירסאות Firefox:
body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: #2d2d2d #fbfaf8; /* scroll thumb & track */
}תענוג! כנראה ושמתם לב למספר הבדלים ביחס לשימוש בספסיפקציה של -webkit-scrollbar הננטשת. הראשון הוא שזה הרבה יותר תמציתי ונעים לעין. השני הוא שאין אפשרות ליצור padding ו border-radius עבור ה "track thumb". עם זאת, פיצ׳רים אלו לבטח יתווספו בעתיד הלא רחוק…
אז במה עלינו להשתמש?
אז מה בעצם עלינו לעשות כשאין API יחיד בוא כל הדפדפנים משתמשים? פשוט משלבים את שתי הגישות שהזכרנו:
/* The emerging W3C standard
that is currently Firefox-only */
* {
scrollbar-width: thin;
scrollbar-color: #2d2d2d #fbfaf8;
}
/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: #fbfaf8;
}
*::-webkit-scrollbar-thumb {
background-color: #2d2d2d;
border-radius: 20px;
border: 3px solid #fbfaf8;
}עם קוד זה, ברגע ש -webkit-scrollbar כבר לא יהיה זמין, תהיה כבר עתודה (fallback) לסטנדרט החדש של CSS Scrollbars כך שאין מה לדאוג. אתם מוזמנים לבדוק את הפוסט בדפדפנים השונים (בגירסתם האחרונה) ולראות את התוצאה…
ומה עם העיצוב של פס הגלילה במובייל?
זו שאלה טובה עמנואל 🙂 לא בדקתי לעומק, אך לא נראה לי שזה רלוונטי למובייל..