CSS Scroll Snap מאפשר לאתרי אינטרנט להצמיד את דף האינטרנט או כל מיכל אחר של גלילה למיקום גלילה ספציפי כאשר המשתמש מבצע פעולת גלילה. תכונה זו הייתה נתמך בכל הדפדפנים המודרניים במשך יותר משנתיים, אבל אתרים רבים שיכולים להפיק ממנו תועלת עדיין לא משתמשים בו.
הצמדת גלילה קשורה כנראה בעיקר לקרוסלות אופקיות (ראה גישת ה-CSS בלבד של כריס) ודפי אינטרנט מסוימים המחולקים לשקופיות במסך מלא. אבל למה לעצור שם? אני מאמין שצילום יכול לשפר את חווית הגלילה בכל דף אינטרנט המציג פריטים ברשת או בעדכון.
לדוגמה, רוב אתרי הקניות מציגים מוצרים ברשת. באופן אידיאלי, המשתמש ירצה לקפוץ בין שורות הרשת במינימום מאמץ. המשתמש יכול ללחוץ מֶרחָב לגלול את הדף בערך במסך אחד (גובה יציאת התצוגה), אך בהתאם לגובה שורות הרשת, מיקום הגלילה בסופו של דבר "לא מסונכרן" עם הרשת, והמשתמש יצטרך להתאים אותו מחדש באופן ידני.
אם נוסיף הצמדת גלילה לדף זה, המשתמש יכול לגלול באופן עקבי לשורה הבאה עם ה- מֶרחָב מקש (לחיצה משמרת + מֶרחָב יגלול לשורה הקודמת). זה די ללא מאמץ.
אני חושב שצילום גלילה יהיה תוספת מבורכת לאתר זה. וזה אפילו לא כל כך מסובך ליישום. קוד ה-CSS שהשתמשתי בו עבור דוגמה זו הוא פשוט יחסית:
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}אינך צריך לחכות אם אתר שאתה מבקר בו באופן קבוע עדיין לא הוסיף צילום גלילה ואתה חושב שזה ישפר את חוויית הגלילה שלך. אתה יכול להוסיף צילומי גלילה בעצמך - עם סגנונות משתמש.
הוספת סגנונות משתמשים לאתרים
בסרטון למעלה תוכלו לראות שבחרתי בקובץ user.css בהעדפות המתקדמות של Safari. קובץ זה הוא גיליון סגנונות משתמש. הוא מכיל סגנונות CSS שכתבתי, מאוחסנים במקומון .css קובץ, ונוספו ל-Safari. "סגנונות משתמש" אלה מוחלים לאחר מכן על כל דף אינטרנט שאני פותח בספארי.
Chrome ו-Firefox אינם מאפשרים למשתמשים לבחור גיליון סגנונות משתמש. Firefox תמך בתכונה דומה שנקראת userContent.css בעבר, אבל תכונה זו הוצאה משימוש ו מושבת כברירת מחדל בשנת 2019. אני ממליץ על הרחבה לדפדפן סטיילוס עבור שני הדפדפנים הללו (ודפדפנים אחרים מבוססי Chromium).
יתרון משמעותי אחד של Stylus הוא שהוא מאפשר לך לכתוב סגנונות משתמשים עבור אתרים וכתובות URL ספציפיות. גיליון סגנונות המשתמש של ספארי חל על כל אתרי האינטרנט, אך ניתן לעקוף זאת, למשל על ידי שימוש בחדש :has() פסאודו-קלאס ל ליצור בוררים התואמים רק אתרים ספציפיים.
מודול CSS Cascading מגדיר א מקור משתמש עבור סגנונות שהמשתמש מוסיף. גיליון סגנונות המשתמש של ספארי שייך למקור זה, אך התוסף Stylus מחדיר סגנונות משתמש ל- Author Origin, שם נמצאים גיליונות הסגנונות של האתר. באופן ספציפי, Stylus מוסיף סגנונות משתמש ישירות לדף באמצעות a <style> אלמנט בסוף <html> מה שהופך אותו ל גיליון סגנונות סופי בעמוד. מבחינה טכנית, זה אומר שסגנונות שנוספו באמצעות Stylus מסווגים כסגנונות מחבר מכיוון שהם לא נמצאים ב-User Origin, אבל אני אמשיך לקרוא להם סגנונות משתמש מכיוון שהמשתמש מוסיף אותם.
עם זאת, כדאי לזכור את ההבחנה הזו מכיוון שהיא משפיעה על המפל. כאשר הספציפיות של הבורר שווה, סגנון משתמש אמיתי חלש יותר מהסגנון של הדף עצמו. זה הופך את סגנונות המשתמש למצוינים מתאים לברירות המחדל של המשתמש. באותם תנאים, סגנון שנוסף דרך Stylus הוא חזק יותר מאשר סגנון העמוד, כך שלא ניתן להשתמש בסטילוס באותה קלות כדי להגדיר ברירות מחדל של משתמשים.
אם נוסיף !important לתערובת, גם סגנונות משתמש אמיתיים וגם סגנונות שנוספו באמצעות Stylus חזקים יותר מהסגנונות של הדף. אז כאשר אתה רוצה לכפות את סגנונות המשתמש שלך באתר, זה לא משנה אם אתה משתמש באפשרות "גיליון סגנון" של Safari או בתוסף Stylus. שֶׁלְךָ !important סגנונות ינצחו כך או כך.
בסעיף הבא, אשתמש בסט של !important סגנונות משתמשים כדי לאכוף צילום גלילה בעמוד ציר הזמן של אתר האינטרנט של טוויטר. המטרה שלי היא להאיץ את תהליך קריאת ציר הזמן שלי בטוויטר על ידי הימנעות ממצבי גלילה מביכים שבהם הציוץ העליון מופיע רק בחלקו על המסך.
גלול לציר הזמן של טוויטר
לאחר כמה ניסויים, הסתפקתי בקוד ה-CSS הבא. הסגנונות האלה עובדים היטב ב-Firefox, אבל נתקלתי בכמה בעיות ב-Chrome וב-Safari. אתאר את הבעיות הללו ביתר פירוט בהמשך המאמר, אך לעת עתה, הבה נתמקד בהתנהגות בפיירפוקס.
html {
scroll-snap-type: y mandatory !important;
}
/* tweets in the timeline are <article> elements */
article {
scroll-snap-align: start !important;
}
/* un-stick the sticky header and make it “snappable” as well */
[aria-label="Home timeline"] > :first-child {
position: static !important;
scroll-snap-align: start !important;
}
/* hide the “new Tweets available” floating toast notification */
[aria-label="New Tweets are available."] {
display: none !important;
}יש צורך להוסיף !important לכל הצהרה מכיוון שכל סגנונות המשתמש חייבים לנצח את הסגנונות של דף האינטרנט שלו כדי שהטמעת הצמדת הגלילה המותאמת אישית שלנו תפעל כהלכה. הלוואי במקום לכתוב שוב ושוב !important, יכולתי פשוט לשים את סגנונות המשתמש שלי ב"שכבה חשובה", אבל תכונת CSS כזו לא קיימת (עדיין).
צפה בסרטון למטה כדי לראות את סגנונות המשתמש שלי ב-Snap Scroll בפעולה. שימו לב איך כל לחיצה על מֶרחָב מקש מגולל את קבוצת הציוצים הבאה לתצוגה, והציוץ הראשון של כל סט מיושר לקצה העליון של נקודת התצוגה. זה מאפשר לי לקרוא את ציר הזמן שלי מהר יותר. כשאני צריך לחזור לסט הקודם של ציוצים, אני יכול ללחוץ משמרת + מֶרחָב.
מה שאני אוהב בסוג זה של הצמדת גלילה זה שהוא מאפשר לי לחזות עד כמה הדף יגלול בכל פעם שאני לוחץ מֶרחָב. כל מרחק גלילה שווה לגבהים המשולבים של הציוצים הגלויים שהם כולם על המסך. במילים אחרות, הציוץ הנראה חלקית בתחתית המסך יעבור לחלק העליון של המסך, וזה בדיוק מה שאני רוצה.
Space יגלול את הציוץ של דייב לראש המסך.כדי לנסות את סגנונות המשתמשים שלי ב-Snap Scroll על ציר הזמן שלך בטוויטר, בצע את השלבים הבאים:
- התקן את הארכת סטיילוס עם תוספות Firefox או חנות האינטרנט של Chrome.
- נווט אל ציר הזמן שלך בטוויטר בכתובת https://twitter.com/home.
- לחץ על סמל הסטיילוס בסרגל הכלים של הדפדפן ולחץ על "כתובת אתר זו" בחלון הקופץ.
- סטיילוס יפתח עורך קוד בלשונית דפדפן חדשה. העתק-הדבק את סגנונות המשתמשים שלי ב-Snap Scroll לתוך העורך ולחץ על הלחצן שמור בסרגל הצד בצד שמאל. הסגנונות יוחלו על ציר הזמן שלך בטוויטר באופן מיידי (אין צורך לטעון מחדש את העמוד).
- אתה יכול לעדכן את הסגנונות בכל עת. לחץ על סמל הסטיילוס ועל סמל העיפרון כדי לפתוח שוב את העורך.
חוסר יכולת לעקוף את ההצמדה
ליישום שלי של צילום גלילה עבור ציר הזמן של טוויטר יש פגם גדול אחד. אם ציוץ גבוה יותר מנקודת התצוגה, אי אפשר לגלול את הדף כדי לחשוף את החלק התחתון של הציוץ (למשל, אם אתה רוצה לעשות לייק או לצייץ מחדש) מכיוון שהדפדפן מצמיד את הדף בכוח כדי להציג את החלק העליון של הציוץ ציוץ (או החלק העליון של הציוץ הבא).
חומרת הבעיה תלויה בתצוגה של המשתמש. הצגת ציר הזמן של טוויטר על צג שולחן עבודה גדול בגורם זום קטן של עמוד, ייתכן שלא תיתקל בציוצים גבוהים יותר מנקודת התצוגה.
שאלתי את קבוצת העבודה של CSS אם ניתן יהיה להוסיף מנגנון המאפשר למשתמש לעשות זאת לעקוף את הצמדת הגלילה החובה של הדפדפן. אני כנראה צריך להזכיר שניתן לפתור את הבעיה הזו, לפחות בתיאוריה, על ידי מעבר מ mandatory ל proximity מצפצף. בדקתי proximity מצלם בכרום ובפיירפוקס, ומצאתי את זה לא עקבי ומבלבל. לעתים קרובות הדפדפן היה מצטלם כשלא ציפיתי לו, ולהיפך. אולי הקוד של טוויטר מפריע ל proximity אלגוריתם, הדפדפנים עדיין קצת בעייתיים, או אולי אני פשוט "גולל את זה לא נכון", אם זה בכלל אפשרי. אני לא יודע.
אבל הסיבה העיקרית שבגללה הלכתי עם mandatory הצילום הוא שרציתי להימנע ממצבים שבהם הציוץ העליון מופיע רק בחלקו על המסך לאחר גלילה. סוג הגלילה המהירה בין סטים של ציוצים שהצגתי בסרטון למעלה אפשרי רק עם mandatory מצפצף.
אם אתה, כמוני, מעדיף mandatory אני יכול להציע את שני הדרכים הבאות לעקיפת הבעיה של "ציוץ גבוה":
- אתה יכול לפתוח את הציוץ בעמוד שלו ולחזור לציר הזמן לאחר מכן.
- אם אתה רוצה רק ללחוץ על כפתורי 'אהבתי' או ציוץ מחדש, אתה יכול משמרת-לחץ על הציוץ כדי לבחור אותו ולאחר מכן לחץ L לאהוב את זה, או T אחריו זן לצייץ מחדש.
בעיות בכרום ובספארי
סגנונות המשתמש שלי ב-Snap Scroll מייצרים התנהגויות צילום גלילה שונות באופן ניכר ב-Chrome, Safari ו-Firefox. ההבדלים הללו הם בחלקם מכיוון שהיישום המדויק של מנגנון ההצמדה הוא נשאר לדפדפן:
מודול CSS Scroll Snap בכוונה אינו מציין ואינו מחייב אנימציות או פיזיקה מדויקות המשמשות לאכיפת עמדות הצמד; זה נשאר בידי סוכן המשתמש.
בגרסה הנוכחית של ספארי יש באג שמונע מהצלקת גלילה לפעול כהלכה על ציר הזמן של טוויטר. יש לי דיווח על הבאג הזה.
ב-Chrome, נתקלתי בבעיות הבאות:
- פעולות הגלילה מחייה באופן לא עקבי. לפעמים האנימציה איטית, לפעמים היא מיידית, ולפעמים היא מתחילה לאט אבל אז היא קצרה. מצאתי את זה מעצבן.
- פעולות הגלילה מונפשות לאט מדי באופן כללי. ביצעתי בדיקה בכרום ובפיירפוקס (20 מֶרחָב לחיצות), ולקח לי 70% יותר זמן לכסות את אותו המרחק בציר הזמן שלי בטוויטר ב-Chrome מאשר ב-Firefox (18.5 שניות ב-Chrome לעומת 11 שניות ב-Firefox).
- כאשר אני גולל באמצעות משטח העקיבה של המחשב הנייד שלי, הדף מהבהב הרבה. כאשר אני מנסה לגלול מהר על ידי לחיצה ממושכת על מֶרחָב מקש, העמוד גולל לאט מאוד ומתנודד. אני חושד ששתי הבעיות נגרמות מאותו אלגוריתם. נראה שכרום מצלם מחדש בקצב גבוה מאוד במקרים אלו. יש לי דיווח על הבאג הזה.
באגים אלה בדפדפן והבדלים בין דפדפנים יכולים להוות בעיה עבור אתרים השוקלים ליישם צילום גלילה. לדוגמה, מפתח אינטרנט עלול להתאפק כי הוא לא אוהב את אופן הפעולה של צילום גלילה בדפדפן מסוים אחד. דפדפנים יכולים להקל על בעיה זו על ידי הפיכתם ליכולת פעולה הדדית יותר. למעשה, Scroll Snap הוא אחד מתחומי המיקוד של הדפדפן הדפדפן מאמץ Interop 2022.
דרך נוספת שניתן לשפר את המצב היא על ידי הצגת מאפייני CSS חדשים שיהפכו את הצמדת גלילה לניתנת להגדרה. זה יכול לכלול את משך ההנפשה של ההצמדה, את אורך סף הקרבה להצמדה ומנגנון לעקוף את ההצמדה החובה.
לצלם או לא להצמיד?
אני משתמש בסגנונות המשתמשים שלי ב-Snap Scroll בציר הזמן של טוויטר כבר כמה שבועות, ואני לא רוצה לחזור אחורה. היכולת לדפדף במהירות בפיד שלי רק עם מֶרחָב המפתח הוא רק ברמה אחרת.
עם זאת, אני רואה בכך תכונה מתקדמת שכנראה לא מתאימה לכולם. יש סיבה למה הפעלתי את זה רק על ציר הזמן (/home נתיב) ולא בשום מקום אחר באתר האינטרנט של טוויטר. Snapping הוא שינוי משמעותי באופן הגלילה של הדף, ולוקח קצת זמן להתרגל אליו. זה יכול לעבוד מצוין עבור מקרה שימוש ספציפי, אבל זה יכול גם להפריע ולתסכל את המשתמש.
לכן, אתרים עם עדכונים צריכים לשקול להציע צילום גלילה רק כתכונה אופציונלית, לאחר בדיקה מדוקדקת והרבה בדיקות בדפדפנים שונים ועם שיטות קלט שונות (עכבר, מקלדת, משטח עקיבה, מסך מגע וכו').
לפני שתלך…
לבסוף, אני ממליץ בחום להתקין ולנסות את הרחבה לדפדפן סטיילוס. למפתחי אינטרנט (או כל מי שמכיר CSS) יש את הכוח לעצב כל אתר בדפדפן שלהם. אתה יכול להחיל שיפורים ותיקונים קלים באתרים המועדפים עליך. אני משתמש בו בעיקר כדי להסתיר רכיבי עמוד שנראים לי מעצבנים, כמו כותרות דביקות, חלונות קופצים של וידאו וספירת הצבעות.
אבל חשוב מכך, Stylus מאפשר לך לבדוק במהירות תכונות CSS חדשות בכל אתר אינטרנט ולדווח על באגים בדפדפן, במידת הצורך. על ידי כך, אתה יכול לעזור להפוך את פלטפורמת האינטרנט קצת יותר טובה.
