خط مائع بـ CSS clamp() — دون استعلامات وسائط

لا تزال معظم الثيمات تشحن بسلّم استعلامات وسائط للعناوين: 24 بكسل أقل من 640 بكسل، و32 بكسل أقل من 1024 بكسل، و48 بكسل فوق ذلك. هذا يعمل، لكن القفزات بين نقاط التوقف تبدو مفاجئة وتجد نفسك تكتب نفس السلّم ثلاث مرات. تحل دالة `clamp()` محل كل سلّم بمعادلة واحدة سلسة.

نمط السطر الواحد

/* Hero headline — smooth from 32px on phone to 80px on desktop */
h1.hero {
  font-size: clamp(2rem, 1.2rem + 4vw, 5rem);
}

الترجمة: لا يصغر الحجم عن 32 بكسل (2rem) ولا يكبر عن 80 بكسل (5rem)، وفي المنتصف يكون الحجم `1.2rem + 4vw` — بما يعادل نحو 1.2 × معدل النمو النسبي لعرض المنفذ وحده. يحسب المتصفح المعادلة عند كل تغيير في الحجم.

سلّم يناسب المدوّنات

بالنسبة لمعظم ثيمات VeloCMS أستخدم هذا السلّم المكوّن من ست خطوات في ملف theme.css:

h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem); }
h4 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); }
body, p, li { font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem); }
.small, time { font-size: clamp(0.8rem, 0.75rem + 0.1vw, 0.875rem); }

ضع هذه الكتلة في أعلى `body[data-theme="<your-slug>"] { ... }` وأزل كل قاعدة `@media (min-width:...) { h1 { font-size: ... } }` تحتها.

حين يتصرف clamp() بشكل غريب: مأزق وحدة عرض المنفذ

عانت بعض إصدارات Safari من خطأ يجعل `clamp()` يختار القيمة الدنيا عند تحميل الصفحة دون إعادة حساب. إن بدا نص hero صغيراً على iOS حتى تقلب الجهاز، أضف `min-height: 100vh` إلى كتلة أصلية — هذا يُجبر على تمريرة تخطيط عند الطلاء الأول وتُعيد clamp الحساب. رُصد هذا في Safari 15.x وما قبلها؛ وأُصلح في الإصدار 16.4+.

التصحيح: الصق هذا في DevTools

// Read the actual computed font-size every 100ms
setInterval(() => {
  const h1 = document.querySelector("h1");
  if (h1) console.log("h1 px:", getComputedStyle(h1).fontSize, "viewport:", innerWidth);
}, 100);

غيّر حجم المتصفح وتابع تغيّر قيمة البكسل بشكل مستمر. إن ظلّت ثابتة بينما تتغير نافذة العرض، فلديك مشكلة خصوصية CSS — قاعدة أخرى تُلغي `clamp()` بقيمة صلبة.