CSS @property kuralı
Tanım ve kullanım
CSS @property
Kurallar, stil tablosunda doğrudan özelleştirilmiş CSS özelliklerini tanımlamak için kullanılır ve herhangi bir JavaScript çalıştırmak zorunda değilsiniz.
@property
Kurallar veri türü denetimi ve kısıtlama işlevlerine sahiptir, varsayılan değer ayarlayabilir ve özelliğin değerlerini devralıp devralamayacağını tanımlayabilir.
Kullanım: @property
Avantajları:
- Tip denetimi ve kısıtlama: özelleştirilmiş özelliğin veri türünü belirtmek zorundasınız, örneğin <number>、<color>、<length> vb. Bu, hataları önleyebilir ve özelleştirilmiş özelliğin doğru kullanılmasını sağlayabilir.
- Varsayılan değer ayarlama: özelleştirilmiş özellik için varsayılan değer ayarlayabilirsiniz. Bu, daha sonra geçersiz bir değer atandığında tarayıcının tanımlanan geri bildirim değerini kullanmasını sağlar.
- Devralma davranışı ayarlama: özelleştirilmiş özelliğin ebeveyn elemanından devralabilir olup olmadığını belirlemek zorundasınız.
Örnek: özelleştirilmiş özellik tanımlama
@property --my-color { syntax: "<color>"; inherits: true; initial-value: lightgray; }
Bu tanım, --my-color'nın bir renk özelliği olduğunu ve bu özelliğin değerlerini ebeveyn elemanından devralabileceğini ve varsayılan değeri lightgray olduğunu gösterir.
CSS'te özelleştirilmiş özelliklerin kullanımı:
body {}} backgound-color: var(--my-color); }
Örnek
Örnek 1
Aşama değişikliği için iki özelleştirilmiş öznitelik belirtin - ve bunları aşama değişikliğini canlandırmak için kullanın:
@property --startColor { syntax: "<color>"; initial-value: #EADEDB; inherits: false; } @property --endColor { syntax: "<color>"; initial-value: #BC70A4; inherits: false; }
Örnek 2
İki özelleştirilmiş öznitelik belirtin: biri projenin boyutu için, biri projenin rengi için:
@property --item-size { syntax: "<percentage>"; inherits: true; initial-value: 50%; } @property --item-color { syntax: "<color>"; inherits: false; initial-value: lightgray; }
CSS dilimi
@property --propertyname { syntax: "<color>"; initial-value: red; inherits: false; }
Öznitelik değeri
Değer | Açıklama |
---|---|
--propertyname | Gerekli. Özelleştirilmiş öznitelik adı. |
syntax |
<length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function> veya <custom-ident> olabilir, veya veri türü ve anahtar değer listesi olabilir. + (boşluk ile ayrılmış) ve # (virgülle ayrılmış) çarpanlar, bir değer listesi beklenir, örneğin <color># virgülle ayrılmış <color> değer listesi beklenen dilimi ifade eder. Çizgi (|) beklenen dilimi oluşturmak için "veya" koşulu sağlar, örneğin <length> | auto <length> veya auto kabul eder, <color># | <integer># ise virgülle ayrılmış <color> değer listesi veya virgülle ayrılmış <integer> değer listesi beklenir. |
initial-value | Özniteliklerin başlangıç değerini ayarlar. |
inherits | true veya false. @property tarafından belirlenen özelleştirilmiş öznitelik kaydının varsayılan olarak miras alınmasını kontrol eder. |
Tarayıcı desteği
Tablodaki rakamlar, bu @ kurallarını tamamen destekleyen ilk tarayıcı sürümünü gösterir.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
85 | 85 | 128 | 16.4 | 71 |
İlgili Sayfalar
Ders:CSS @property kuralı