CSS Academy · Ders

Geri Dönüş Değerleri ve var()

Özel bir özellik tanımsız veya geçersiz olduğunda var() içinde geri dönüş değerleri sağlayın.

Geri Dönüş Değerleri ve var(), CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

var() Geri Dönüş Sözdizimi

var() işlevi, özel özellik tanımlanmadığında kullanılan geri dönüş değeri olarak isteğe bağlı bir ikinci bağımsız değişken kabul eder.

<button class="button">Fallback: royalblue</button>

Geri Dönüşler Ne Zaman Uygulanır

Geri dönüş şu durumlarda kullanılır:

Özellik kapsam içinde tanımlanmamışsa
Özelliğin değeri initial ise
Özellik, bağlamı için geçersiz bir değerle tanımlanmışsa

Birden Çok Geri Dönüş Düzeyi

Birden çok geri dönüş düzeyini zincirlemek için var() çağrılarını iç içe yerleştirin:

<p class="text">Falls through two levels to #3b82f6</p>

Geri Dönüş Herhangi Bir Değer Olabilir

Geri dönüşler, özellik için geçerli olan herhangi bir değer olabilir; buna diğer değişkenler, hesaplanmış değerler veya sabit değerler de dahildir:

<div class="card">16px / 50%</div>

initial Anahtar Sözcüğü

Bir özel özelliği initial olarak ayarlamak, bu özellik hiç ayarlanmamış gibi davranılmasını sağlar. Geri dönüşle birlikte kullanıldığında bileşenlerin devralınan bir özel özellikten çıkmasını mümkün kılar.

<div class="no-theme">
  <button class="button">Falls back to gray</button>
</div>

Kesin Olarak Geçersiz Değer

initial değerini özel özellik değeri olarak kullanmak, geri dönüşün devreye girmesini garanti eden bir tekniktir. Bu, CSS'te isteğe bağlı özellik bayrakları oluşturmanızı sağlayabilir.

Özel Özellik + @property

@property kuralı (Houdini), garanti edilmiş bir başlangıç değerine sahip, türü belirtilmiş bir özel özelliği kaydeder. Bu yöntem, geri dönüşlere güvenmekten daha sağlamdır.

<div class="track">
  <div class="bar"></div>
</div>

Animasyonla Uyumlu Değerler için Geri Dönüş

Bir özel özellik ayarlanmadığında bile geçişlerin çalışmasını sağlamak için geçişin başlayabileceği güvenli bir geri dönüş değeri sağlayın:

<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>

Eksik Değişkenlerde Hata Ayıklama

Bir özel özellik eksikse ve geri dönüş sağlanmamışsa, özellik başlangıç değerine (çoğunlukla initial anahtar sözcüğüne) hesaplanır. Renklerde bu durum beklenmedik saydam veya siyah sonuçlar oluşturabilir. Kritik özelliklere her zaman geri dönüş değerleri ekleyin.

Özel Özelliklerde var()

Özel özellik değerleri kendileri de başka özel özelliklere başvurabilir ve bir belirteç zinciri oluşturabilir:

<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>

Geri Dönüş ve Özgüllük

Geri dönüş değerlerinin özgüllükle hiçbir ilgisi yoktur; yalnızca başvurulan özel özellik tanımsız veya geçersiz olduğunda uygulanırlar. Özgüllük, hangi kuralın özel özelliği belirleyeceğini belirler; hangi geri dönüş değerinin kazanacağını değil.

Hızlı Kontrol

--theme-text tanımlı olmadığında color: var(--theme-text, #111) ne yapar?

Özet

var(--name, fallback), özel özellik tanımlı olmadığında bir geri dönüş değeri sağlar. Birden çok seviye için geri dönüş değerleri iç içe kullanılabilir. Türü belirlenmiş ve başlangıç değerleri garanti edilen özel özellikler için @property kullanın. Kritik görsel özellikler için her zaman geri dönüş değeri sağlayın.

Sıkça Sorulan Sorular

“Geri Dönüş Değerleri ve var()” dersi ücretsiz mi?

Evet — “Geri Dönüş Değerleri ve var()” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Geri Dönüş Değerleri ve var()” dersinde ne öğreneceğim?

Özel bir özellik tanımsız veya geçersiz olduğunda var() içinde geri dönüş değerleri sağlayın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Geri Dönüş Değerleri ve var()” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön