Çalıştırılabilir CSS Dokümanları: CSS değişkenleri

Q: CSS'te :root nedir?

:root, belgenin kök elementiyle eşleşen bir sözde sınıftır; bir HTML sayfasında bu 'dir. Orada tanımlanan değişkenleri her element miras alır. Bir class'ın özgüllüğüne sahiptir, bu yüzden düz bir html seçicisini yener.

Q: CSS değişkenine varsayılan değer nasıl verilir?

var()'a ikinci bir argüman ver: color: var(--accent, #2563eb);. Yedek değer, --accent elementte ya da atalarında tanımlı değilse kullanılır. Değişken, özellik için geçersiz bir değerle tanımlandığında ise kullanılmaz.

Q: JavaScript ile CSS değişkeni nasıl değiştirilir?

Bir elementin style nesnesinde setProperty çağır: document.documentElement.style.setProperty('--brand', '#16a34a'). var(--brand) kullanan her kural anında güncellenir. Güncel değeri getComputedStyle(el).getPropertyValue('--brand') ile oku.

Q: CSS değişken adları büyük küçük harfe duyarlı mı?

Evet. --Brand ve --brand iki farklı değişkendir; büyük küçük harfe duyarlı olmayan color gibi sıradan özellik adlarından farklı olarak.

CSS değişkeni tanımlamak ve kullanmak

Bir CSS değişkeni, resmi adıyla bir custom property, adı -- ile başlayan bir özelliktir. Onu bir kez tanımla, genelde bütün sayfa miras alsın diye :root üzerinde, ve her yerde var() ile oku.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS variables</title>
  <style>
    :root {
      --brand: #2563eb;
      --radius: 8px;
      --space: 12px;
    }

    .btn {
      background: var(--brand);
      color: white;
      border: 0;
      border-radius: var(--radius);
      padding: var(--space) calc(var(--space) * 2);
    }

    .card {
      border: 2px solid var(--brand);
      border-radius: var(--radius);
      padding: var(--space);
      margin-bottom: var(--space);
    }
  </style>
</head>
<body>
  <div class="card">Change --brand in :root and both change.</div>
  <button class="btn">Button</button>
</body>
</html>

--brand değerini #16a34a yap, kartın kenarlığı ve buton birlikte değişir. Bütün mesele bu: tek değer, değiştirilecek tek yer. Değişkenler, butonun yan padding'inde görüldüğü gibi calc() ile de birleşir.

Söz dizimi

:root {
  --name: value;         /* declare */
}

