CSS @property Kuralları

CSS @property Kuralları

@property Kural, tarayıcıdaki tarayıcı tablosunda doğrudan özelleştirilmiş CSS özelliklerini tanımlamak için kullanılır ve herhangi bir JavaScript çalıştırmak zorunda değildir.

@property Kural, veri türü denetimi ve kısıtlamalar, varsayılan değerleri ayarlar ve özelliğin değerlerini devralıp devralamayacağını tanımlar.

Özelleştirilmiş özelliklerin örneklerini tanımlar:

@property --myColor {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

Yukarıdaki tanım --myColor Bir renk özelliğidir, ebeveyn elemanın değerini devralabilir ve varsayılan değeri lightgray'dır.

CSS'te özelleştirilmiş özellikleri kullanmak için var() Fonksiyon:

body {
  background-color: var(--myColor);
}

Kullanım @property Avantajları:

• Türü kontrol：Özelleştirilmiş özelliklerin veri türünü belirtmek zorundasınız, örneğin <number>、<color>、<length>。Hataları önler ve özelleştirilmiş özelliklerin doğru kullanılmasını sağlar.
• Varsayılan değer ayarlama：Özelleştirilmiş özelliklere varsayılan değer ayarlayabilirsiniz. Bu, daha sonra geçersiz değerler atanmışsa tarayıcının tanımladığı yedek değerleri kullanmasını sağlar.
• Devralma davranışını ayarlama：Özelleştirilmiş özelliklerin ebeveyn öğesinin değerlerini devralıp devralmayacağını belirlemek zorundasınız.

Tarayıcı desteği

Tablo içindeki rakamlar, bu kuralı tamamen destekleyen ilk tarayıcı sürümünü gösterir.

Basit @property örneği

Bu örnekte, iki özelleştirilmiş özellik tanımlanmıştır:--my-bg-color ve --my-txt-color. Sonra, div background-color ve color içinde özelleştirilmiş özellikler kullanılır:

Örnek

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  syntax: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

Kişisel olarak deneyin

bir diğer @property örneği

Bu örnekte, <div> öğesinde varsayılan özelleştirilmiş özelliği kullanıyoruz. Sonra, .fresh ve .nature Özelleştirilmiş özellikleri sınıfın içinden geçiren (diğer renkler ayarlanarak), etkisi çok iyidir:

Örnek

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

Kişisel olarak deneyin

hataları önlemek için tür denetimi ve yedek değerler kullanır

Bu örnekte, .nature Sınıfın özelleştirilmiş özellikleri sayısal olarak ayarlanmıştır. Bu geçersizdir, tarayıcı initial-value Özellikte tanımlanan yedek renk (lightgray):

Örnek

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

Kişisel olarak deneyin

inherits değerini kullanarak

Bu örnekte, inherits Değer ayarlanmıştır: falseBu, özelleştirilmiş özelliklerin ebeveyn öğesinden değerlerini devralmayacağı anlamına gelir. Sonuçları görün:

Örnek

@property --my-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Kişisel olarak deneyin

Bir sonraki örnek, inherits Değer ayarlanmıştır: trueBu, özelleştirilmiş özelliklerin ebeveyn öğesinden değerlerini devralacağı anlamına gelir. Sonuçları görün:

Örnek

@property --my-bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

Kişisel olarak deneyin

@property ile pürüzsüz animasyonlar oluşturma

Kullanım @property Önceden canlandırılamayan içerikleri canlandırmak için yeni fırsatlar sunan kurallar: Geçiş. Aşağıdaki örneği inceleyin:

Örnek

Geçiş için iki özel değişken belirtin:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Kişisel olarak deneyin

CSS @property Kuralları