Properties ve values API

CSS Properties and Values API ile değişken kaydı öğrenirsin.

@property ile tipli değişken

@property bildirimiyle bir CSS değişkenini tipli ve davranışlı kaydedersin. syntax, inherits ve initial-value alanları zorunludur. Örneğin syntax: '<color>' yazınca tarayıcı değeri renk olarak doğrular.

Tipli değişkenler transition ile canlandırılabilir; tipsize var(--x) değişkenleri canlandırılamaz. Bu, Properties & Values API'nin en büyük kazancıdır.

inherits ve initial-value

inherits: true yazınca değişken alt öğelere geçer; false yazınca yalnızca tanımlandığı öğede kalır. initial-value, değişken hiç ayarlanmadığında kullanılan başlangıç değeridir.

Bu üç alan birleşince değişken artık bir dize değil, bir tipli değer olur. Tarayıcı onu doğrular, kalıtımla yayar ve gerektiğinde canlandırır.

Uygulama --accent için @property yaz

Aşağıdaki CSS'i tamamla. @property --accent bildiriminde syntax: '<color>', inherits: true ve initial-value: #f59e0b olsun.

Örnek çözümü göster

/* vurgu rengi için tipli değişken */
@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #f59e0b;
}

Kendini test et

@property'nin syntax alanı '<color>' ne yapar?
```
@property --x {
  syntax: '<color>';
  /* syntax ne yapar? */
}
```
- Worklet dosyasını yükler
- Animasyon zamanlamasını ayarlar
- Seçici önceliğini yükseltir
- Değeri renk olarak doğrular ve tip bilgisi verir
Cevabı göster

Değeri renk olarak doğrular ve tip bilgisi verir — Doğru. syntax '<color>', tarayıcının değeri renk olarak doğrulamasını ve tip bilgisi vermesini sağlar.

@property initial-value yaz

@property --brand {
  syntax: '<color>';
  inherits: true;
  initial-value: ____;
}

Cevabı göster

@property --brand {
  syntax: '<color>';
  inherits: true;
  initial-value: #6366f1;
}

@property alanlarını eşle

syntax

Değerin tipi
inherits

Kalıtım davranışı
initial-value

Başlangıç değeri
@property

Değişken kaydı

Sıradaki ders: Typed OM

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler