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

Una Kravets

CSS desteği için hazır olun! CSS Houdini API çatısının bir parçası olan @property kuralı, artık tüm modern tarayıcılarda tam olarak desteklenmektedir. Ezber bozan bu özellik, CSS özel mülkleri (CSS değişkenleri olarak da bilinir) için yeni kontrol ve esneklik seviyeleri sunar. Böylece stil sayfalarınızı daha akıllı ve dinamik hale getirir.

Tarayıcı Desteği

  • 85
  • 85
  • 128
  • 16,4

Kaynak

@property avantajları

  • Anlamlı anlam: Özel özellikleriniz için bir tür (sözdizimi) tanımlamak üzere @property kullanın. Bu işlem, tarayıcıya özel mülkünüzün ne tür verileri (ör. renkler, uzunluklar veya sayılar) tuttuğunu bildirerek beklenmedik sonuçları önler ve renk geçişlerini canlandırma gibi yeni olasılıkları destekler.
  • Yedek değerler: Kaybolan stillere son! Özel bir özelliğin başlangıç değerini ayarlamak için @property kullanın. Daha sonra geçersiz bir değer atanırsa tarayıcı, tanımladığınız yedeği sorunsuz bir şekilde kullanır.
  • İyileştirilmiş hata işleme: Geliştirilmiş 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 nitelikler oluşturma

"Standart" bir özel mülk oluşturmak için başında -- bulunan bir özellik adı ayarlayın ve bu özelliğe 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ı) bir özel özelliğin nasıl başlatıldığı gösterilmektedir.

:root {
 --myColor: hotpink;
}

Dizenin ötesindeki anlamlar da dahil olmak üzere bu "gelişmiş özel özelliklerin" avantajlarından yararlanmak için CSS özel mülkünüzü @property ile kaydedin.

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

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

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

Bu yaklaşımın avantajı, standart özellikte, söz konusu özelliğin değer olarak bir renk içermesini beklemeniz ve bu rengi stil sayfasının başka bir yerinde kullanacak olmanızdır. Bir kullanıcı bu özelliği değer olarak bir sayı içerecek şekilde güncellerse mülkün başka bir yerde kullanımı başarısız olur. @property kullanıldığında, tanımlanmış bir yedek renk ve bu özelliğin bir renk değerine sahip olması gerektiğini belirten bir syntax bulunuyor. Renk olmayan bir değer kullanılırsa bunun yerine yedek kullanılır.

Demo: Yanıp sönen gradyan arka plan

@property özelliğinin düzgün uygulamalarından biri, tarayıcı tarafından resim olarak algılanan gradyanlar gibi daha önce geçişi mümkün olmayan özelliklerin akıcı animasyonudur. Bununla birlikte, değişkenlere @property aracılığıyla söz dizimsel anlamlar verirseniz bunlar bir gradyan ifadesinde kullanılabilir. Şimdi, gradyan içinde bildirilen iki değer arasındaki animasyonu açıklayarak animasyonu açıklıyorsunuz. Şu örneği ele alalım: Rengi farklı zaman çizelgelerinde değiştiren iki dairesel renk geçişinden oluşan, incelikli bir arka plan animasyonu içeren bir kart:

Arka plan renk geçişinde renklerin stilini belirlemek için @property kullanma.

Bunu, özel mülk değerlerinizi renkler olarak ayarlayarak elde edebilirsiniz:

@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, başlangıç gradyan arka planını 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%);
}

Buna ek olarak, animasyon karelerindeki değerleri de güncellersiniz:

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

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

Her birine animasyon ekleyin:

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

Sonuç

CSS'ye kayıtlı özel özellikler, CSS değişkenlerine anlam ve bağlam sağlayarak CSS dilini genişleten çok güçlü bir özelliktir. Artık @property referans değere sahip olduğunda CSS süper gücünün gücü artıyor.

Ek Kaynaklar