{"id":"l-css-2-4","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"حدّد أحجام العناصر من محتواها باستخدام min-content وmax-content وfit-content، واستبدل أزواج الـ breakpoints بـ min() وmax() وclamp().","html":"

كان لملخّصات الجلسات في Waypoint الزوج الكلاسيكي من القواعد: width: 100% مع max-width: 40ch، ثم media query لإضافة حشوة جانبية على الهواتف، وأخرى للشاشات الكبيرة. ثلاث قواعد ونقطتا تحوّل لقول شيء واحد: «كن بالعرض المريح للقراءة، لكن لا تتجاوز المساحة المتاحة لك أبدًا».

\n

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

\n

دع المحتوى يقرّر: الكلمات المفتاحية الذاتية

\n

معظم الأحجام التي تكتبها خارجية (extrinsic): 300px و50% و1fr. لكن المتصفّح يستطيع أيضًا أن يحدّد حجم العنصر من محتواه، وثلاث كلمات مفتاحية تكشف ذلك:

\n\n

fit-content هي التي ستستخدمها أكثر. الشارة أو الزر من نوع block يتمدّد عادةً ليملأ حاويته؛ أما width: fit-content فتجعله يحتضن تسميته كأنه عنصر inline مع بقائه block، فتظل الـ margins والتراصّ تعمل كما يجب. أضف margin-inline: auto فيتوسّط.

\n

وفي tracks الشبكة تعطيك هذه الكلمات أعمدةً يقودها المحتوى. جدول أعمال Waypoint يستخدم grid-template-columns: max-content 1fr: عمود الوقت بعرض أطول وقت بالضبط («10:15–11:00»)، وعنوان الجلسة يأخذ الباقي.

\n\n

min() وmax() وclamp()

\n

تأخذ الدوال الرياضية قائمة من القيم، بأيّ خليط من الوحدات، وتُحسم إلى طول واحد وقت التخطيط:

\n
sizing.css
.abstract {\n  width: min(100%, 40ch);            /* ceiling: never wider than 40ch */\n}\n\n.page {\n  padding-inline: max(1rem, 4vw);    /* floor: never less than 1rem */\n}\n\n.session-card {\n  padding: clamp(12px, 4%, 32px);    /* between 12px and 32px, 4% in the middle */\n}\n\n.content {\n  width: min(100% - 2rem, 60rem);    /* arithmetic works without calc() */\n  margin-inline: auto;\n}
\n

min() تُرجع أصغر قيمة، وهذا يعني أنها تضع حدًّا أعلى. min(100%, 40ch) تساوي 40ch في البطاقة العريضة و100% في الضيّقة؛ فهي تستبدل زوج width وmax-width بتصريح واحد. و**max() تُرجع أكبر قيمة**، فتضع حدًّا أدنى: الهامش الجانبي للصفحة 4vw على الشاشات العريضة، لكنه لا يتقلّص أبدًا تحت 1rem على الهاتف.

\n\n

clamp(MIN, PREFERRED, MAX) تجمع الاثنتين: تُرجع القيمة المفضّلة، لكن لا أقل من MIN ولا أكثر من MAX. وهي بالضبط max(MIN, min(PREFERRED, MAX)).

\n
\n رسم بياني للـ padding مقابل عرض الحاوية. الخط مستوٍ عند 12 بكسل للحاويات الضيّقة، ويرتفع مع 4 بالمئة من العرض في المنتصف، ويستوي عند 32 بكسل للحاويات العريضة.\n \n \n عرض الحاوية\n padding\n \n 12px (MIN)\n 4% (PREFERRED)\n 32px (MAX)\n \n \n 300px\n 800px\n
تتبع clamp() القيمة المفضّلة بين حدّين
\n

مع clamp(12px, 4%, 32px) تحصل البطاقة في عمود عرضه 300px على 12px من الـ padding، وفي عمود عرضه 500px على 20px، وكل ما هو أعرض من 800px يتوقّف عند 32px. النسب المئوية في الـ padding نسبةً إلى الحجم الأفقي للكتلة الحاوية، لذا تتبع مسافات البطاقة حاويتها لا الـ viewport.

\n

وحدات تجعل الدوال الرياضية مفيدة

\n

يجب أن تكون القيمة المفضّلة في clamp() شيئًا يتدرّج: نسبة مئوية، أو vw، أو وحدات الحاوية التي ستقابلها في درس الـ Container Queries. أما الحدود فيجب أن تكون وحدات مستقرّة مثل px أو rem. واستخدام rem للحدود له ميزة إضافية: إن رفع المستخدم حجم الخط الافتراضي لديه، تتدرّج الحدود معه.

\n

وهذه أيضًا الحيلة وراء الحماية التي رأيتها في درس grid: minmax(min(180px, 100%), 1fr). داخل حاوية أضيق من 180px تختار min() القيمة 100%، فلا يفرض الـ track فيضانًا أبدًا.

\n\n

دورك الآن

\n

في التمرين بطاقة جلسة داخل غلاف تغيّر الفحوصات عرضه. حدّ الملخّص بـ 40ch دون أن يفيض في البطاقات الضيّقة، واجعل الشارة تحتضن نصّها، وأعطِ البطاقة padding يتدرّج بين 12px و32px. وبعدها ستجعل components كاملة تغيّر تخطيطها بحسب عرض حاويتها، باستخدام الـ container queries.

\n","toc":[{"id":"sec-1","text":"دع المحتوى يقرّر: الكلمات المفتاحية الذاتية","level":2},{"id":"sec-2","text":"min() وmax() وclamp()","level":2},{"id":"sec-3","text":"وحدات تجعل الدوال الرياضية مفيدة","level":2},{"id":"sec-4","text":"دورك الآن","level":2}],"takeaways":["min-content أضيق ما يمكن أن يكونه العنصر دون أن يفيض، وmax-content عرضه دون أيّ التفاف، وfit-content هي max-content محدودةً بالمساحة المتاحة.","min() تختار أصغر قيمة، فتعمل كسقف: width: min(100%, 40ch) لا تتجاوز 40ch أبدًا ولا تفيض خارج حاويتها أبدًا.","max() تعمل كأرضية، وclamp(MIN, PREFERRED, MAX) تُبقي القيمة المرنة بين حدّين.","الدوال الرياضية تقبل وحدات مختلطة وعمليات حسابية، لذا تعمل min(100% - 2rem, 60rem) دون calc() متداخلة."],"further":[{"title":"clamp() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp"},{"title":"fit-content (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/fit-content"},{"title":"Sizing units (web.dev Learn CSS)","url":"https://web.dev/learn/css/sizing"}],"quiz":[{"q":"

لملخّص جلسة width: min(100%, 40ch)، وعرض بطاقته 900px. ما عرض الملخّص؟

","options":[{"text":"900px، لأن 100% هي القيمة الأكبر.","why":"min() تُرجع القيمة الأصغر لا الأكبر. ومن السهل الخلط لأنها تعمل كحدّ أقصى."},{"text":"أيّهما أصغر، أي 40ch (نحو 320px عند 16px).","why":"صحيح. 40ch أصغر من 900px فتفوز. وفي بطاقة عرضها 200px ستكون 100% هي الأصغر وتفوز بدلًا منها."},{"text":"40ch، لكنه يفيض حين تكون البطاقة أضيق.","why":"هذا ما تفعله width: 40ch المجرّدة. أما مع min() فتتولّى 100% الأمر لحظة تصبح البطاقة أضيق من 40ch."},{"text":"يعتمد على عرض الـ viewport.","why":"لا 100% ولا ch تعتمد على الـ viewport؛ 100% نسبةً إلى الكتلة الحاوية."}],"answer":1},{"q":"

ما الذي تعطيه padding: clamp(12px, 4%, 32px) لبطاقة في حاوية عرضها 500px؟

","options":[{"text":"12px، لأن الحدّ الأدنى ينطبق أولًا دائمًا.","why":"الحدّ الأدنى لا ينطبق إلا حين تنزل القيمة المفضّلة تحته. و4% من 500px تساوي 20px، وهي فوق 12px."},{"text":"32px، لأن clamp() تفضّل الحدّ الأقصى.","why":"الحدّ الأقصى لا ينطبق إلا حين تتجاوزه القيمة المفضّلة."},{"text":"4px، لأن النسبة المئوية من صندوق الـ padding.","why":"النسب المئوية في الـ padding دائمًا نسبةً إلى الحجم الأفقي (inline size) للكتلة الحاوية، وهو هنا 500px."},{"text":"20px، لأن 4% من 500px تقع بين الحدّين.","why":"صحيح. تُرجع clamp() القيمة المفضّلة حين تقع بين الحدّ الأدنى والحدّ الأقصى."}],"answer":3},{"q":"

شارة «Sold out» لها display: block داخل بطاقة، وهي تتمدّد على عرض البطاقة كله. أيّ تصريح يجعلها تحتضن نصّها لكن تلتفّ إن كان النص أطول من البطاقة؟

","options":[{"text":"width: max-content","why":"max-content لا تلتفّ أبدًا، فستفيض التسمية الطويلة خارج البطاقة."},{"text":"width: min-content","why":"min-content تلتفّ عند كل فرصة، فتنكسر التسمية ذات الكلمتين على سطرين."},{"text":"width: fit-content","why":"صحيح. تستخدم عرض max-content حين تتوفّر المساحة، وترجع إلى العرض المتاح حين لا تتوفّر."}],"answer":2},{"q":"

لماذا تصلح max(1rem, 4vw) هامشًا جانبيًا جيدًا للصفحة؟

","options":[{"text":"تكبر مع الـ viewport لكنها لا تنزل أبدًا تحت 1rem على الشاشات الصغيرة.","why":"صحيح. max() تختار القيمة الأكبر، فتعمل كأرضية عند 1rem بينما تتولّى 4vw الأمر على الشاشات الأعرض."},{"text":"لا تكبر أبدًا فوق 1rem، فتُبقي الشاشات العريضة مرتّبة.","why":"هذه min(1rem, 4vw)، وهي تعمل كسقف."},{"text":"تنتقل من rem إلى vw عند breakpoint تعلنه أنت.","why":"لا يوجد breakpoint؛ المتصفّح يقارن القيمتين باستمرار عند كل عرض."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
\n Sold out\n

Intrinsic Sizing in Practice

\n

Let content decide how big things are: min-content, max-content, fit-content and the math functions that replace half your media queries.

\n
\n
","css":".wrap {\n width: 600px; /* the checks change this width */\n}\n.session-card {\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n}\n.session-card h3 { margin: 8px 0; }\n.badge {\n display: block;\n padding: 0.1em 0.6em;\n border-radius: 999px;\n background: #fee2e2;\n color: #991b1b;\n}\n\n.session-card { padding: 24px; }\n.abstract { width: 40ch; }\n"},"solution":{"html":"
\n
\n Sold out\n

Intrinsic Sizing in Practice

\n

Let content decide how big things are: min-content, max-content, fit-content and the math functions that replace half your media queries.

\n
\n
","css":".wrap {\n width: 600px; /* the checks change this width */\n}\n.session-card {\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n}\n.session-card h3 { margin: 8px 0; }\n.badge {\n display: block;\n padding: 0.1em 0.6em;\n border-radius: 999px;\n background: #fee2e2;\n color: #991b1b;\n}\n\n.session-card { padding: clamp(12px, 4%, 32px); }\n.abstract { width: min(100%, 40ch); }\n.badge { width: fit-content; }\n"},"checks":[{"id":"abstract-capped","test":"const setW = async (w) => { $('.wrap').style.width = w + 'px'; await tick(16); }; await setW(600); const a = $('.abstract'); const probe = document.createElement('div'); probe.style.cssText = 'width:40ch;height:0;font:inherit;'; a.after(probe); const ch40 = probe.getBoundingClientRect().width; probe.remove(); return Math.abs(a.getBoundingClientRect().width - ch40) < 1;"},{"id":"abstract-fits-narrow","test":"const setW = async (w) => { $('.wrap').style.width = w + 'px'; await tick(16); }; const pad = () => parseFloat(style('.session-card', 'padding-left')); await setW(220); const card = $('.session-card').getBoundingClientRect(); const r = $('.abstract').getBoundingClientRect(); const ok = r.right <= card.right - pad() + 0.5; await setW(600); return ok;"},{"id":"badge-hugs","test":"const card = $('.session-card').getBoundingClientRect(); const b = $('.badge').getBoundingClientRect(); return style('.badge', 'display') === 'block' && b.width < card.width / 2 && b.width > 20;"},{"id":"padding-min","test":"const setW = async (w) => { $('.wrap').style.width = w + 'px'; await tick(16); }; const pad = () => parseFloat(style('.session-card', 'padding-left')); await setW(250); const p = pad(); await setW(600); return Math.abs(p - 12) < 0.5;"},{"id":"padding-fluid","test":"const setW = async (w) => { $('.wrap').style.width = w + 'px'; await tick(16); }; const pad = () => parseFloat(style('.session-card', 'padding-left')); await setW(500); const p = pad(); await setW(600); return Math.abs(p - 20) < 0.5;"},{"id":"padding-max","test":"const setW = async (w) => { $('.wrap').style.width = w + 'px'; await tick(16); }; const pad = () => parseFloat(style('.session-card', 'padding-left')); await setW(1000); const p = pad(); await setW(600); return Math.abs(p - 32) < 0.5;"}],"title":"حدّد حجم البطاقة من محتواها","prompt":"

تغيّر الفحوصات عرض .wrap بين 220px و1000px. دون media queries:

\n
    \n
  1. اجعل .abstract بعرض 40ch على الأكثر، لكن لا يتجاوز أبدًا صندوق المحتوى في البطاقة.
    2. \n
  2. اجعل .badge (وهي من نوع block) تحتضن نصّها بدل أن تتمدّد (أبقِ display: block).
    3. \n
  3. أعطِ .session-card قيمة padding تساوي 4% من عرض الغلاف، لا تقل أبدًا عن 12px ولا تزيد أبدًا على 32px.
    4. \n
\n","hints":["كل مهمة تصريح واحد. فكّر: سقف، احتضان، مدى.","min() تعمل كسقف، وكلمة مفتاحية تجعل الـ block يحتضن محتواه، وclamp() تأخذ ثلاث قيم.",".abstract { width: min(100%, 40ch); } و.badge { width: fit-content; } و.session-card { padding: clamp(12px, 4%, 32px); }."],"explanation":"

width: min(100%, 40ch) تُحسم إلى أيّهما أصغر، فيتوقّف الملخّص عند 40ch في البطاقة العريضة ويتقلّص إلى صندوق المحتوى في الضيّقة، حيث كانت 40ch المجرّدة ستفيض. وfit-content تحدّد عرض الشارة بعرض max-content الخاص بها، محدودًا بالمساحة المتاحة، مع بقائها block. وclamp(12px, 4%, 32px) تُرجع 4% من عرض الكتلة الحاوية (20px عند 500px)، لكنها لا تنزل أبدًا تحت 12px ولا ترتفع فوق 32px، فيستبدل تصريح واحد نقطتي تحوّل.

\n","checkLabels":{"abstract-capped":"في البطاقة العريضة عرض الملخّص 40ch","abstract-fits-narrow":"في البطاقة الضيّقة لا يفيض الملخّص","badge-hugs":"الشارة تحتضن نصّها وتبقى block","padding-min":"الـ padding لا ينزل أبدًا تحت 12px","padding-fluid":"الـ padding يساوي 4% من العرض فيما بين الحدّين","padding-max":"الـ padding لا يتجاوز أبدًا 32px"}},"words":593,"readMinutes":3}