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;
}

Kişisel olarak deneyin

Ö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;
}

Kişisel olarak deneyin

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ı