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ı