Özel mülkler

Siteniz için bazı ilk stilleri oluşturduğunuzu ve CSS'nizdeki bazı değerleri tekrarladığınızı varsayalım. dodgerblue rengini birincil renginiz olarak kullanıyorsunuz ve bu rengi düğme kenarlıklarına, bağlantı metnine, başlık arka planlarına ekliyorsunuz. Ayrıca, sitenin diğer bölümleri için bu mavi rengin bazı varyantlarını seçmek üzere bir tasarım aracı kullanıyorsunuz. Ardından bir stil kılavuzu alırsınız ve birincil renk oklch(70% 0.15 270) olur.

Özel özellikler veya CSS değişkenleri, CSS'nizdeki değerleri düzenlemenize ve yeniden kullanmanıza olanak tanır. Böylece stilleriniz daha esnek ve anlaşılması daha kolay olur.

Mülk oluşturma

Bir mülk oluşturmanın en basit yolu, tanımladığınız bir ada sahip yeni bir mülkte değer belirlemektir.

.card {
  --base-size: 1em;
}

Tüm özellik adları iki kısa çizgiyle başlamalıdır. Bu, özel bir değer için mevcut bir CSS özelliği adını kullanmaya çalışmanızı engeller. CSS spesifikasyonu, iki tireyle başlayan bir özelliği asla eklemez.

Bu özelliğe daha sonra var() işleviyle erişilebilir. Bu örnekte, .card-title içindeki yazı tipi boyutu --base-size değerinin iki katı olarak ayarlanır.

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

Özel özellik kullanma

Gördüğünüz gibi, özel bir özelliğin değerini var() işleviyle kullanabilirsiniz. Değerlerde var() işlevini kullanabilirsiniz ancak medya sorgularında kullanamazsınız. Bu işlevler, diğer CSS işlevleri için bağımsız değişken olarak özellikle yararlıdır.

Yedekler

Değeri ayarlanmamış bir özel özelliği kullanmaya çalışırsanız ne olur? var() işlevi, yedek değer olarak kullanılacak ikinci bir değer alır. Yedek değer, iç içe yerleştirilmiş var() içeren başka bir özel mülk bile olabilir.

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

Geçersiz değerler

Bir özel özellik geçersiz bir değere (ör. background-color özelliği için 1em değeri) çözümlenirse bu öğede söz konusu özellik için geçerli olan diğer bildirimler kullanılmaz. Bunun nedeni, tarayıcının bir değeri hesaplarken diğer bildirimleri atmadan önce bir değerin geçersiz olup olmadığını bilememesidir. Bunun yerine, kullanılan değer devralınan veya başlangıç değeri olur.

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

Yukarıdaki örnekte, .invalid öğesinin arka planı mavi olmaz. Ancak background-color devralmadığı için değer, başlangıç değeri olan transparent olur.

Geçersiz kılma ve devralma

Çoğu zaman, değerlerin devralındığı özel özelliklerin varsayılan davranışını kullanmak istersiniz. Bir özellik için yeni bir değer ayarladığınızda, bu öğe ve tüm alt öğeleri, başka bir değerle geçersiz kılınana kadar bu değere sahip olur.

Özel özellikler basamaklama ile belirlenir. Bu nedenle, daha spesifik bir seçici tarafından da geçersiz kılınabilir.

@property ile daha fazla kontrol

Bir değer ayarlanarak oluşturulan özel özellik herhangi bir türde olabilir ve devralınır. Özel bir özellik üzerinde daha fazla kontrol sahibi olmak için @property kuralını kullanabilirsiniz.

Daha önce oluşturduğumuz --base-size mülkü, bu @property beyanına eşdeğerdir.

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

syntax değeri, özellik için geçerli olan CSS değerlerinin türlerini ayarlar. Bu mülkte farklı bir tür ayarlarsanız bu tür geçersiz olur ve ilk değere veya basamakta daha yukarıda ayarlanmış bir devralınan değere geri döner.

@property kullanarak özel bir özellik oluşturduğunuzda inherit: false ile devralmayı devre dışı bırakabilirsiniz. Devralma devre dışı bırakılmışken özel bir özelliğin değerini geçersiz kılmak, değeri seçilen öğe için değiştirir ancak alt öğeleri için değiştirmez. Bu özellik, birden fazla seçici aynı öğeyi hedeflediğinde genellikle kullanışlıdır.

initial-value, daha sonra değiştirilmediği sürece özelliğin değerini ayarlar. Söz dizimi * (herhangi bir CSS türü anlamına gelir) olmadığı sürece @property, initial-value değerini ayarlamalıdır. Bu, özelliğin her zaman belirtilen söz dizimine ait bir değere sahip olmasını ve hiçbir zaman tanımsız olmamasını sağlar.

Özel özellikleri JavaScript ile güncelleme

Bir öğedeki özel özelliğin değeri, JavaScript kullanılarak güncellenebilir. Bu özelliği, sitenizin stillerini dinamik olarak güncellemek için kullanabilirsiniz.

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

Bu örnekte, #my-button öğesindeki stil etiketi güncellenir. Geliştirici Araçları'nda incelendiğinde aşağıdaki bilgiler gösterilir:

<button id="my-button" style="--color: orange">Click me</button>

Önceki örnekte, özel HTML özelliklerinde depolanan verilere erişerek özel özelliklerin nasıl ayarlanabileceğini görebilirsiniz. Her düğmenin, belirli bir rengin değerine sahip bir data-color özelliği vardır. Gövde öğesinde ayarlanan --background özel özelliği, tıklanan düğmede data-color değerine sıfırlanır.

Belirli bir öğedeki bir özelliğin değerini almak için getComputedStyle(element).getPropertyValue("--variable") de kullanabilirsiniz. Mantığınızın basamaklı bir değere yanıt vermesi gerekiyorsa bu yöntem faydalı olabilir.