Bu sayfa, Cloud Translation API ile çevrilmiştir.

CSS Değişkenleri: Neden önemsemelisiniz?

Rob Dodson

Daha doğru bir ifadeyle CSS özel özellikleri olarak bilinen CSS değişkenleri, Chrome 49'a eklendi. Bunlar, CSS'de tekrarı azaltmak için ve tema değiştirme ve gelecekteki CSS özelliklerini genişletme/doldurma gibi güçlü çalışma zamanındaki efektler için yararlı olabilir.

CSS karmaşası

Uygulama tasarlanırken, uygulamanın görünümünü tutarlı tutmak için yeniden kullanılacak bir dizi marka rengi ayırmak yaygın bir uygulamadır. Maalesef bu renk değerlerini CSS'nizde tekrar tekrar yazmak hem zahmetli hem de hatalara açıktır. Bir noktada renklerden birinin değiştirilmesi gerekirse tüm öğeleri "bul ve değiştir" seçeneğiyle değiştirebilirsiniz ancak bu işlem, yeterince büyük bir projede tehlikeli olabilir.

Son zamanlarda birçok geliştirici, önişleyici değişkenleri kullanarak bu sorunu çözen SASS veya LESS gibi CSS önişleyicilerine yöneldi. Bu araçlar geliştirici üretkenliğini büyük ölçüde artırsa da kullandıkları değişkenler önemli bir dezavantaja sahiptir. Bu değişkenler statiktir ve çalışma zamanında değiştirilemez. Değişkenleri çalışma zamanında değiştirme özelliğinin eklenmesi, yalnızca dinamik uygulama temaları gibi işlevlere kapı açmakla kalmaz, aynı zamanda duyarlı tasarım ve gelecekteki CSS özelliklerini doldurma potansiyeli açısından da önemli sonuçlar doğurur. Chrome 49'un yayınlanmasıyla birlikte bu özellikler artık CSS özel özellikleri biçiminde kullanılabilir.

Özel özelliklerle ilgili özet bilgiler

Özel mülkler, CSS araç setimize iki yeni özellik ekler:

Yazarın, yazar tarafından seçilen bir ada sahip bir mülke keyfi değerler atayabilmesi.
Yazarın bu değerleri diğer mülklerde kullanmasına olanak tanıyan var() işlevi.

Aşağıda bu durumu gösteren kısa bir örnek verilmiştir.

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color, değeri #06c olan yazar tarafından tanımlanmış bir özel özelliktir. Tüm özel mülklerin iki kısa çizgiyle başladığını unutmayın.

var() işlevi, kendisini alıp özel mülk değeriyle değiştirir. Bu işlem sonucunda color: #06c; elde edilir. Özel mülk, stil sayfanızda bir yerde tanımlandığı sürece var işlevi tarafından kullanılabilir.

Söz dizimi ilk başta biraz tuhaf görünebilir. Birçok geliştirici, "Değişken adları için neden $foo kullanılmıyor?" diye soruyor. Bu yaklaşım, mümkün olduğunca esnek olması ve gelecekte $foo makrolarına izin vermesi için özel olarak seçilmiştir. Arka plan bilgisi için spesifikasyon yazarlarından biri olan Tab Atkins'in bu yayınını okuyabilirsiniz.

Özel özellik söz dizimi

Özel mülkün söz dizimi basittir.

--header-color: #06c;

Özel özelliklerin büyük/küçük harfe duyarlı olduğunu unutmayın. Bu nedenle --header-color ve --Header-Color farklı özel özelliklerdir. İlk bakışta basit görünse de özel özellikler için izin verilen söz dizimi aslında oldukça esnektir. Örneğin, aşağıdakiler geçerli özel mülkler olarak kabul edilir:

--foo: if(x > 5) this.width = 10;

Bu, normal bir mülkte geçersiz olacağı için değişken olarak yararlı olmasa da çalışma zamanında JavaScript ile okunabilir ve üzerinde işlem yapılabilir. Bu, özel özelliklerin günümüzün CSS önişleyicileriyle şu anda mümkün olmayan her türlü ilginç tekniğin kilidini açma potansiyeline sahip olduğu anlamına gelir. Dolayısıyla, "Yawn SASS'im var, ne olacak?" diye düşünüyorsanız bir kez daha düşünün. Bunlar, alıştığınız değişkenler değildir.

Şelale

Özel mülkler standart basamaklı kurallara uyar. Bu nedenle, aynı mülkü farklı düzeylerde tanımlayabilirsiniz.

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
</div>

Bu sayede, duyarlı tasarıma yardımcı olmak için medya sorgularındaki özel özelliklerden yararlanabilirsiniz. Bir kullanım alanı, ekran boyutu arttıkça ana bölümlendirme öğelerinizin etrafındaki kenar boşluğunu genişletmektir:

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

