وثائق CSS قابلة للتشغيل: calc() في CSS

Q: ماذا تفعل calc() في CSS؟

تحسب قيمة من تعبير فيه + و- و* و/، ويمكنها خلط وحدات لا يعرفها المتصفح إلا وقت التخطيط. width: calc(100% - 200px) هي العرض الكامل للأب ناقص 200px، مهما كان عرض الأب.

Q: هل يمكن استخدام متغيرات CSS داخل calc()؟

نعم. تضاعف calc(var(--gap) 2) قيمة متغير، وتحوّل calc(var(--columns) 1px) رقمًا بلا وحدة إلى بكسلات. تُستبدل قيمة المتغير أولًا ثم تُجرى العملية الحسابية.

Q: هل أحتاج إلى مسافات حول * و/ في calc()؟

لا. وحدهما + و- تتطلبان مسافات، لأن -20px من دونها ستُقرأ كرقم سالب. المسافات حول * و/ اختيارية، لكن كتابتها في كل مكان هي أسهل قاعدة للتذكر.

Q: ما الفرق بين calc() وclamp()؟

تحسب calc() قيمة واحدة من تعبير. أما clamp(MIN, VAL, MAX) فتبقي قيمة بين حدين. ويمكن الجمع بينهما: كل وسيط في clamp() يقبل أصلًا عمليات حسابية على طريقة calc، مثل clamp(1rem, 1rem + 2vw, 3rem).

ماذا تفعل calc()

