متوفر أيضًا بلغات أخرى: English · Español · Português · Français
مولّد استعلامات الوسائط: نقاط توقف لا تتداخل
ولّد نقاط التوقف بأربع صيغ، وانظر المجال الذي تتركه كل صيغة دون تغطية بالضبط.
ما نقطة التوقف في استعلامات الوسائط؟
نقطة التوقف هي عرض النافذة الذي يتغيّر عنده التخطيط. وتُعبَّر عنها في CSS باستعلام وسائط، وغالبًا باستعلامين اثنين — واحد للحالة الضيقة وآخر للواسعة — ويقوم التصميم المتجاوب كله على أن يقتسم هذان الاستعلامان محور العروض اقتسامًا نظيفًا.
وهما لا يقتسمانه. فمواصفة Media Queries المستوى الرابع تعرّف البادئتين تعريفًا محدَّدًا: البادئة min- هي عين المعامل >= والبادئة max- هي عين <=. وكلتاهما تشمل القيمة التي كتبتها. فـ(max-width: 600px) و(min-width: 600px) صحيحتان معًا عند 600 بكسل بالضبط، ويحسم المتصفح ذلك بتطبيق القاعدة المتأخرة — في صمت، وباختلاف تبعًا لترتيب ورقة أنماطك.
وهذا المولّد يأخذ قائمة نقاط توقف ويكتب الاستعلامات بأربع صيغ، مبيّنًا في كل صيغة هل الحدّ مضبوط أم متداخل أم يترك فجوة — وإن ترك فجوة، فما المجال الدقيق من العروض الذي لا يحقّق أيًّا من الاستعلامين.
طريقة الاستعمال
- اكتب نقاط التوقف مفصولة بفواصل أو مسافات. الرقم المجرّد يأخذ الوحدة المختارة بجانب الحقل؛ واكتب 40rem لتغييرها في قيمة بعينها. وأزرار الأمثلة تُحمّل نقاط Bootstrap ونقاط Tailwind والصيغتين المضبوطتين.
- اختر كيف يُكتب الاستعلام الواقع دون نقطة التوقف. أربعة خيارات: صيغة المدى، وصيغة النفي، وطرح 0.02، وطرح وحدة كاملة. ويتحدّث الجدول أسفلها بما تفعله كل صيغة عند الحدّ، وتذكر الملاحظة فوقه أي أداة حقيقية اتخذت ذلك الاختيار.
- تحقّق من اللوحة الأخيرة في متصفحك أنت. فهي تُمرّر الاستعلامات المولَّدة إلى matchMedia وتعرض حيًّا ما تجيب به نافذتك. كبّر الصفحة فتتحرك الأرقام: والتكبير أسهل وسيلة لتحصل على عرض كسري، وهو تحديدًا ما ينفلت من نقطة توقف مطروح منها فرق.
لماذا لا يمكن أن تكون نقطة التوقف المطروح منها فرق صحيحة
لما كانت min- هي >= وكانت max- هي <=، فالاستعلامان اللذان يكتبهما المرء حول نقطة توقف هما نصفا مستقيم مغلقان. ونصفا مستقيم مغلقان لا يمكن أن يقتسما مستقيمًا. فإما أن يشتركا في طرفهما، فيحقّق عرضٌ ما كليهما، وإما أن تباعد بينهما، فيبقى بينهما مجال مفتوح لا يحقّق أيًّا منهما. لا حالة ثالثة، ولا اختيار للقيم ينجو من ذلك.
والمواصفة نفسها تقول هذا، وهي صريحة على غير عادتها في وصف العلاج. فملاحظتها ترصد أن المؤلفين يزيحون قيمهم كي لا يصحّ الاستعلامان معًا، ثم تنبّه إلى أن اقتران 320 بـ321 «لا يأخذ في الحسبان إمكان أن تكون أعراض النوافذ كسرية»، وتصف النسخة المحسَّنة بـ320.01 بكسل بأنها «تقلّل إلى حدٍّ بعيد احتمال أن ينفلت عرضُ جهازٍ من الشقّ». وهذا احتمال، بلفظ المعيار ذاته، لا حلّ.
والصيغ الأربع هنا هي الأجوبة الأربعة الواقعية، وكل مقاس فجوة مقيسٌ من أثرٍ منشور لا مأخوذ من توثيق. فورقة أنماط Bootstrap 5.3.3 تقرن (min-width: 576px) بـ(max-width: 575.98px): فجوة مقدارها 0.02 بكسل. وأما postcss-media-minmax، وهو المحوّل المعتمد من صيغة المدى إلى البادئات القديمة، فيحوّل (width < 600px) إلى (max-width: 599px) — فجوة ببكسل كامل — والفرق عنده ليس ثابتًا أصلًا: أعطه 37.5rem فيطرح جزءًا من ألف بدل وحدة كاملة.
الصيغتان المضبوطتان، وما الذي يفرّق بينهما
صيغة المدى تُصلح الأمر إصلاحًا حقيقيًا، لأن فيها مقارنات صارمة تنقص البادئات. فـ(width < 600px) إلى جانب (width >= 600px) تغطّي كل عرض مرة واحدة بالضبط، بما في ذلك عرض 600. وهذا ما يُخرجه Tailwind v4: فصيغته md: تُترجم إلى (width >= 48rem) وصيغته max-md: إلى (width < 48rem).
وثمة صيغة مضبوطة ثانية، وهي أقدم من الأولى. فنفي استعلام شامل يعطي استعلامًا صارمًا: not all and (min-width: 600px) صحيحة تحديدًا حين يكون العرض دون 600، وهذه الصيغة صالحة منذ Media Queries 3، فتصل إلى متصفحات لم تعرف صيغة المدى قط. ومحسّن Tailwind يعيد كتابة استعلامات المدى إلى هذه الصيغة بعينها، وLightning CSS يفعل مثله — ولهذا يبدو CSS المبني المتداول وكأنه يستعمل البادئات الشاملة القديمة بينما الاستعلام الأدنى في حقيقته نفي.
على أن الصيغتين ليستا بديلتين إحداهما عن الأخرى، ولا يذكر ذلك أي محوّل. فالقسم 2.4 من المواصفة نفسها يقول إن الخاصية التي تسمّي مفهومًا لا وجود له في الجهاز «يجب أن تُقيَّم دائمًا بأنها خطأ». ومتصفح النطق لا عرض له، فـ(width < 600px) خطأ عنده، بينما not all and (min-width: 600px) تنفي خطأً فتخرج صحيحة. تتفقان في كل وسيط بصري وتختلفان في سواه.
حدود معلنة
الفجوة التي يتركها الطرح حقيقية لكنها ضيقة، وعلى شاشة يكون فيها كل عرض نافذة عددًا صحيحًا من بكسلات CSS لن تقع فيها أبدًا. والذي يُنتج العروض الكسرية هو تكبير المتصفح، وكثافة بكسل غير صحيحة، وشريط تمرير يقتطع كسرًا — ولذلك تدعوك اللوحة الحيّة إلى التكبير بدل أن تجزم كم مرة يقع ذلك. وهذه الصفحة لا تنشر أي نسبة عن قصد: فالصادق هو المجال الدقيق ووسيلةٌ تختبرها بنفسك، لا نسبةٌ كان عليّ اختلاق مجتمعها.
والأداة تقارن كذلك خاصيتي width وheight فحسب. والبادئات تنطبق على كل خاصية من نوع المدى — resolution وaspect-ratio وcolor — والحساب فيها واحد، لكن العرض هو موضع السؤال فعلًا. أما الخصائص المنفصلة مثل pointer وorientation فلا تقبل بادئة، وتقول المواصفة ذلك صراحةً.
وأخيرًا، فإن CSS المولَّد هيكل: كتلتا media لكل نقطة توقف وبداخل كل منهما قاعدة فارغة. وهو معدّ لتلصقه ثم تملأه، لا ليكون ورقة أنماط. ويحسن أن تنظر أولًا في السلّم المبني على الجوال أولًا أسفله: فكتابة استعلام min- وحده لكل نقطة توقف، وترك كل قاعدة تعلو على سابقتها، يتفادى المشكلة كلها، لأن الاستعلام الثاني لا يُكتب أصلًا.
لماذا هو مجاني؟
إنه حسابٌ على حفنة أرقام مع matchMedia في متصفحك أنت، وكله يجري في هذه الصفحة وأنت تكتب. ولا خادم في الأمر، فلا شيء يُحتسب ولا حساب يُنشأ.
ولا يُرفع شيء. ونقاط التوقف التي تكتبها تبقى على جهازك.