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

CSS Houdini, CSS oluşturma motorunun bölümlerini gösteren ve geliştiricilere CSS nesne modeline erişim sağlayan bir dizi düşük düzey API'yi kapsayan bir çatı terimidir. Bu, geliştiricilerin tarayıcı tedarikçi firmalarının bu özellikler için yerleşik destek sunmasını beklemeden tarayıcıya özel CSS'yi nasıl okuyacağını ve ayrıştıracağını söylemesine olanak tanıdığı için CSS ekosistemi için büyük bir değişikliktir. Çok heyecan verici.

Houdini çatısı altında CSS'ye eklenen en heyecan verici özelliklerden biri Özellikler ve Değerler API'sidir.

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

Houdini özel özelliklerini yazma

Aşağıda, özel bir özelliği (CSS değişkeni gibi) ayarlama örneği verilmiştir. Bu örnekte söz dizimi (tür), ilk değer (yedek) ve devralma boole değeri (özelliği üst öğesinden devralınıyor mu yoksa değil mi?) yer almaktadır. Bunu yapmanın mevcut yolu JavaScript'te CSS.registerProperty() kullanmaktır ancak destekleyen tarayıcılarda @property kullanabilirsiniz:

Ayrı JavaScript dosyası (Chromium 78)
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
CSS dosyasına dahil edilmiştir (Chromium 85)
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Artık --colorPrimary özelliğine diğer tüm CSS özel mülkleri gibi var(--colorPrimary) üzerinden erişebilirsiniz. Ancak buradaki fark, --colorPrimary'ün yalnızca bir dize olarak okunmamasıdır. Verileri var.

Yedek değerler

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

Aşağıdaki örneği inceleyin. --colorPrimary değişkeninin initial-value değeri magenta. Ancak geliştirici, bu alana "23" değerini girmiştir. @property olmadan CSS ayrıştırıcı, geçersiz kodu yok sayar. Ardından ayrıştırıcı, magenta değerine geri döner. Bu sayede CSS'de gerçek yedekleme ve test yapılabilir. Güzel.

.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 anlamsal 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)

Söz dizimi ayarlamak, tarayıcının özel özellikleri yazım açısından kontrol etmesini sağlar. Bunun birçok avantajı vardır.

Bu noktayı açıklamak için bir degradenin nasıl animasyonlu hale getirileceğini göstereceğim. Her gradyan beyanı bir dize olarak ayrıştırıldığı için şu anda gradyan değerleri arasında sorunsuz bir şekilde animasyon oluşturmak (veya ara değer hesaplamak) mümkün değildir.

"number" söz dizimine sahip özel bir mülk kullanılarak sol taraftaki degrade, durak değerleri arasında sorunsuz bir geçiş gösterir. Sağdaki degrade, varsayılan bir özel mülkü kullanır (söz dizimi tanımlanmamıştır) ve ani bir geçiş gösterir.

Bu örnekte, degrade bitiş yüzdesi, fareyle üzerine gelme etkileşimi aracılığıyla% 40'lık başlangıç değerinden% 100'lük bitiş değerine kadar animasyonlu olarak gösterilmektedir. Üstteki renk geçişinin aşağıya doğru yumuşak bir şekilde geçiş yaptığını göreceksiniz.

Soldaki tarayıcı, Houdini Properties and Values API'yi destekler ve pürüzsüz bir degrade durak geçişi sağlar. Sağdaki tarayıcıda bu seçenek yoktur. Desteklemeyen tarayıcı, bu değişikliği yalnızca A noktasından B noktasına giden bir dize olarak anlayabilir. Değerleri interpole etme fırsatı olmadığından bu sorunsuz geçişi göremezsiniz.

Ancak özel özellikler yazarken söz dizimi türünü belirtirseniz ve ardından animasyonu etkinleştirmek için bu özel özellikleri kullanırsanız geçişi görürsünüz. Özel --gradPoint mülkünü aşağıdaki gibi örneklendirebilirsiniz:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Ardından, animasyon oluşturma zamanı geldiğinde değeri ilk 40% değerinden 100% değerine güncelleyebilirsiniz:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

Bu sayede, yumuşak degrade geçişi etkinleştirilir.

Yumuşak geçiş yapan gradyan kenarlık. CodePen'de Demoyu Görün

Sonuç

@property kuralı, CSS içinde anlamlı CSS yazmanıza olanak tanıyarak heyecan verici bir teknolojiyi daha da erişilebilir hale getirir. CSS Houdini ve Properties and Values API hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın:

Fotoğraf: Cristian Escobar, Unsplash.