CSS التمرير المفاجئة يتيح لمواقع الويب التقاط صفحة الويب أو أي حاوية تمرير أخرى إلى موضع تمرير محدد عندما يقوم المستخدم بعملية تمرير. كانت هذه الميزة مدعومة في جميع المتصفحات الحديثة لأكثر من عامين ، لكن العديد من المواقع التي يمكن أن تستفيد منه ما زالت لا تستخدمها.
من المحتمل أن يكون التقاط التمرير مرتبطًا بالدوائر الأفقية (انظر نهج كريس الوحيد في 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. ثم يتم تطبيق "أنماط المستخدم" هذه على كل صفحة ويب أقوم بفتحها في Safari.
لا يسمح Chrome و Firefox للمستخدمين بتحديد ورقة أنماط مستخدم. دعم Firefox ميزة مماثلة تسمى userContent.css في الماضي ، ولكن تم إيقاف هذه الميزة و معطل بشكل افتراضي في عام 2019. أوصي بـ ملحق متصفح القلم لهذين المستعرضين (والمتصفحات الأخرى المستندة إلى Chromium).
تتمثل إحدى الميزات المهمة لبرنامج Stylus في أنه يسمح لك بكتابة أنماط المستخدم لمواقع وعناوين URL محددة. تنطبق ورقة أنماط مستخدم Safari على جميع مواقع الويب ، ولكن يمكن حلها ، على سبيل المثال ، باستخدام الجديد :has() من الدرجة الزائفة إلى إنشاء محددات تتطابق فقط مع مواقع ويب معينة.
تحدد وحدة CSS Cascading ملف أصل المستخدم للأنماط التي يضيفها المستخدم. تنتمي ورقة أنماط مستخدم Safari إلى هذا الأصل ، لكن امتداد Stylus يضخ أنماط المستخدم في أصل المؤلف ، حيث توجد أوراق أنماط موقع الويب. على وجه التحديد ، يقوم Stylus بإدراج أنماط المستخدم مباشرة في الصفحة عبر ملف <style> عنصر في نهاية <html> مما يجعلها ورقة الأنماط النهائية على الصفحة. من الناحية الفنية ، هذا يعني أن الأنماط المضافة عبر Stylus يتم تصنيفها على أنها أنماط مؤلف نظرًا لأنها ليست في User Origin ، لكنني سأستمر في تسميتها أنماط المستخدم لأن المستخدم يضيفها.
ومع ذلك ، يجدر وضع هذا التمييز في الاعتبار لأنه يؤثر على التتالي. عندما تكون خصوصية المحدد متساوية ، يكون نمط المستخدم الحقيقي أضعف من نمط الصفحة. هذا يجعل أنماط المستخدم ممتازة مناسب للإعدادات الافتراضية للمستخدم. في ظل نفس الظروف ، يكون النمط المضاف عبر القلم هو أقوى من نمط الصفحة ، لذلك لا يمكن استخدام Stylus بسهولة لتعريف الإعدادات الافتراضية للمستخدم.
إذا أضفنا !important إلى هذا المزيج ، تعتبر أنماط وأنماط المستخدم الحقيقي المضافة عبر Stylus أقوى من أنماط الصفحة. لذلك عندما تريد فرض أنماط المستخدم الخاصة بك على موقع ويب ، لا يهم إذا كنت تستخدم خيار "ورقة الأنماط" في Safari أو امتداد Stylus. لك !important ستفوز الأنماط في كلتا الحالتين.
في القسم التالي ، سأستخدم مجموعة من !important أنماط المستخدم لفرض التقاط التمرير على صفحة المخطط الزمني لموقع Twitter على الويب. هدفي هو تسريع عملية قراءة الجدول الزمني الخاص بي على Twitter من خلال تجنب مواضع التمرير المحرجة حيث تظهر أعلى التغريدات جزئيًا فقط على الشاشة.
قم بالتمرير الخاطف للحصول على الجدول الزمني لتويتر
بعد بعض التجارب ، استقرت على كود CSS التالي. تعمل هذه الأنماط بشكل جيد في Firefox ، لكنني واجهت بعض المشكلات في Chrome و Safari. سأصف هذه المشكلات بمزيد من التفصيل لاحقًا في المقالة ، ولكن في الوقت الحالي ، دعنا نركز على السلوك في Firefox.
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 غير موجودة (بعد).
شاهد الفيديو أدناه لمشاهدة أنماط مستخدم التمرير المفاجئة أثناء العمل. لاحظ كيف أن كل ضغطة على ملف الفضاء يقوم المفتاح بتمرير المجموعة التالية من التغريدات في العرض ، ويتم محاذاة أول تغريدة من كل مجموعة إلى الحافة العلوية لإطار العرض. هذا يسمح لي بقراءة الجدول الزمني الخاص بي بسرعة أكبر. عندما أحتاج إلى العودة إلى مجموعة التغريدات السابقة ، يمكنني الضغط تغير + الفضاء.
ما يعجبني في هذا النوع من التمرير هو أنه يسمح لي بالتنبؤ إلى أي مدى ستنتقل الصفحة كلما ضغطت الفضاء. كل مسافة تمرير تساوي الارتفاعات المجمعة للتغريدات المرئية الموجودة بالكامل على الشاشة. بمعنى آخر ، ستنتقل التغريدة المرئية جزئيًا في أسفل الشاشة إلى أعلى الشاشة ، وهذا بالضبط ما أريده.
Space سوف يقوم بتمرير تغريدة ديف إلى أعلى الشاشة.لتجربة أنماط مستخدم التمرير المفاجئة الخاصة بي على مخطط Twitter الزمني الخاص بك ، اتبع الخطوات التالية:
- تثبيت تمديد القلم مع إضافات Firefox أو سوق Chrome الإلكتروني.
- انتقل إلى مخطط Twitter الزمني الخاص بك على https://twitter.com/home.
- انقر فوق رمز Stylus في شريط أدوات المتصفح وانقر فوق "عنوان URL هذا" في النافذة المنبثقة.
- سيفتح Stylus محرر كود في علامة تبويب متصفح جديدة. انسخ والصق أنماط مستخدم التمرير المفاجئة الخاصة بي في المحرر واضغط على الزر حفظ في الشريط الجانبي على اليسار. سيتم تطبيق الأنماط على مخطط تويتر الزمني الخاص بك على الفور (لا داعي لإعادة تحميل الصفحة).
- يمكنك تحديث الأنماط في أي وقت. انقر فوق رمز القلم ورمز القلم الرصاص لفتح المحرر مرة أخرى.
عدم القدرة على تجاوز العض
تنفيذي لالتقاط التمرير للخط الزمني لتويتر به عيب رئيسي واحد. إذا كانت إحدى التغريدات أطول من إطار العرض ، فمن المستحيل تمرير الصفحة للكشف عن الجزء السفلي من تلك التغريدة (على سبيل المثال ، إذا كنت تريد الإعجاب بهذه التغريدة أو إعادة تغريدها) لأن المتصفح يستقطب الصفحة بقوة لإظهار الجزء العلوي من غرد (أو أعلى التغريدة التالية).
تعتمد خطورة هذه المشكلة على عرض المستخدم. عند عرض الجدول الزمني لتويتر على شاشة سطح مكتب كبيرة بعامل تكبير صغير للصفحة ، قد لا تصادف أي تغريدات أطول من إطار العرض.
لقد سألت مجموعة عمل CSS عما إذا كان من الممكن إضافة آلية تسمح للمستخدم بذلك تجاوز التقاط التمرير الإلزامي للمتصفح. ربما ينبغي أن أذكر أنه يمكن ، على الأقل من الناحية النظرية ، حل هذه المشكلة عن طريق التبديل من mandatory إلى proximity العض. لقد اختبرت proximity في Chrome و Firefox ، ووجدته غير متسق ومربك. غالبًا ما ينقطع المتصفح عندما لا أتوقع ذلك ، والعكس صحيح. ربما يتداخل كود Twitter مع ملف proximity الخوارزمية ، فالمتصفحات لا تزال مليئة بالأخطاء ، أو ربما أنا فقط "أتصفحها بشكل خاطئ" ، إذا كان ذلك ممكنًا. لا أعلم.
لكن السبب الرئيسي وراء ذهابي mandatory الانجذاب هو أنني أردت تجنب المواقف التي تظهر فيها أعلى التغريدات جزئيًا فقط على الشاشة بعد التمرير. نوع التمرير السريع بين مجموعات التغريدات التي أظهرتها في الفيديو أعلاه ممكن فقط مع mandatory العض.
إذا كنت ، مثلي ، تفضل mandatory عند الانطباق ، يمكنني اقتراح الحللين التاليين لمشكلة "التغريدة الطويلة":
- يمكنك فتح التغريدة على صفحتها الخاصة والعودة إلى الجدول الزمني بعد ذلك.
- إذا كنت تريد فقط النقر فوق الزر "أعجبني" أو "إعادة التغريد" ، فيمكنك ذلك تغير-اضغط على التغريدة لتحديدها ثم اضغط L يعجبك ، أو T تليها أدخل لإعادة تغريدها.
مشاكل في Chrome و Safari
تنتج أنماط مستخدم التمرير المفاجئة الخاصة بي سلوكيات مختلفة بشكل ملحوظ في التقاط التمرير في Chrome و Safari و Firefox. هذه الاختلافات هي جزئيًا لأن التنفيذ الدقيق لآلية الانجذاب هو تركت حتى المتصفح:
لا تحدد وحدة CSS Scroll Snap عن قصد ولا تفرض أي رسوم متحركة أو فيزياء دقيقة تُستخدم لفرض المواضع المفاجئة ؛ هذا متروك لوكيل المستخدم.
يحتوي الإصدار الحالي من Safari على خطأ يمنع التمرير المفاجئ من العمل بشكل صحيح على مخطط Twitter الزمني. أملك أبلغ عن هذا الخطأ.
في Chrome ، واجهت المشكلات التالية:
- يتم تحريك عمليات التمرير بشكل غير متسق. أحيانًا تكون الرسوم المتحركة بطيئة ، وأحيانًا تكون فورية ، وأحيانًا تبدأ بطيئة ولكنها تختصر بعد ذلك. لقد وجدت هذا مزعجًا.
- تتحرك عمليات التمرير ببطء شديد بشكل عام. لقد أجريت اختبارًا في Chrome و Firefox (20 الفضاء بالضغط) ، واستغرق الأمر 70٪ من الوقت لقطع نفس المسافة على جدول Twitter الزمني الخاص بي في Chrome مقارنةً بمتصفح Firefox (18.5 ثانية في Chrome مقابل 11 ثانية في Firefox).
- عندما أقوم بالتمرير باستخدام لوحة التتبع بجهاز الكمبيوتر المحمول ، تومض الصفحة كثيرًا. عندما أحاول التمرير بسرعة عن طريق الضغط باستمرار على ملف الفضاء المفتاح ، يتم تمرير الصفحة ببطء شديد وتتأرجح. أظن أن كلا المشكلتين ناتجة عن نفس الخوارزمية. يبدو أن Chrome يعيد اللقطات بمعدل مرتفع جدًا في هذه الحالات. أملك أبلغ عن هذا الخطأ.
يمكن أن تكون أخطاء المتصفح والاختلافات بين المتصفحات مشكلة لمواقع الويب التي تفكر في تنفيذ التقاط التمرير. على سبيل المثال ، قد يتراجع مطور الويب لأنهم لا يحبون سلوك التقاط التمرير في متصفح معين. يمكن للمتصفحات التخفيف من هذه المشكلة عن طريق أن تصبح أكثر قابلية للتشغيل البيني. في الواقع ، يعد Scroll Snap أحد مجالات التركيز في المستعرض المتقاطع جهد Interop 2022.
هناك طريقة أخرى يمكن من خلالها تحسين الموقف وهي تقديم خصائص CSS جديدة تجعل التقاط التمرير أكثر قابلية للتكوين. يمكن أن يشمل ذلك مدة حركة الانطباق ، وطول حد التقارب للالتقاط ، وآلية لتجاوز الانطباق الإلزامي.
لمفاجئة أو لا المفاجئة؟
لقد كنت أستخدم أنماط مستخدم التمرير المفاجئة الخاصة بي على الجدول الزمني لتويتر لبضعة أسابيع ، ولا أريد العودة. القدرة على التقليب بسرعة من خلال خلاصتي فقط باستخدام ملف الفضاء المفتاح هو فقط على مستوى آخر.
ومع ذلك ، أنا أعتبر هذه ميزة متقدمة ربما لا تكون مناسبة للجميع. هناك سبب لتمكينني من تمكينه فقط على المخطط الزمني (/home path) وليس في أي مكان آخر على موقع Twitter. يعد الالتقاط تغييرًا مهمًا في كيفية تمرير الصفحة ، ويستغرق التعود عليه بعض الوقت. يمكن أن يعمل بشكل رائع لحالة استخدام معينة ، ولكن يمكن أيضًا أن يعيق الطريق ويحبط المستخدم.
لذلك يجب أن تفكر مواقع الويب التي تحتوي على موجز ويب في تقديم ميزة التقاط التمرير فقط كميزة اختيارية ، بعد دراسة متأنية والكثير من الاختبارات في متصفحات مختلفة وباستخدام طرق إدخال مختلفة (الماوس ولوحة المفاتيح ولوحة التتبع وشاشة اللمس وما إلى ذلك).
قبل ان تذهب…
أخيرًا ، أوصي بشدة بتثبيت وتجريب برنامج ملحق متصفح القلم. يتمتع مطورو الويب (أو أي شخص يعرف CSS) بالقدرة على تصميم أي موقع ويب في متصفحهم. يمكنك تطبيق تحسينات وإصلاحات طفيفة على مواقع الويب المفضلة لديك. أستخدمه في الغالب لإخفاء عناصر الصفحة التي أجدها مزعجة ، مثل الرؤوس الثابتة ، والنوافذ المنبثقة للفيديو ، وعدد الأصوات.
ولكن الأهم من ذلك ، أن Stylus يسمح لك باختبار ميزات CSS الجديدة بسرعة على أي موقع ويب والإبلاغ عن أخطاء المتصفح ، إذا لزم الأمر. من خلال القيام بذلك ، يمكنك المساعدة في تحسين النظام الأساسي للويب قليلاً.
