Lesson 17 / الدرس 17

calc(), min(), max() and clamp() / الدوال calc() و min() و max() و clamp()

Four functions that do arithmetic in CSS. They let one declaration cover every screen, so a heading can grow with the window and still refuse to become absurd at either end.

أربع دوال تُجري حسابات داخل CSS. تتيح لإعلان واحد أن يغطي كل الشاشات، فيكبر العنوان مع النافذة ويرفض أن يصبح سخيفًا عند أي من الطرفين.

Lesson 16 gave you units. On their own each one answers a single question — how many pixels, what share of the parent, how much of the window. These four functions let you combine them, and that is where they stop being a list of options and start being useful.

`calc()` — arithmetic across units

calc() — حساب عبر الوحدات

.main {
    width: calc(100% - 2rem);
}

The thing no unit can do alone: mix them. "The full width, less a fixed gutter" is not expressible in % or in rem, only in both at once. Keep spaces around the - and + — calc(100%-2rem) is invalid and silently does nothing.

وهذا ما لا تستطيعه وحدة بمفردها: خلطها. فعبارة "العرض كله ناقص هامش ثابت" لا يمكن التعبير عنها بـ % ولا بـ rem، بل بكليهما معًا. وأبقِ مسافات حول - و+ — فـ calc(100%-2rem) غير صالحة ولا تفعل شيئًا بصمت.

`min()` and `max()` — a ceiling and a floor

min() وmax() — سقف وأرضية

These two are named the opposite way round from how they behave, which trips up everybody once. min(90%, 60rem) takes whichever value is smaller — so it acts as a maximum width: 90% on a phone, capped at 60rem on a wide screen. max() takes the larger, so it sets a floor.

اسم هاتين الدالتين معاكس لسلوكهما، وهو ما يُوقع الجميع مرة واحدة. فـ min(90%, 60rem) تأخذ القيمة الأصغر — فتعمل عمل الحد الأقصى للعرض: 90% على الهاتف، ومحدودة بـ 60rem على الشاشة العريضة. أما max() فتأخذ الأكبر، فتضع أرضية.

.page {
    width: min(90%, 40rem);
    margin-inline: auto;
}

One line that replaces a width, a max-width and a media query. Drag the preview: the box follows the width until it hits 40rem, then stops and stays centred.

سطر واحد يحل محل width وmax-width واستعلام وسائط. اسحب المعاينة: يتبع الصندوق العرض حتى يبلغ 40rem، ثم يتوقف ويبقى موسّطًا.

`clamp()` — floor, ideal, ceiling

clamp() — أرضية ومثالي وسقف

clamp(min, ideal, max) is the one you will reach for most. Give it a smallest value, a value that grows, and a largest. It is what makes type fluid: a heading that scales with the window but never shrinks past readable or grows past ridiculous — no media query in sight.

الدالة clamp(min, ideal, max) هي التي ستلجأ إليها أكثر ما تلجأ. أعطها أصغر قيمة، وقيمة تنمو، وأكبر قيمة. وهي ما يجعل الخط سائلًا: عنوان يتمدد مع النافذة لكنه لا يصغر إلى ما دون المقروء ولا يكبر إلى حد السخف — دون أي استعلام وسائط.

h1 {
    font-size: clamp(1.75rem, 5vw, 3.5rem);
}

Never smaller than 1.75rem, never larger than 3.5rem, and 5% of the window width in between. Drag the preview and watch the heading move between its two limits.

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

الأربع كلها تتداخل وتتركب بحرية: فـ width: min(100% - 2rem, 60rem) صالحة، ويمكنك داخل هذه الدوال كتابة العمليات الحسابية مباشرة دون لفّها بـ calc() — فالحساب مسموح هناك أصلًا.

Function	Takes	Use it for
calc(100% - 2rem)	Arithmetic across units	Full width minus a fixed gutter
min(90%, 40rem)	The smaller value	A maximum width
max(50%, 20rem)	The larger value	A minimum width
clamp(1.75rem, 5vw, 3.5rem)	Floor, ideal, ceiling	Fluid type and spacing

Which one answers which question.

Try it live / جرّب بنفسك

<article class="card">
    <h1>A morning in Amman</h1>
    <p>The city wakes slowly, and the bakeries open first.</p>
</article>

.card {
    /* size me with min() and clamp() — no media queries */
    background: #eef2f7;
    padding: 1rem;
}

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does width: min(90%, 40rem) do?

ماذا تفعل width: min(90%, 40rem)؟

2. Why does calc(100%-2rem) not work?

لماذا لا تعمل calc(100%-2rem)؟

3. In clamp(1.5rem, 4vw, 3rem), what is the 1.5rem for?

في clamp(1.5rem, 4vw, 3rem)، ما وظيفة 1.5rem؟

Your task / مهمتك

Build an article card that needs no media query. Give the card a width with min() so it centres and caps on a wide screen, size the heading with clamp() so it scales between two sensible limits, and use calc() once for a width that subtracts a fixed gutter.

ابنِ بطاقة مقال لا تحتاج أي استعلام وسائط. أعطِ البطاقة عرضًا بـ min() بحيث تتوسط وتتوقف عند حد على الشاشة العريضة، واضبط حجم العنوان بـ clamp() ليتمدد بين حدين معقولين، واستخدم calc() مرة واحدة لعرض يطرح هامشًا ثابتًا.

The card width uses min() عرض البطاقة يستخدم min()
The heading uses clamp() with a rem floor العنوان يستخدم clamp() بأرضية rem
calc() appears once, with spaces around the operator calc() تظهر مرة، بمسافات حول المعامل
There is no @media anywhere لا يوجد @media في أي مكان