مولّد clamp في CSS

ما clamp في CSS؟

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

والجزء اللافت هو القيمة الوسطى. فلكي تكون مرنة عليها أن تعتمد على النافذة، فتُكتب بوحدات vw، وما يستعمله الجميع مستقيمٌ يمر بمرساتين: هذا الحجم عند هذا العرض، وذاك الحجم عند ذاك العرض، ثم استكمال بينهما. وذلك المستقيم حسابٌ لا قاعدة تقريبية، وهذا المولّد يحسبه بالضبط.

وهو يفعل كذلك ما لا تكاد تفعله المولّدات: يريك ما يعطيه clamp الخاص بك لمن ليس حجم خط متصفحه هو الافتراضي. وقد تبيّن أن هذا أهم من الحساب نفسه.

كيفية الاستخدام

1. اضبط مرساتيك. حجم الخط الذي تريده عند أضيق نافذة تدعمها وعند أعرضها. والافتراضي 16 بكسل عند 320 و24 بكسل عند 1280، وهو منطلق شائع.
2. انسخ التصريح. يخرج الحد الأوسط بصيغة rem زائد vw. وذلك الـ rem ليس زينة: فاللوحة التالية عمّا يحدث بدونه.
3. غيّر حجم خط القارئ. يقارن الجدول clamp الخاص بك بالمرساتين نفسيهما مكتوبتين بوحدات النافذة وحدها، عبر أربعة عروض، لأي حجم افتراضي تكتبه. جرّب 24 بكسل.

لماذا يحتاج الحد الأوسط إلى rem

يُكتب clamp المرن عادةً بحدود بـ rem ووسط من النافذة وحدها: شيء مثل ‎clamp(1rem, 1.875vw, 1.5rem)‎. فالحدود نسبية إلى حجم خط القارئ والوسط نسبي إلى النافذة، وهذا التنافر هو المشكلة. فحين يرفع أحدهم حجم النص الافتراضي في متصفحه ترتفع الأرضية والسقف معًا. أما ما بينهما فلا يتحرك البتة، لأن لا شيء فيه مقيس بوحدات القارئ.

والنتيجة أسوأ من مجرد حجم خاطئ. خذ ذلك الـ clamp وقارئًا افتراضيه 24 بكسل. عند نافذة بعرض 320 يحصل على 24.00 بكسل. وعند 600 يحصل على 24.00. وعند 900، وعند 1280، ما زال يحصل على 24.00. فالحد الأوسط لا يرتفع فوق الأرضية قط، فيبقى الـ clamp مثبَّتًا عند حدّه الأدنى في مدى التصميم كله، وقد كفّت الطباعة عن كونها مرنة. أما مكتوبًا بـ rem في الحد الأوسط فيحصل القارئ نفسه على 24.00 عند الطرف الضيق صعودًا إلى 30.67 عند العريض.

وهذا الانهيار ليس شذوذًا في تلك الأرقام. فالحد الأوسط المصنوع من النافذة وحدها يبلغ أكبر قيمه عند المرساة العريضة، وتلك القيمة بحكم البناء هي الحد الأعلى الذي طلبته، فأي قارئ بلغ 1rem عنده حدك الأعلى يبقى ممسَكًا عند الأرضية في كل مكان. وهذا دقيق، ولهذا يكون العتبة التي تعرضها هذه الصفحة مساويةً دائمًا لحدك الأعلى.

وفي ذلك تناظر قاسٍ: فالقراء الذين يكفّ الـ clamp عن العمل عندهم صامتًا هم بعينهم من كبّروا نصهم لأنهم احتاجوا أن يستجيب. ولا شيء ينبّهك، لأن كل شيء على جهازك عند 16 بكسل يسلك كما ينبغي.

كيف تُحقِّق من هذا، وما لا يغطّيه

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

وجدول المقارنة قياس لا توضيح. فقد قُيّمت الصورتان كما يقيّم المتصفح clamp — بأخذ القيمة المفضّلة ثم تقييدها — عبر مدى من أحجام خط القارئ وعروض النوافذ، قبل أن يُكتب شيء من هذا. والأرقام المذكورة أعلاه هي ذلك القياس.

وثمة تصحيح يستحق النقل. يعرّف CSS الدالةَ ‎clamp(MIN, VAL, MAX)‎ بأنها ‎max(MIN, min(VAL, MAX))‎، ومعناه أنك إن وضعت حدًّا أدنى أكبر من حدك الأعلى فاز الأدنى في كل العروض، ولن يبادلهما المتصفح لك تلطفًا. وهذا المولّد يعيد إنتاج ذلك بدل تسويته، لأن التسوية هي ما سيفاجئك لاحقًا.

وما لا يغطّيه: هذا يُنمذِج ‎font-size، ومع أن clamp() يصلح لأي طول، فحجة الوصولية هنا عن النص تحديدًا. وهو يفترض أيضًا أن حجم خط القارئ هو الشيء الوحيد الذي غيّره، بينما تكبير الصفحة يقيس النافذة أيضًا ويسلك سلوكًا يخالف تفضيل حجم الخط. ثم إن حدًّا أوسط فيه rem ليس كافيًا وحده؛ فهو يجعل الـ clamp يستجيب للقارئ، وذلك ضروري لا أنه كل الطباعة الوصولية.

لماذا هي مجانية؟

هو مستقيم يمر بنقطتين، يُحسب داخل متصفحك. فلا شيء يُشغَّل على خادم، ولا شيء يُتقاضى عليه، ولا حساب يُنشأ.

لا يُرفع شيء مما تكتبه ولا يُخزَّن ولا يُسجَّل. ولن يكون ذا فائدة حتى لو رُفع، وهذا هو المقصود: أداة بهذا الصغر لا شأن لها بجمع أي شيء.