تجري calc() العمليات الحسابية داخل قيمة CSS، ويمكنها خلط وحدات لا تحصل على حجمها إلا وقت التخطيط. الحالة الكلاسيكية هي «العرض الكامل ناقص شريط جانبي ثابت»:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .layout { background: #e5e7eb; height: 110px; }
    .side { float: left; width: 180px; height: 100%; background: #111827; color: white; }
    .main {
      float: left;
      width: calc(100% - 180px); /* whatever is left next to the sidebar */
      height: 100%;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="layout"><div class="side">180px</div><div class="main" id="m">calc(100% - 180px)</div></div>
  <p id="out"></p>
  <script>
    const m = document.getElementById('m');
    document.getElementById('out').textContent = 'main is ' + m.offsetWidth + 'px of a ' + m.parentElement.offsetWidth + 'px row';
  </script>
</body>
</html>

لا تُعرف 100% إلا بعد ترتيب الصفحة، و180px ثابتة، فلا توجد وحدة واحدة تستطيع التعبير عن ذلك. تحسبها calc(): في معاينة بعرض 800px يكون عرض الصف 784px ويحصل العمود الرئيسي على 604px، والسطر تحت التخطيط يطبع الأرقام الحقيقية. اليوم يرتّب flexbox أو grid هذا التخطيط من دون حساب، لكن عملية الطرح نفسها ما زالت تظهر في كل مكان: ارتفاع ناقص ترويسة، أو عرض ناقص فجوة.

قواعد الصيغة

width: calc(100% - 2rem);          /* + and - need spaces on both sides */
width: calc(100% / 3);             /* divide by a plain number */
margin: calc(var(--space) * 2);    /* multiply by a plain number */
height: calc(100vh - (64px + 1rem)); /* parentheses group */

القاعدة	صالحة	غير صالحة
مسافات حول `+` و`-`	`calc(100% - 20px)`	`calc(100%-20px)`
`*`: أحد الطرفين على الأقل رقم مجرد	`calc(2 * 1rem)`	`calc(2px * 3px)`
`/`: اقسم طولًا على رقم مجرد	`calc(100% / 3)`	`width: calc(300px / 3px)` (ليست طولًا)
يجب أن تكون الوحدات متوافقة	`calc(1rem + 10px)`	`calc(1rem + 2s)`

توجد قاعدة المسافات لأن 100% -20px ستُقرأ كقيمتين منفصلتين، الثانية منهما رقم سالب. حين تكون calc() غير صالحة يُلقى التصريح كله، ويحتفظ العنصر بأي قيمة كانت له من قواعد سابقة.

جرّب تعبيرًا

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc tester</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .track { background: #e5e7eb; margin: 10px 0; }
    #box { width: 50%; height: 40px; background: #16a34a; }
  </style>
</head>
<body>
  <label>width: calc(<input id="expr" value="100% - 200px" size="24">)</label>
  <div class="track"><div id="box"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('expr');
    const box = document.getElementById('box');
    const update = () => {
      const value = 'calc(' + input.value + ')';
      const ok = CSS.supports('width', value);
      box.style.width = ok ? value : '';
      document.getElementById('out').textContent = ok
        ? 'valid: ' + box.offsetWidth + 'px of ' + box.parentElement.offsetWidth + 'px'
        : 'invalid: the browser would ignore this declaration';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

جرّب 100%-200px (غير صالح، بلا مسافات)، و100% / 3، و50% + 4rem، و2 * 120px، و200px * 2px (غير صالح)، و(100% - 40px) / 2.

calc() مع متغيرات CSS

المتغيرات وcalc() تعملان معًا: خزّن قيمة أساسية مرة واحدة واشتق الباقي منها. المتغير بلا وحدة يصبح طولًا حين تضربه في وحدة واحدة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc and variables</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    :root { --space: 8px; --cols: 3; }
    .grid {
      display: grid;
      grid-template-columns: repeat(var(--cols), 1fr);
      gap: calc(var(--space) * 2);        /* 16px */
      padding: calc(var(--space) * 3);    /* 24px */
      background: #e5e7eb;
    }
    .grid div {
      height: calc(var(--cols) * 20px);   /* unitless 3 becomes 60px */
      background: #2563eb;
    }
  </style>
</head>
<body>
  <div class="grid"><div></div><div></div><div></div></div>
  <p id="out"></p>
  <script>
    const g = getComputedStyle(document.querySelector('.grid'));
    const cell = getComputedStyle(document.querySelector('.grid div'));
    document.getElementById('out').textContent = 'gap ' + g.columnGap + ', padding ' + g.paddingTop + ', cell height ' + cell.height;
  </script>
</body>
</html>

غيّر --space إلى 12px أو --cols إلى 4 وستتبعه كل القيم المشتقة. تشرح صفحة متغيرات CSS تعريفها وتحديد نطاقها.

استخدامات شائعة

الحاجة	calc()
ملء المساحة بجانب عنصر ثابت	`width: calc(100% - 240px)`
قسم تحت ترويسة ثابتة	`min-height: calc(100vh - 64px)`
نصف العرض ناقص نصف فجوة	`width: calc(50% - 8px)`
توسيط صندوق مطلق بعرض 100px	`left: calc(50% - 50px)`
حجم خط يكبر قليلًا مع الشاشة	`font-size: calc(1rem + 0.5vw)`
تحويل متغير رقمي إلى طول	`calc(var(--n) * 1px)`
سالب قيمة متغير	`calc(var(--space) * -1)`

لقيمة يجب أن تبقى بين حدين استخدم clamp()، التي تقبل العمليات الحسابية نفسها في وسائطها من دون كتابة calc().

أين تعمل calc()

في أي مكان يُسمح فيه بطول أو نسبة مئوية أو رقم أو زاوية أو زمن: width وmargin وpadding وtop وfont-size وline-height وأحجام مسارات grid وtransition-delay والزوايا داخل transform. ويمكن تداخلها، وcalc() المتداخلة هي نفسها الأقواس العادية.

الزوايا مثال جيد. لكل علامة أدناه قيمة --i خاصة بها (من 0 إلى 11)، وقاعدة واحدة تحولها إلى زاوية عبر calc(var(--i) * 30deg):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc angles</title>
  <style>
    .dial { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .tick {
      position: absolute;
      top: 10px;
      left: calc(50% - 2px);          /* center a 4px wide tick */
      width: 4px;
      height: 16px;
      background: #111827;
      transform-origin: 2px 70px;     /* the center of the dial */
      transform: rotate(calc(var(--i) * 30deg));
    }
  </style>
</head>
<body>
  <div class="dial" id="dial"></div>
  <p id="out"></p>
  <script>
    const dial = document.getElementById('dial');
    for (let i = 0; i < 12; i++) dial.insertAdjacentHTML('beforeend', '<div class="tick" style="--i: ' + i + '"></div>');
    document.getElementById('out').textContent = 'tick 3 transform: ' + getComputedStyle(dial.children[3]).transform;
  </script>
</body>
</html>

تحصل العلامة 3 على rotate(90deg)، التي يعرضها Chrome كالمصفوفة matrix(0, 1, -1, 0, 0, 0): ربع دورة. وتوسّط left: calc(50% - 2px) كل علامة بطرح نصف عرضها البالغ 4px.

أخطاء شائعة

لا مسافات حول - أو +. calc(100%-20px) غير صالحة وتُتجاهل.
ضرب طولين. لا معنى لـ calc(10px * 2px) في CSS. أحد طرفي * يجب أن يكون رقمًا مجردًا.
استخدام calc() لارتفاع بالنسبة المئوية من دون ارتفاع للأب. تحتاج calc(100% - 20px) في height إلى أب له ارتفاع مضبوط، تمامًا كما تحتاج height: 100%.
استخدام calc() حيث يكفي flexbox أو grid. width: calc(33.333% - 10px) للأعمدة هشة؛ وdisplay: grid; grid-template-columns: repeat(3, 1fr); gap: 15px لا تحتاج إلى أي حساب.
توقع رسالة خطأ. لا يحذّر المتصفح من calc() غير الصالحة. افحص العنصر في أدوات المطور: التصريح غير الصالح يظهر مشطوبًا.

الأسئلة الشائعة

ماذا تفعل calc() في CSS؟

تحسب قيمة من تعبير فيه + و- و* و/، ويمكنها خلط وحدات لا يعرفها المتصفح إلا وقت التخطيط. width: calc(100% - 200px) هي العرض الكامل للأب ناقص 200px، مهما كان عرض الأب.

لماذا لا تعمل calc() عندي؟

السبب الأكثر شيوعًا غياب المسافات: يجب أن تحيط مسافة بيضاء بـ + و- من الجانبين، فـ calc(100%-20px) غير صالحة. أسباب أخرى: ضرب طولين (10px * 2px) أو القسمة على طول، وهذا لا ينتج طولًا. calc() غير الصالحة تجعل التصريح كله غير صالح، فيتجاهله المتصفح.

هل يمكن استخدام متغيرات CSS داخل calc()؟

نعم. تضاعف calc(var(--gap) * 2) قيمة متغير، وتحوّل calc(var(--columns) * 1px) رقمًا بلا وحدة إلى بكسلات. تُستبدل قيمة المتغير أولًا ثم تُجرى العملية الحسابية.

هل أحتاج إلى مسافات حول * و/ في calc()؟

لا. وحدهما + و- تتطلبان مسافات، لأن -20px من دونها ستُقرأ كرقم سالب. المسافات حول * و/ اختيارية، لكن كتابتها في كل مكان هي أسهل قاعدة للتذكر.

ما الفرق بين calc() وclamp()؟

تحسب calc() قيمة واحدة من تعبير. أما clamp(MIN, VAL, MAX) فتبقي قيمة بين حدين. ويمكن الجمع بينهما: كل وسيط في clamp() يقبل أصلًا عمليات حسابية على طريقة calc، مثل clamp(1rem, 1rem + 2vw, 3rem).

مفاهيم ذات صلة