calc() CSS: Mencampur Satuan, Sintaks, dan Contoh

Fungsi calc()

calc() melakukan aritmetika di dalam nilai CSS, dan bisa mencampur satuan yang baru punya ukuran saat halaman ditata. Kasus klasiknya adalah "lebar penuh dikurangi sidebar tetap":

<!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% baru diketahui setelah halaman ditata, sedangkan 180px tetap, jadi tidak ada satu satuan pun yang bisa menyatakan ini. calc() yang menghitungnya: di pratinjau selebar 800px, barisnya 784px dan kolom utama mendapat 604px, dan baris di bawah tata letak mencetak angka sebenarnya. Sekarang flexbox atau grid bisa membuat tata letak ini tanpa hitungan, tetapi pengurangan yang sama tetap muncul di mana-mana: tinggi dikurangi header, lebar dikurangi gap.

Aturan sintaks

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 */

Aturan spasi ada karena 100% -20px akan dibaca sebagai dua nilai terpisah, dengan nilai kedua berupa angka negatif. Jika sebuah calc() tidak valid, seluruh deklarasinya dibuang dan elemen tetap memakai nilai apa pun yang dimilikinya dari aturan sebelumnya.

Coba sebuah ekspresi

Ketik ekspresi apa saja untuk lebar kotak. Browser melaporkan apakah ekspresinya valid, dan berapa lebar hasilnya:

<!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>

Coba 100%-200px (tidak valid, tanpa spasi), 100% / 3, 50% + 4rem, 2 * 120px, 200px * 2px (tidak valid), dan (100% - 40px) / 2.

calc() dengan variabel CSS

Variabel dan calc() sangat cocok dipakai bersama: simpan nilai dasar sekali lalu turunkan nilai lainnya dari situ. Variabel tanpa satuan menjadi panjang saat kamu mengalikannya dengan satu satuan:

<!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>

Ubah --space menjadi 12px atau --cols menjadi 4, dan setiap nilai turunannya ikut berubah. Halaman variabel CSS membahas cara mendeklarasikan dan mengatur cakupannya.

Penggunaan umum

Untuk nilai yang harus tetap di antara dua batas, pakai clamp(), yang menerima hitungan yang sama di argumennya tanpa perlu menulis calc().

Di mana calc() bisa dipakai

Di mana pun panjang, persentase, angka, sudut, atau waktu diizinkan: width, margin, padding, top, font-size, line-height, ukuran track grid, transition-delay, dan sudut di dalam transform. calc() bisa ditulis bersarang, dan calc() yang bersarang sama saja dengan tanda kurung biasa.

Sudut adalah contoh yang bagus. Setiap garis penanda di bawah punya --i sendiri (0 sampai 11), dan satu aturan mengubahnya menjadi sudut dengan 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>

Penanda ke-3 mendapat rotate(90deg), yang dilaporkan Chrome sebagai matriks matrix(0, 1, -1, 0, 0, 0): seperempat putaran. left: calc(50% - 2px) menengahkan setiap penanda dengan mengurangi setengah dari lebarnya sendiri yang 4px.

Kesalahan umum

• Tanpa spasi di sekitar - atau +. calc(100%-20px) tidak valid dan diabaikan.
• Mengalikan dua panjang. calc(10px * 2px) tidak punya arti di CSS. Salah satu sisi * harus berupa angka biasa.
• Memakai calc() untuk tinggi persentase tanpa tinggi induk. calc(100% - 20px) untuk height membutuhkan induk dengan tinggi yang diatur, sama seperti height: 100%.
• Memakai calc() padahal flexbox atau grid sudah cukup. width: calc(33.333% - 10px) untuk kolom mudah rusak; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px tidak butuh hitungan.
• Berharap ada pesan error. Browser tidak memberi peringatan tentang calc() yang tidak valid. Periksa elemennya di developer tools: deklarasi yang tidak valid ditampilkan dicoret.