ألبوم الصور يتوقف بين صورتين. رسم CSS له مواقف واضحة

Summary

• بدأ ألبوم الصور بنقاط توقف، ثم أعاد فريق CSS صياغة المسألة بوصفها محاذاة صورة داخل إطار مرئي. تسجل محاضر 2015 و2016 قرارات تغيير الخصائص والتعامل مع الصور الكبيرة والمواضع غير المرئية أو التي يتعذر الوصول إليها.
• لا تنتهي المهمة عند استقرار الصورة. يحدد نص 2021 أن المتصفح يعود إلى العنصر نفسه إذا تحركت الصفحة وبقي ذلك العنصر موجودًا؛ فموضع القارئة يتبع الصورة بدل أن يعبد إحداثية قديمة.

تضع محررة سلسلة صور صحفية في شريط أفقي. تقلب القارئة الصور بإصبعها، فتتوقف عند الحد بين صورتين. كانت مسودة W3C الأولى في مارس 2015 تقترح نقاط توقف، بعضها على مسافات متكررة وبعضها تقدمه العناصر. لكن الصور لا تتساوى في العرض، وقد يحجب شريط ثابت جزءًا من النافذة. يصبح السؤال: أي جزء من الصورة يجب أن يقابل أي جزء من المساحة المرئية؟ خط على أرض الموقف لا يكفي إن كانت السيارة أطول من المربع المرسوم لها.

تظهر ورشة الإصلاح في محضر اجتماع فريق CSS بتاريخ 2 ديسمبر 2015. قال Matt Rakow إنه يدمج التغييرات الخاصة بالمساحة والمحاذاة. وقرر الفريق استبدال scroll-snap-destination بـscroll-snap-padding، واستبدال scroll-snap-coordinate بـscroll-snap-align ومساحة التقاط، وإضافة كلمات تحدد المحور على الوعاء. أرادت Elika Etemad تسجيل القرارات حتى يعرف المنفذون الوجهة فيما بقيت بعض التفاصيل مفتوحة. لم يعد موضع الوقوف رقمًا منفردًا على الشريط؛ صار علاقة بين الصورة والإطار الذي يراها القارئ من خلاله.

وفي اجتماع سان فرانسيسكو في مايو 2016 واجه الفريق الحالات التي تفسد الرسم المثالي: صورة أكبر من نافذة التمرير، موضع محاذاة يعود إلى عنصر خارج مجال الرؤية، ومساحة توقف لا يمكن الوصول إليها. اتفق على أن يتصرف scroll-snap-align على نحو قريب من بعض قيم موضع الخلفية، وأضاف Etemad وTab Atkins-Bittner إلى المحررين، وغير الاسم المختصر إلى css-scroll-snap. تغيير الاسم يظهر في العنوان؛ أما معالجة المواضع التي لا يراها أحد فهي التي تحدد إن كانت الصفحة نافعة.

تجسدت القسمة في مسودة يونيو 2016. يضبط الوعاء scroll-snap-type، وتحدد كل صورة عبر scroll-snap-align كيف يلتقي طرفها أو مركزها بإطار الالتقاط. تختار المحررة تكوين اللقطة من دون كتابة حسابات سرعة الإصبع. وقدمت المسودة مثال صفحة طويلة يحتاج قارئها إلى الوقوف في وسط قسم؛ هنا تخدم proximity القراءة، بينما يفرض mandatory وقوفًا أشد عند العلامات. لا تحتاج كل صفحة إلى مرشد سياحي يسحبها إلى المعلم التالي.

لدى الإطار والصورة مقبضان مختلفان. شرحت نسخة التوصية المرشحة لعام 2018 أن scroll-padding يضبط المنطقة المثلى داخل الوعاء، بينما scroll-margin يوسع مساحة العنصر المعنية بالمحاذاة. إذا غطى عنوان ثابت أعلى الهاتف جزءًا من الشاشة، تُعدَّل نافذة النظر؛ وإذا احتاجت صورة بعينها متنفسًا حول حافتها، يتغير هامشها. كما تخضع القفزات المبرمجة مثل scrollTo() للالتقاط، فلا يملك زر «الصورة التالية» تصريحًا خاصًا للوقوف بين صورتين.

ثم تتحرك الصفحة بعد أن اختارت القارئة صورة. تظهر صورة أخرى، فتتزحزح العناصر. يقرر نص 2021 أن المتصفح يعيد الالتقاط إلى العنصر نفسه ما دام موضعه لا يزال موجودًا. وإذا كانت عدة عناصر متطابقة الموضع ثم افترقت، يقدم العنصر الذي يحمل التركيز أو صار هدفًا. هذه صيانة لمكان القراءة. ويشرح النص أيضًا أن padding وmargin يفيدان في إحضار عنصر إلى النافذة حتى حين يكون الالتقاط نفسه معطلًا؛ خرجت هندسة الإطار من حدود الألبوم.

يرتب سجل W3C محطات 2015 و2016 و2018 و2021، لكن المعنى يظهر عندما لا تكون الصفحة مثالية: صور متفاوتة، عنوان ثابت، زر يقفز، وصورة تتأخر في التحميل. تحدد المحررة اللقطة التي تستحق الإطار، ويحافظ المتصفح على العنصر الذي اختارته القارئة بعد تغير التخطيط. أما القارئة فتقلب الألبوم؛ لا يلزمها أن تحمل مخطط المواقف.