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 ve Chrome 49'da kullanıma sunuluyor. Bunlar, CSS'deki tekrarları azaltmak için faydalı olabilir ve tema değiştirme gibi güçlü çalışma zamanı efektleri, gelecekteki CSS özelliklerini genişletme/çoklu doldurma.

CSS karmaşıklığı

Uygulama tasarlarken, uygulamaya özgü bir uygulama olan tutarlı bir görünüm sağlamak üzere yeniden kullanılacak renkler Ne yazık ki, bu renk değerlerini CSS'de tekrar tekrar aynı zamanda hataya yatkın olması anlamına gelir. Bir noktada renklerden biri gerekirse rüzgara karşı dikkatli davranıp "bul ve değiştir" özelliğini kullanabilirsiniz ama yeterince büyük bir projede bu kolayca tehlikeli bir hale gelebilir.

Son zamanlarda birçok geliştirici, SASS veya SSA gibi CSS ön işlemcilerine DAHA AZ bu sorunu ön işlemci değişkenlerinin yardımıyla çözer. Bu sırada Bu araçlar geliştiricilerin üretkenliğini önemli ölçüde artırdı; en büyük dezavantajlarından biri, sabit olmaları ve hiçbir zaman çalışma zamanında değiştirildi. Yalnızca çalışma zamanında istenen değişkenleri değil, değişkenleri dinamik uygulama teması gibi şeylere kapı açar, ancak aynı zamanda duyarlı tasarımın sonuçları ve gelecekteki CSS'yi çoklu doldurma potansiyeli özellikleri. Chrome 49'un kullanıma sunulmasıyla birlikte bu özellikleri artık şurada da kullanabilirsiniz: biçimiyle ilgili daha fazla bilgi sunar.

Özel özellikler hakkında

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

Bir yazarın yazar tarafından seçilen ad.
Yazarın bu değerleri diğervar() özellikler.

Çevik yaklaşımın

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

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

--main-color, #06c değerine sahip, yazar tarafından tanımlanan bir özel özelliktir. Not emin olun.

var() işlevi, kendisini alır ve özel özellikle değiştirir değeri color: #06c; ile sonuçlanır. Özel özellik tanımlandığı sürece var işlevi tarafından kullanılabilir olması gerekir.

Söz dizimi ilk başta biraz tuhaf görünebilir. Birçok geliştirici, "Neden olmasın? değişken adları için yalnızca $foo kullanılsın mı?" Bu yaklaşım özellikle Esnektir ve gelecekte $foo makrolarına izin verebilir. Arka plan için bu yayını okuyabilirsiniz özel yazarlarından biri olan Tab Atkins'ten.

Özel mülk söz dizimi

Özel bir özelliğin söz dizimi basittir.

--header-color: #06c;

Özel özellikler büyük/küçük harfe duyarlı olduğundan --header-color ve --Header-Color farklı özel niteliklerdir. Genelde basit gibi görünse de orijinal değerinde olduğu gibi, özel özellikler için izin verilen toparlayıcı. Örneğin, aşağıdakiler geçerli bir özel mülktür:

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

Bu, bir değişken olarak kullanışlı olmaz, ancak üzerinde JavaScript ile de işlem yapılabilir. belirler. Bu da özel özelliklerin her türlü Bu, günümüzün CSS ön işlemcilerinde şu anda mümkün olmayan ilginç tekniklerden oluşuyor. ODK bu konuda "eğlence var mı? Kim bilir?" diye düşünüyorsanız bir kez daha kontrol edin. Bunlar çalışmaya alışkın olduğunuz değişkenler değildir.

Çağlayan

Özel mülkler standart basamaklı kurallarını izler. Böylece, aynı farklı kesinlik düzeylerinde bir mülk

: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, bir dizi kullanıcıya yardımcı olmak için medya sorgularının içindeki özel duyarlı tasarıma sahip. Bir kullanım alanı, kenar boşluğunu büyük bölümleme öğelerinize dikkat etmeniz gerekir:

:root {
    --gutter: 4px;
}

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

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

Yukarıdaki kod snippet'inin Günümüzde medya içinde değişkenleri tanımlayamayan CSS ön işlemcileri daha fazla bilgi edineceksiniz. Bu yeteneğe sahip olmak büyük bir potansiyelin kapısını aralar.

Ayrıca, değerlerini diğer özel özellikler. Bu yöntem, tema oluşturmak için son derece faydalı olabilir:

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

var() işlevi

Özel bir özelliğin değerini almak ve kullanmak için var() işlevi. var() işlevinin söz dizimi aşağıdaki gibidir:

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

Burada <custom-property-name>, yazar tarafından tanımlanan özel özelliğin adıdır --foo gibidir, <declaration-value> ise başvurulan özel özellik geçersiz. Yedek değerler virgülle ayrılabilir bir değerde birleştirilecektir. Örneğin var(--font-stack, "Roboto", "Helvetica");, "Roboto", "Helvetica" yedeğini tanımlar. Şurada sakla: kenar boşluğu ve dolgu için kullanılanlar gibi söndürme değerleri, virgülle ayrılmış olduğundan dolgu için uygun bir yedek şu şekilde görünür.

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

Bir bileşen yazarı, bu yedek değerleri kullanarak öğesi:

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

Bu teknik, özellikle Gölge kullanan Web Bileşenleri tema oluşturmak için yararlıdır DOM'ye gönderebilirsiniz. Web Bileşeni yazarı yedek değerleri kullanarak bir ilk tasarım oluşturabilir ve tema “kancaları” sunabilir elde edilir.

<!-- 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 özellik adları. Örneğin:

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

Ancak bu, margin-top: 20px; ayarlamakla eşdeğer değildir. Bunun yerine geçersizdir ve hata olarak atılır.

Benzer bir şekilde, kısmen) bir değer katmak için, onun bir parçasını değişken:

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

Tekrar belirtmek gerekirse bu, margin-top: 20px; ayarlamakla eşdeğer değildir. Bir web sitesi başka bir şeye ihtiyacınız var: calc() işlevi.

calc() ile değer oluşturma

Daha önce bu ürünle hiç çalışmadıysanız calc() işlevi, Bu aracı kullanarak CSS değerlerini belirlemek için hesaplamalar yapabilirsiniz. Tüm modern tarayıcılarda desteklenir ve bir arada kullanılabilir kullanarak yeni değerler oluşturabilirsiniz. Ö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 almak için getPropertyValue() işlevini kullanın. yöntemini kullanır.

/* 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öntemi.

/* 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');

Özel özelliğin değerini, başka bir özel öğeye referans verecek şekilde de özelliğini kullanarak çalışma zamanında istenen özellik için var() işlevini kullanarak setProperty().

/* 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, bunun nasıl ilgi çekici başka türde bir fotoğrafa yol açabileceğini çalışma zamanı efektleri.

Tarayıcı desteği

Şu anda Chrome 49, Firefox 42, Safari 9.1 ve iOS Safari 9.3 özel sürümleri desteklemektedir özellikler.

Demo

Denemek için örnek yararlanabileceğiniz tüm ilginç tekniklere göz atalım. .

Daha fazla bilgi

Özel özellikler hakkında daha fazla bilgi almak istiyorsanız, Google Analytics ekibi, özel mülkler konusunda neden heyecan duyduğu hakkında bir kılavuz yazdı ve ilerlemelerini izlemek için diğer chromestatus.com.