@property: CSS değişkenlerine süper güçler verme

Una Kravets

CSS Houdini, CSS oluşturma motorunun parçalarını açığa çıkaran ve geliştiricilerin CSS Nesne Modeli'ne erişmelerini sağlayan alt düzey API'ler grubunu kapsayan bir şemsiye terimdir. Bu, CSS ekosistemi için büyük bir değişikliktir çünkü geliştiricilerin, tarayıcı tedarikçilerinin bu özellikler için yerleşik destek sağlamalarını beklemeden tarayıcıya özel CSS'yi nasıl okuyacağını ve ayrıştıracağını söylemesini sağlar. Çok heyecan verici!

Houdini şemsiyesi içinde CSS'ye yapılan en heyecan verici eklemelerden biri Özellikler ve Değerler API'si.

Bu API, CSS özel özelliklerinizi (genellikle CSS değişkenleri olarak da adlandırılır) semantik anlam (söz dizimi ile tanımlanır) ve hatta yedek değerler vererek güçlendirir. Böylece CSS testini etkinleştirir.

Houdini özel özelliklerini yazma

Aşağıda, özel özellik (ör. CSS değişkeni) ayarlamayla ilgili bir örnek verilmiştir. Ancak bu örnekte söz dizimi (tür), başlangıç değeri (yedek) ve devralma boole'si (değer üst öğesinden devralınır mı?) Bunu yapmanın şu anki yolu JavaScript'te CSS.registerProperty() kullanmaktır, ancak desteklenen tarayıcılarda @property öğesini kullanabilirsiniz:

Ayrı JavaScript dosyası (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '',
  initialValue: 'magenta',
  inherits: false
});
CSS dosyasına eklendi (Chromium 85)
@property --colorPrimary {
  syntax: '';
  initial-value: magenta;
  inherits: false;
}

Artık var(--colorPrimary) aracılığıyla diğer tüm CSS özel mülklerinde olduğu gibi --colorPrimary özelliğine erişebilirsiniz. Ancak buradaki fark, --colorPrimary öğesinin yalnızca bir dize olarak okunmamasıdır. Veriler var!

Yedek değerler

Diğer tüm özel mülklerde olduğu gibi (var kullanarak) veya ayarlama (yazma/yeniden yazma) değerleri alabilirsiniz. Ancak Houdini özel özelliklerinde bu değeri geçersiz kılarken yanlış değer ayarlarsanız CSS oluşturma motoru, satırı yoksaymak yerine başlangıç değerini (yedek değerini) gönderir.

Aşağıdaki örneği inceleyin. --colorPrimary değişkeni, initial-value metriğinin magenta değerine sahip. Ancak geliştirici buna geçersiz değer olarak "23" verdi. @property kullanılmadığında CSS ayrıştırıcı geçersiz kodu yoksayar. Ayrıştırıcı magenta değerine geri döner. Bu, CSS içinde gerçek yedeklere ve testlere olanak tanır. Çok iyi!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Söz dizimi

Söz dizimi özelliğiyle artık bir tür belirterek semantik CSS yazabilirsiniz. Şu anda izin verilen türler şunlardır:

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (özel tanımlayıcı dizesi)

Bir söz dizimi ayarlamak, tarayıcının özel özelliklerde yazma kontrolü yapmasına olanak tanır. Bunun pek çok avantajı vardır.

Bu noktayı göstermek için, bir renk geçişine nasıl animasyon uygulayacağınızı göstereceğim. Şu anda, gradyan değerleri arasında sorunsuz bir animasyon (veya interpolasyon) yapmanın bir yolu yoktur. Bunun nedeni, her gradyan bildiriminin bir dize olarak ayrıştırılmış olmasıdır.

Soldaki gradyan, "sayı" söz dizimine sahip bir özel özellik kullanılarak durak değerleri arasında yumuşak bir geçiş gösterir. Sağdaki renk geçişinde varsayılan bir özel özellik kullanılır (söz dizimi tanımlanmamış) ve ani bir geçiş gösterilmektedir.

Bu örnekte, gradyan durması yüzdesinin üzerine gelme etkileşimi aracılığıyla% 40'lık bir başlangıç değerinden% 100'lük bir bitiş değerine animasyon uygulanmaktadır. Üst gradyan renginin aşağı doğru yumuşak bir geçişini görmeniz gerekir.

Soldaki tarayıcı, Houdini Properties and Goals API'sini destekleyerek yumuşak bir renk geçişi durdurma geçişi sağlar. Sağdaki tarayıcı bunu yapmaz. Desteklenmeyen tarayıcı, bu değişikliği yalnızca A noktasından B noktasına giden bir dize olarak anlayabilir. Değerleri interpolasyona ayırma fırsatı yoktur ve dolayısıyla bu yumuşak geçişi görmezsiniz.

Ancak özel özellikler yazarken söz dizimi türünü beyan eder ve ardından animasyonu etkinleştirmek için bu özel özellikleri kullanırsanız geçişi görürsünüz. --gradPoint özel özelliğini şu şekilde örnekleyebilirsiniz:

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

Ardından animasyon oluşturma zamanı geldiğinde, baştaki 40% değerini 100% olarak güncelleyebilirsiniz:

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

Bu, artık bu yumuşak renk geçişi geçişini etkinleştirir.

Gradyan kenarlıklarını yumuşak bir şekilde geçirin. Glitch ile ilgili demoyu inceleyin

Sonuç

@property kuralı, CSS'nin içinde semantik olarak anlamlı CSS yazmanıza olanak tanıyarak heyecan verici bir teknolojiyi daha da erişilebilir hale getirir. CSS Houdini ve Özellikler ve Değerler API'si hakkında daha fazla bilgi edinmek için şu kaynaklara göz atın:

Fotoğraf: Cristian Escobar'ın Unsplash'inde.