الخلاصة

  • نشر W3C أول مسودة عمل علنية لـ Resize Observer في 11 فبراير 2020. تراقب الواجهة تغير حجم عنصر معين وتسلّم معلومات القياس إلى دالة استجابة.
  • تشرح مسودة المحررين لدى CSSWG صندوق المحتوى وصندوق الحدود وصندوق المحتوى ببكسلات الجهاز، كما تصف ترتيب الإخطارات خلال العرض وما يحدث للتغيرات التي تبقى بلا تسليم في تلك الدورة.

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

قدمت أول مسودة عمل علنية لـ W3C بتاريخ 11 فبراير 2020 واجهة ResizeObserver لمتابعة تغير حجم عنصر. يسجَّل الهدف باستخدام observe()، وتصل معلومات الحجم إلى دالة الاستجابة عند تغير الصندوق المراقب. يمكن إيقاف مراقبة هدف بـ unobserve() أو إنهاء مجموعة المراقبات بـ disconnect(). يثبت سجل النشر الرسمي لدى W3C تاريخ المسودة الأولى. صار القياس موجهاً إلى القطعة التي عليها أن تتكيف.

بعد وصول القياس الجديد، يستطيع صاحب الرسم تقليل عدد علامات المحور أو نقل المفتاح أو إعادة الرسم. المتصفح يقدم الأبعاد المحسوبة بعد ترتيب الصفحة؛ صاحب الرسم يقرر التصرف المناسب. يظل بوسع الصفحة تحريك شريطها الجانبي من دون معرفة تفاصيل كل رسم تستضيفه.

تشرح مسودة المحررين Resize Observer Module Level 1 لدى CSSWG معنى اختيار المسطرة. content-box يقيس مساحة المحتوى، وborder-box يتناول المساحة مع الحدود، وdevice-pixel-content-box يعبّر عن المحتوى ببكسلات الجهاز قبل تحولات CSS. النص يهتم بالمساحة التي تكتب فيها كلماته، والإطار يهتم بحجمه الخارجي، والرسم على canvas قد يهتم بالبكسلات المتاحة للصورة الواضحة. كل مهمة لها قياس يلائمها.

الصندوق الذي يختاره المؤلف في observe() يحدد أي تغير يثير الإخطار. وتحمل المعلومات المسلّمة حقولاً عن الحجم أيضاً. التفريق بين شرط الإخطار والبيانات التي يمكن قراءتها يساعد في تفسير سبب استدعاء الدالة. وعندما يختفي المكوّن من الصفحة، يمكن إيقاف مراقبته؛ لا داعي لإرسال عامل القياس إلى غرفة أزيلت جدرانها.

قد تتسبب دالة الاستجابة بنفسها في دوامة: ترى البطاقة ضيقة فتوسعها، ثم يصلها حجم جديد فتضيقها، ثم تعود إلى التوسيع. تضع مسودة CSSWG المعالجة ضمن دورة العرض، وتستخدم عمق العناصر للحد من تكرار التسليم في الدورة نفسها. قد تصدر رسالة خطأ عن حلقة تغيير حجم عند بقاء تغيرات بلا تسليم، وتُعالج تلك التغيرات في إطار لاحق. تقع على صاحب المكوّن مسؤولية جعل التعديل يستقر، كأن يغير الرسم داخل المساحة الممنوحة بدلاً من شد جدرانها يميناً ويساراً.

تحمل وثيقة CSSWG تاريخ 22 نوفمبر 2022 وهي مسودة محررين؛ ويسجل W3C أول مسودة علنية في 2020. هذه الوثائق تشرح فكرة دقيقة: المتصفح يقيس الغرفة التي مُنحت لعنصر بعينه، وصانع العنصر يختار ترتيب الأثاث داخلها.