مولّد دالة CSS Clamp()
حدّد حجمًا أدنى وأقصى ونطاق نافذة العرض الذي يُطبَّقان عليه، واحصل على قيمة
clamp() مرنة تتدرّج بسلاسة بينهما.
كيف تعمل
تُحدِّد نقطتا (عرض النافذة، الحجم) خطًا مستقيمًا. يصبح ميله معامل عرض نافذة العرض،
ويصبح تقاطعه مع المحور y إزاحة rem ثابتة، ليكوّنا معًا
clamp(min, intercept + slope*100vw, max). ولأن هذا كود CSS فعلي،
وليس مستمعًا لحدث تغيير الحجم في جافاسكريبت، يعيد المتصفح حسابه في كل مرة يُعاد
فيها التخطيط دون أي اهتزاز في التمرير أو وميض بحجم خاطئ، ويستمر في العمل حتى مع
تعطيل جافاسكريبت.
تُحوَّل كل القيم إلى rem باستخدام حجم خط الجذر لديك، لذا تبقى النتيجة صحيحة حتى لو غيّر المستخدم حجم الخط الأساسي في متصفحه لأغراض إمكانية الوصول. لا شيء هنا يقرأ صفحتك، بل يحسب فقط الصيغة من الأرقام التي تُدخلها.
أسئلة شائعة
ما الذي تفعله clamp() فعليًا؟
تختار clamp(min, preferred, max) القيمة الوسطى، لكنها تقصّها بحيث لا تنخفض عن الحد الأدنى ولا ترتفع عن الحد الأقصى. هنا القيمة "المفضّلة" هي دالة خطية لعرض نافذة العرض، فتنمو النتيجة بسلاسة مع الشاشة حتى تصل إلى أحد الحدّين، ثم تبقى ثابتة.
لماذا نستخدم هذا بدلًا من media query؟
يقفز media query بين أحجام ثابتة عند نقاط توقف محددة، وهو ما قد يبدو وكأنه قفزة مرئية مفاجئة. تتدرّج clamp() باستمرار مع نافذة العرض، فيتغيّر حجم النص والمسافات بسلاسة أثناء سحب النافذة، دون أي نقطة توقف يجب صيانتها.
هل يُرسل هذا إلى أي مكان؟
لا، تُحسب الصيغة والمعاينة بالكامل داخل متصفحك. لا شيء يُرفع.