.element {
  color: var(--name);                 /* use */
  color: var(--name, #111827);        /* use, with a fallback */
  padding: calc(var(--space) * 2);    /* compute with it */
}

Kural	Ayrıntı
Ad	`--` ile başlar, ardından harfler, rakamlar, `-` ya da `_` gelir. Büyük küçük harfe duyarlıdır: `--Brand`, `--brand` değildir.
Değer	Neredeyse her şey: bir renk, bir uzunluk, bir liste, bir metin. Kullanılana kadar kontrol edilmez.
Nerede tanımlanır	Herhangi bir kuralda. Globaller için `:root`, yerel değerler için bileşenin seçicisi.
Miras	Custom property'ler miras alınır, bu yüzden bir çocuk atalarının değerlerini görür.
`var()` nerede çalışır	Yalnızca özellik değerlerinde; seçicilerde, özellik adlarında ya da `@media` koşullarında değil.

:root, <html> elementiyle eşleşir. html yerine kullanılır, çünkü bir class'ın özgüllüğüne sahiptir ve gelenek olarak "global ayarlar" anlamı taşır.

Kapsam: değişkeni bileşen başına ezmek

Değişkenler miras alındığı için birini bir elementte yeniden tanımlamak, onu o element ve içindeki her şey için değiştirir. Değişkeni kullanan kural aynı kalır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scope</title>
  <style>
    :root { --accent: #2563eb; }

    .alert {
      border-inline-start: 6px solid var(--accent);
      background: #e5e7eb;
      color: #111827;
      padding: 10px 14px;
      margin-bottom: 8px;
    }

    .alert.success { --accent: #16a34a; }
    .alert.warning { --accent: #f59e0b; }
  </style>
</head>
<body>
  <div class="alert">Info uses the global blue.</div>
  <div class="alert success">Success overrides --accent.</div>
  <div class="alert warning">Warning overrides it too.</div>
</body>
</html>

Varyantlar kenarlığın kendisini hiç ayarlamaz, yalnızca bir değişken ayarlar. Dördüncü bir varyant eklemek tek satırdır.

Yedek değerler

var(--name, fallback), değişken elementte ya da herhangi bir atasında tanımlı değilse yedek değeri kullanır. İlk virgülden sonraki her şey yedek değerdir, bu yüzden kendi içinde virgül barındırabilir (var(--font, Georgia, serif)) ve başka bir var() olabilir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fallback</title>
  <style>
    p { padding: 8px; color: white; }
    .a { background: var(--missing, #16a34a); }
    .b { --defined: #2563eb; background: var(--defined, #16a34a); }
    .c { background: var(--missing, var(--also-missing, #f59e0b)); }
  </style>
</head>
<body>
  <p class="a">Green: --missing is not defined, fallback used.</p>
  <p class="b">Blue: --defined exists, fallback ignored.</p>
  <p class="c">Amber: nested fallback.</p>
</body>
</html>

JavaScript ile değişkenleri değiştirmek: tema anahtarı

JavaScript, style.setProperty() ile herhangi bir elementte değişken ayarlayabilir. Onu document.documentElement (yani <html> elementi) üzerinde ayarla, bütün sayfa takip eder. Daha yaygın kalıp, değişkenleri yeniden tanımlayan bir class'ı açıp kapatmaktır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Theme</title>
  <style>
    :root {
      --bg: #ffffff;
      --text: #111827;
      --muted: #e5e7eb;
    }
    .dark {
      --bg: #111827;
      --text: #f9fafb;
      --muted: #374151;
    }
    body { background: var(--bg); color: var(--text); padding: 12px; }
    .panel { background: var(--muted); padding: 12px; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="panel">
    <p>Theme colors come from three variables.</p>
    <button id="toggle">Toggle dark mode</button>
    <button id="brand">Random text color</button>
  </div>
  <script>
    const root = document.documentElement;
    document.getElementById('toggle').onclick = () => root.classList.toggle('dark');
    document.getElementById('brand').onclick = () => {
      const hue = Math.floor(Math.random() * 360);
      root.style.setProperty('--text', `hsl(${hue} 70% 40%)`);
      console.log(getComputedStyle(root).getPropertyValue('--text'));
    };
  </script>
</body>
</html>

Bir değişkeni getComputedStyle(element).getPropertyValue('--text') ile geri oku. setProperty'nin <html> üzerine .dark class'ını yenen inline bir stil yazdığına dikkat et; bu yüzden ikinci butona bastıktan sonra metin rengi, inline değer root.style.removeProperty('--text') ile kaldırılana kadar iki temada da sabit kalır.

HTML'den değer aktarmak

Bir style özniteliğindeki değişken, element başına veriyi stil dosyasına iletmenin en temiz yoludur. Tasarım CSS'te kalır; HTML yalnızca bir sayı sağlar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bars</title>
  <style>
    .bar {
      width: calc(var(--value) * 1%);
      box-sizing: border-box;
      background: #2563eb;
      color: white;
      padding: 4px 8px;
      margin-bottom: 6px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="bar" style="--value: 30">30</div>
  <div class="bar" style="--value: 65">65</div>
  <div class="bar" style="--value: 90">90</div>
</body>
</html>

calc(var(--value) * 1%) düz sayıyı yüzdeye çevirir. Değişkenler bir medya sorgusunun içinde de değişebilir: @media (min-width: 900px) { :root { --space: 20px; } }, --space okuyan her boşluğu geniş ekranlarda büyütür.

Geçersiz değer tuzağı

Tarayıcı, bir değişkenin onu kullanan özellik için geçerli bir değer tutup tutmadığını önceden bilemez. Tutmadığında özellik, kuraldaki önceki bildirime geri dönmez. Hesaplanan değer anında geçersiz hale gelir ve unset verilmiş gibi davranır: miras alınan özellikler ebeveynin değerini, diğerleri başlangıç değerlerini alır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Invalid value</title>
  <style>
    :root { --size: red; } /* not a length */
    .box {
      background: #e5e7eb;
      padding: 12px;
      font-size: 24px;
      font-size: var(--size); /* invalid: 24px is NOT kept */
      border: 4px solid #f59e0b;
      border-width: var(--missing); /* undefined, no fallback */
    }
  </style>
</head>
<body>
  <div class="box">16px text and a 3px border, not 24px and 4px.</div>
</body>
</html>

Metin <body>'den 16px miras alır ve border-width başlangıç değeri olan medium'a döner, tarayıcılar bunu 3px olarak çizer. Değişkenler olmadan geçersiz bir bildirim atılır ve ondan önceki hayatta kalır; değişkenlerle bunun için artık çok geçtir. Değişken tanımlı ama yanlış olduğunda yedek değer işe yaramaz: yedek değer yalnızca tanımsız bir değişken içindir.

CSS değişkenleri ve Sass değişkenleri

	CSS değişkenleri	Sass değişkenleri
Söz dizimi	`--brand: #2563eb;` ve `var(--brand)`	`$brand: #2563eb;`
Ne zaman çözülür	Tarayıcıda, canlı	Derleme anında, çıktıda kalmaz
Element başına değişim	Evet, miras yoluyla	Hayır
Bir class ya da medya sorgusuyla değişim	Evet	Hayır
JavaScript ile değişim	Evet	Hayır
Seçicilerde ya da medya koşullarında kullanım	Hayır	Evet

İkisi birlikte çalışır: birçok proje derleme anındaki mantık için Sass kullanır ve temalanabilen her şey için CSS değişkenleri üretir.

Sık yapılan hatalar

İki tireyi unutmak. var(brand) ve -brand olarak tanımlanan --brand çalışmaz.
Medya sorgusunda değişken kullanmak. @media (min-width: var(--bp)) geçerli değildir. Medya koşulları sabit değer ister.
Geçersiz bir değişkenden sonra önceki bildirimin hayatta kalmasını beklemek. Kalmaz; yukarıdaki tuzağa bak.
Birimleri yanlış birleştirmek. --gap: 10; ardından margin: var(--gap)px, 10px üretmez. calc(var(--gap) * 1px) kullan ya da 10px sakla.
Yanlış elementte tanımlamak. .card üzerinde tanımlanan bir değişken kardeşlerine ya da ebeveynine görünmez; paylaşılan değerleri :root üzerinde tanımla.

Sıkça Sorulan Sorular

CSS değişkeni nasıl tanımlanır?

Bir kuralın içine adı iki tireyle başlayan bir özellik yaz; global bir değer için genelde :root kullanılır: :root { --brand: #2563eb; }. Her yerde var(--brand) ile oku, örneğin color: var(--brand);.

CSS'te :root nedir?

:root, belgenin kök elementiyle eşleşen bir sözde sınıftır; bir HTML sayfasında bu <html>'dir. Orada tanımlanan değişkenleri her element miras alır. Bir class'ın özgüllüğüne sahiptir, bu yüzden düz bir html seçicisini yener.

CSS değişkenine varsayılan değer nasıl verilir?

var()'a ikinci bir argüman ver: color: var(--accent, #2563eb);. Yedek değer, --accent elementte ya da atalarında tanımlı değilse kullanılır. Değişken, özellik için geçersiz bir değerle tanımlandığında ise kullanılmaz.

JavaScript ile CSS değişkeni nasıl değiştirilir?

Bir elementin style nesnesinde setProperty çağır: document.documentElement.style.setProperty('--brand', '#16a34a'). var(--brand) kullanan her kural anında güncellenir. Güncel değeri getComputedStyle(el).getPropertyValue('--brand') ile oku.

CSS değişkenleri ile Sass değişkenleri arasındaki fark nedir?

Sass değişkenleri stil dosyası derlenirken değerleriyle değiştirilir, bu yüzden tarayıcıda değişemezler. CSS değişkenleri tarayıcıda yaşar: miras alınır, elementten elemente farklı olabilir, medya sorgularına ve class'lara tepki verir ve JavaScript ile değiştirilebilir.

CSS değişken adları büyük küçük harfe duyarlı mı?

Evet. --Brand ve --brand iki farklı değişkendir; büyük küçük harfe duyarlı olmayan color gibi sıradan özellik adlarından farklı olarak.

İlgili kavramlar