ضاقت النافذة. بدّل CSS ملابسه.

الخلاصة

• نشرت W3C أول مسودة عمل لـ Media Queries في 4 أبريل 2001. كان HTML4 وCSS2 يعرفان أنماطاً عامة مثل screen وprint؛ وأتاحت المسودة أسئلة أدق عن خصائص بيئة العرض.
• ظهرت توصية مرشحة في 8 يوليو 2002، ثم توصية W3C في 19 يونيو 2012. صار العرض والارتفاع واللون شروطاً لاختيار قواعد المظهر للمستند الواحد.

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

شرحت أول مسودة عمل لـ W3C، بتاريخ 4 أبريل 2001 ما كان موجوداً قبل الاستعلامات. يستطيع HTML4 وCSS2 التمييز بين أنواع وسائط مثل screen وprint. هذا نافع لفصل الشاشة عن الورق، لكنه يترك شاشتين مختلفتي السعة تحت لافتة واحدة. أن تسأل الخياط إن كان الثوب لشخص، ثم تنهي القياس عند هذا الحد، طريقة ممتازة لصنع أكمام مضحكة.

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

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

دفعت التوصية المرشحة الصادرة في 8 يوليو 2002 هذا النموذج إلى مرحلة أكثر نضجاً من التقييس والتنفيذ. تسمية «مرشحة» تصف موقع الوثيقة في المسار؛ لا تسجل يوماً صار فيه كل متصفح على الأرض متفقاً مع جاره. جوهر العمل هو جعل اختيار المظهر أدق مع الاحتفاظ بالمحتوى المشترك.

قدمت توصية W3C في 19 يونيو 2012 المرجع النهائي لهذه المرحلة. يمكن جمع نوع وسيط مع صفر أو أكثر من تعبيرات الخصائص. تسرد الوثيقة العرض والارتفاع واللون، وتعرض نطاقات تستخدم min-width وmax-width، إلى جانب شروط لعرض الصفحة المطبوعة. أفضل نقطة انتقال ليست اسم جهاز تتفاخر به الإعلانات؛ إنها اللحظة التي يتوقف فيها ترتيب الأعمدة عن خدمة المقال.

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

تعالج توصية 2012 أيضاً only وnot والخصائص غير المعروفة. وتتوقع من وكلاء المستخدم إعادة تقييم الاستعلامات وترتيب الصفحة بعد تغير البيئة، من دون جعل كل استجابة فورية واجباً مطلقاً. على المحرر أن يضيق النافذة ويفتح عرض الطباعة ويرى النتيجة في المتصفح المقصود. صحة القاعدة وحدها لا تمنع العنوان من الاصطدام بجاره.

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