Yukarıdaki kod snippet'inin, medya sorguları içinde değişken tanımlayamayan günümüz CSS önişleyicileri kullanılarak mümkün olmadığını belirtmek önemlidir. Bu yeteneğe sahip olmak size birçok fırsat sunar.

Değerlerini diğer özel mülklerden alan özel mülklere de sahip olabilirsiniz. Bu, tema oluşturma için son derece yararlı olabilir:

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

var() işlevi

Özel bir mülkün değerini almak ve kullanmak için var() işlevini kullanmanız gerekir. var() işlevinin söz dizimi şu şekildedir:

var(<custom-property-name> [, <declaration-value> ]? )

Burada <custom-property-name>, yazar tarafından tanımlanan bir özel mülkün adı (ör. --foo) ve <declaration-value>, başvurulan özel mülk geçersiz olduğunda kullanılacak yedek değerdir. Yedek değerler, tek bir değerde birleştirilecek virgülle ayrılmış bir liste olabilir. Örneğin var(--font-stack, "Roboto", "Helvetica");, "Roboto", "Helvetica" için yedek tanımlar. Boşluk ve dolgu için kullanılanlar gibi kısaltma değerlerinin virgülle ayrılmadığını unutmayın. Bu nedenle, dolgu için uygun yedek değer şöyle görünür.

p {
    padding: var(--pad, 10px 15px 20px);
}

Bileşen yazarları, bu yedek değerleri kullanarak öğeleri için savunma amaçlı stiller yazabilir:

/* In the component’s style: */
.component .header {
    color: var(--header-color, blue);
}
.component .text {
    color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
    --text-color: #080;
    /* header-color isn’t set,
        and so remains blue,
        the fallback value */
}

Özel mülkler gölge sınırlarını aşabileceğinden bu teknik, özellikle Shadow DOM kullanan Web Bileşenleri'nin temasını belirlemek için kullanışlıdır. Web bileşeni yazarı, yedek değerleri kullanarak ilk tasarımı oluşturabilir ve özel özellikler biçiminde tema "kancaları" gösterebilir.

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

var() kullanırken dikkat etmeniz gereken birkaç nokta vardır. Değişkenler mülk adları olamaz. Örneğin:

.foo {
    --side: margin-top;
    var(--side): 20px;
}

Ancak bu, margin-top: 20px; ayarıyla aynı değildir. Bunun yerine, ikinci beyan geçersizdir ve hata olarak atılır.

Benzer şekilde, bir kısmının değişken tarafından sağlandığı bir değeri (basitçe) oluşturamazsınız:

.foo {
    --gap: 20;
    margin-top: var(--gap)px;
}

Bu, margin-top: 20px; ayarıyla aynı değildir. Bir değer oluşturmak için başka bir şeye ihtiyacınız vardır: calc() işlevi.

calc() işlevini kullanarak değerler oluşturma

Daha önce hiç kullanmadıysanız calc() işlevi, CSS değerlerini belirlemek için hesaplama yapmanıza olanak tanıyan kullanışlı bir araçtır. Tüm modern tarayıcılarda desteklenir ve yeni değerler oluşturmak için özel özelliklerle birleştirilebilir. Örneğin:

.foo {
    --gap: 20;
    margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

JavaScript'te özel mülklerle çalışma

Özel bir mülkün değerini çalışma zamanında almak için hesaplanan CSSStyleDeclaration nesnesinin getPropertyValue() yöntemini kullanın.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

Benzer şekilde, özel özelliğin değerini çalışma zamanında ayarlamak için CSSStyleDeclaration nesnesinin setProperty() yöntemini kullanın.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

Ayrıca, setProperty() çağrınızda var() işlevini kullanarak özel mülkün değerini çalışma zamanında başka bir özel mülke referans verecek şekilde ayarlayabilirsiniz.

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

Özel mülkler, stil sayfalarınızdaki diğer özel mülklere atıfta bulunabileceğinden, bunun her türlü ilginç çalışma zamanı efektine yol açabileceğini tahmin edebilirsiniz.

Tarayıcı desteği

Özel mülkler şu anda Chrome 49, Firefox 42, Safari 9.1 ve iOS Safari 9.3'te desteklenmektedir.

Demo

Özel mülkler sayesinde artık yararlanabileceğiniz ilginç tekniklerin tümünü görmek için örneği deneyin.

Daha fazla bilgi

Özel mülkler hakkında daha fazla bilgi edinmek istiyorsanız Google Analytics Ekibi'nden Philip Walton'ın özel mülklerden neden heyecan duyduğu hakkında yazdığı giriş niteliğindeki makaleyi inceleyebilirsiniz. Özel mülklerin diğer tarayıcılarda kullanıma sunulması konusundaki gelişmeleri chromestatus.com adresinden takip edebilirsiniz.