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

CSS Değişkenleri: Neden önemsemelisiniz?

Rob Dodson

Daha doğru bir şekilde CSS özel özellikleri olarak bilinen CSS değişkenleri, Chrome 49'da kullanıma sunuluyor. CSS'de tekrarı azaltmanın yanı sıra tema değiştirme ve gelecekteki CSS özelliklerini genişletme/çoklu doldurma gibi güçlü çalışma zamanı efektleri için de yararlı olabilirler.

CSS dağınıklığı

Uygulama tasarlarken uygulamanın görünümünü tutarlı tutmak için yeniden kullanılacak bir dizi marka rengini bir kenara ayırmak yaygın bir uygulamadır. Ne yazık ki, bu renk değerlerini CSS'nizde tekrar tekrar tekrarlamak yalnızca angarya değil, aynı zamanda hataya yatkın bir yöntemdir. Bir noktada, renklerden birinin değiştirilmesi gerekirse rüzgara karşı dikkatli olun ve her şeyi “bul ve değiştir” yapabilirsiniz, ancak yeterince büyük bir projede bu durum kolayca tehlikeli hale gelebilir.

Son zamanlarda birçok geliştirici, bu sorunu ön işlemci değişkenlerini kullanarak çözen SASS veya DAHA AZ gibi CSS ön işlemcilerine başvurmuştur. Bu araçlar geliştirici üretkenliğini büyük ölçüde artırmış olsa da kullandıkları değişkenlerin büyük bir dezavantajı var. Bu dezavantajların statik olması ve çalışma zamanında değiştirilememesi. Çalışma zamanında değişkenleri değiştirebilme olanağı sunmak yalnızca dinamik uygulama teması gibi özelliklerin kapılarını açmakla kalmaz, aynı zamanda duyarlı tasarımı ve gelecekteki CSS özelliklerini çoklu doldurma potansiyelini de önemli ölçüde etkiler. Chrome 49 sürümüyle birlikte bu özellikler artık CSS özel özellikleri biçiminde kullanılabilir.

Özel nitelikler özeti

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

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

Başarılı bir proje için

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

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

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

var() işlevi, kendisini özel özellik değerini alır ve bununla değiştirir ve sonuçta color: #06c; olur. Özel özellik stil sayfanızda bir yerde tanımlandığı sürece, var işlevi tarafından kullanılabilir.

Söz dizimi başlangıçta biraz tuhaf görünebilir. Pek çok geliştirici, "Değişken adları için neden $foo öğesini kullanmıyorsunuz?" diye sorar. Yaklaşım, mümkün olduğunca esnek olacak ve gelecekte $foo makrolarına izin verebilecek şekilde özel olarak seçilmiştir. Arka hikaye için, spesifikasyon yazarlarından biri olan Tab Atkins'in bu yazısını okuyabilirsiniz.

Özel özellik söz dizimi

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

--header-color: #06c;

Özel özelliklerin büyük/küçük harfe duyarlı olduğunu, bu nedenle --header-color ve --Header-Color özelliklerinin farklı özel özellikler olduğunu unutmayın. Bunlar göründüğü kadar basit gibi görünse de özel özellikler için izin verilen söz dizimi aslında oldukça geniş kapsamlıdır. Örneğin, aşağıdakiler geçerli bir özel niteliktir:

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

Bu değişken, herhangi bir normal özellikte geçersiz olacağından, değişken olarak işe yaramasa da çalışma zamanında JavaScript ile okunabilir ve uygulanabilir. Bu, özel mülklerin günümüzün CSS ön işlemcileriyle şu anda mümkün olmayan her türlü ilginç tekniği açığa çıkarma potansiyeline sahip olduğu anlamına gelir. "Esneme, ben SASS'im var, kimin umurun ki..." diye düşünüyorsanız ikinci kez bakın. Bunlar üzerinde çalışmaya alışık olduğunuz değişkenler değildir.

Şelale

Özel mülkler standart basamaklı kuralları izler. Bu sayede, aynı mülkü farklı belirlilik düzeylerinde 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, duyarlı tasarıma yardımcı olması için medya sorgularındaki özel özelliklerden yararlanabileceğiniz anlamına gelir. Kullanım alanlarından biri, ekran boyutu büyüdükçe ana bölümlendirme öğelerinizin çevresindeki kenar boşluklarını genişletmek olabilir:

:root {
    --gutter: 4px;
}

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

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

Medya sorguları içinde değişkenleri tanımlayamayan günümüzün CSS ön işlemcileri kullanılarak yukarıdaki kod snippet'inin mümkün olmadığını önemle hatırlatırız. Bu yeteneğe sahip olmak, büyük bir potansiyel ortaya çıkarır.

Değerlerini diğer özel mülklerden alan özel mülklere de sahip olmak da mümkündür. Bu, temalar için son derece yararlı olabilir:

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

var() işlevi

Bir özel özelliğin değerini almak ve kullanmak için var() işlevini kullanmanız gerekir. var() işlevinin söz dizimi şöyle görünür:

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

Burada <custom-property-name>, yazar tarafından tanımlanan özel özelliğin (ör. --foo) adıdır ve <declaration-value>, başvurulan özel özellik 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" yedeğini tanımlar. Kenar boşluğu ve dolgu için kullanılanlar gibi kısaltma değerlerinin virgülle ayrılmadığını unutmayın. Bu nedenle, dolgu için uygun bir yedek şöyle görünür.

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

Bir bileşen yazarı, bu yedek değerleri kullanarak öğesi için savunma stilleri 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 özellikler gölge sınırlarını aşın. Bu nedenle, bu teknik özellikle Gölge DOM kullanan Web Bileşenleri temalarının oluşturulmasında yararlıdır. Bir Web Bileşeni yazarı, yedek değerleri kullanarak bir başlangıç tasarımı oluşturabilir ve bunlara, özel özellikler biçiminde "kancalar" sunabilir.

<!-- 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ç şey var. Değişkenler özellik adı olamaz. Örneğin:

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

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

Benzer şekilde, değerin bir kısmı bir değişken tarafından sağlandığında (sahte olarak) bir değer oluşturamazsınız:

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

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

Calc() ile değer oluşturma

Daha önce bu işlevle hiç çalışmadıysanız calc() işlevi, CSS değerlerini belirlemek için hesaplamalar yapmanıza olanak tanıyan kullanımı kolay 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 özelliklerle çalışma

Çalışma zamanında bir özel özelliğin değerini elde etmek 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, çalışma zamanında özel özelliğin değerini 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ısındaki var() işlevini kullanarak, özel özelliğin değerini çalışma zamanında başka bir özel mülke başvuruda bulunacak ş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 özellikler, stil sayfalarınızdaki diğer özel özelliklere başvuruda bulunabildiğinden, bunun her türlü ilginç çalışma zamanı efektine nasıl yol açabileceğini düşünebilirsiniz.

Tarayıcı desteği

Şu anda Chrome 49, Firefox 42, Safari 9.1 ve iOS Safari 9.3 özel özellikleri desteklemektedir.

Demografi

Özel özellikler sayesinde artık kullanabileceğiniz tüm ilginç tekniklere göz atmak için örneği deneyin.

Daha fazla bilgi

Özel mülkler hakkında daha fazla bilgi edinmek istiyorsanız Google Analytics ekibinden Philip Walton, özel mülklerden neden memnun kaldığını açıklayan bir bülten yazdı. Diğer tarayıcılardaki ilerleme durumunu chromestatus.com üzerinden takip edebilirsiniz.