@property: Artık evrensel tarayıcı desteğine sahip yeni nesil CSS değişkenleri

Una Kravets

Yayınlanma tarihi: 12 Temmuz 2024

CSS'de yeni bir güce hazır olun. CSS Houdini API'lerinin bir parçası olan @property kuralı artık tüm modern tarayıcılarda tam olarak desteklenmektedir. Oyunun kurallarını değiştiren bu özellik, CSS özel mülkleri (CSS değişkenleri olarak da bilinir) için yeni düzeylerde kontrol ve esneklik sunar. Böylece stil sayfalarınızı daha akıllı ve dinamik hale getirir.

@property'ün avantajları

  • Anlamsal anlam: Özel özellikleriniz için bir tür (söz dizimi) tanımlamak üzere @property öğesini kullanın. Bu, tarayıcıya özel mülkünüzün ne tür veriler (ör. renkler, uzunluklar veya sayılar) içerdiğini bildirir. Böylece beklenmedik sonuçlar önlenir ve degradeleri animasyonlu hale getirme gibi yeni olasılıklar desteklenir.
  • Yedek değerler: Artık kaybolan stiller olmayacak. Özel bir mülk için başlangıç değeri ayarlamak üzere @property değerini kullanın. Daha sonra geçersiz bir değer atanırsa tarayıcı, tanımladığınız yedek değeri sorunsuz bir şekilde kullanır.
  • Daha iyi hata işleme: Gelişmiş tür güvenliği ve yedek ayarlama özelliği, doğrudan CSS'nizde test ve doğrulama için yeni fırsatlar sunar.

Gelişmiş özel mülkler oluşturma

"Standart" bir özel mülk oluşturmak için -- ile başlayan bir mülk adı ayarlayın ve bu mülke bir değer verin. Bu özel özelliklerin değeri tarayıcı tarafından dize olarak ayrıştırılır.

Aşağıdaki örnekte, varsayılan (dize tabanlı) özel mülkün nasıl başlatılacağı gösterilmektedir.

:root {
 --myColor: hotpink;
}

Dize dışındaki anlamlar da dahil olmak üzere bu "gelişmiş özel özelliklerin" avantajlarından yararlanmak için CSS özel özelliğinizi @property ile kaydedin.

Bu örnekte aynı özel mülk @property ile başlatılmıştır.

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

@property ile başlatılan özel mülk, yalnızca bir ad ve değerden çok daha fazla ayrıntı sağlar. Söz dizimi türünü içerir ve devralmayı doğru veya yanlış olarak ayarlar.

Bu yaklaşımın avantajı, standart mülkte bu mülkün değer olarak bir renk içermesini beklemeniz ve bu rengi stil sayfasının başka bir yerinde kullanmanızdır. Bir kullanıcı bu özelliği değer olarak sayı olacak şekilde güncellerse mülkün başka bir yerde kullanılması başarısız olur. @property kullanıldığında, bu mülkün bir renk değeri içermesi gerektiğini belirten bir syntax ile birlikte yedek bir renk tanımlanır. Renk olmayan bir değer kullanılacaksa bunun yerine yedek değer kullanılır.

Demo: Işıldayan gradyan arka plan

@property'ün en güzel uygulamalarından biri, tarayıcı tarafından resim olarak algılanan degradeler gibi daha önce geçişi imkansız olan özelliklerin sorunsuz bir şekilde animasyonudur. Ancak @property aracılığıyla değişkenlere söz dizimi anlamı verirseniz bunlar bir gradyan ifadesinde kullanılabilir. Artık gradyan içinde tanımlanan iki değer arasındaki animasyonu açıklayarak animasyonu etkinleştiriyorsunuz. Aşağıdaki örneği ele alalım: Farklı zaman çizelgelerinde renk değiştiren iki radyal degradeden oluşan, ince bir arka plan animasyonu içeren bir kart:

Arka plan gradyanındaki renkleri animasyonlu hale getirmek için @property kullanarak stil oluşturma.

Bunu, özel mülk değerlerinizi renk olarak ayarlayarak yapabilirsiniz:

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

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

Ardından, ilk degrade arka planı oluşturmak için bunlara erişirsiniz:

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

Ayrıca, animasyon karelerindeki değerleri güncelleyebilirsiniz:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

Her birini canlandırın:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

Sonuç

CSS kayıtlı özel özellikleri, CSS değişkenlerine anlam ve bağlam sağlayarak CSS dilini genişleten çok güçlü bir özelliktir. @property'ün ana hatlara eklenmesiyle bu CSS süper gücü daha da güçleniyor.

Ek Kaynaklar