@property nedir? CSS’in yeni bir özelliği mi? Aslında yeni bir CSS tanımı ve özelliği değil. @property geliştiriciler olarak bizim hiç dahil omadığımız alanlara girmemize izin verilen bir tanım daha doğrusu CSS Houdini‘nin bir parçasıdır.

CSS Houdini, Tarayıcı API’leri koleksiyonu için bir çatı terim olan Houdini, web geliştirme sürecine ve genel olarak CSS standartlarının geliştirilmesine önemli iyileştirmeler getirmeyi amaçlamaktadır. Front-end geliştiricileri, JavaScript kullanarak CSS’i yeni özelliklerle genişletebilecek, CSS oluşturma motoruna bağlanabilecek ve tarayıcıya bir oluşturma işlemi sırasında CSS’i nasıl uygulayacağını söyleyebilecek. Houdini’nin tarayıcı desteği gelişiyor ve bazı API’ler bugün kullanıma hazır.

Kısaca, tarayıcı geliştiricilerin biz web geliştiricilere gelin birazda siz geliştirin diye açtığı kapıdır CSS Houdini. @property’de CSS Houdini’nin bir parçasıdır. Parçanın parçası, evet çok fazla parça oldu :)

@property, biz geliştiricilere CSS değişkenleri (Custom Properties)‘nin tipini, başlangıç değerini ve kalıtsallığını tarayıcıya bildirmemize olanak sağlar.

Genel yapısı:

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

Söz dizimi(syntax) <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function>, <custom-ident>, <transform-list> değerlerinden birini alabiliyor.

Bu tanımı yaptığımızda tarayıcı, CSS değişkenini belirttiğimiz türde kaydederek. Daha sonra geçişlerde ve animasyonlarda kullanıldığında bu özelliğin değerlerini nasıl enterpolasyona tabi tutacağını bilir.

slashdev.io‘nun örneği konuyu anlamak için çok güzel.

Rengi ve boyutu değişen bir kutu animasyonu yapalım. Tabi buradaki --scale: .5; değerinin tipini anlamayan tarayıcı kutu boyutunu değiştirme kısmını uygulamayacak.

@property --scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

tanımıyla tarayıcıya bunun bir sayı olduğunu söylediğimizde animasyon istediğimiz gibi çalışacaktır.

Tarayıcıların geliştirme ortamında yönetimi

Şimdilik sadece Chrome’da tarayıcı geliştirme aracında gösterim var. Safari desteği var ama gösterim yok. Firefox’da yeni ekledi zamanla ekleyeceklerini düşünüyorum.

property

Üzerine gelince çıkan popup’da gösteriyor ve ayrıca listenin en altında da gösteriyor.

## Tarayıcı desteği

Tarayıcı desteği konusunda gayet iyi yerlerde. Türkiye’de %91’lik bir oranla desteği var.

Kaynaklar

Geçen gün baklava select komponentine arama ekleme işini yapıyordu Erbil. Bu geliştirme sırasında şöyle bir şey yaşadık; hidden özniteliği ile gizlediğimiz listenin son elemanından dolayı son elemanın alt çizgisinin gizleme kodu çalışmıyordu.

Olayı şöyle örnekleyebilirim.

İlk listede normal durumda son elemanın altındaki çizgi gözükmüyor. İkinci örnekte sondan bir önceki eleman gizlendiği için yine gözükmüyor ancak son örnekte son elemanı gizlediğimiz için çizgi gözüküyor. :last-of-type seçicisi listenin gizlenmiş ögelerini dikkate almıyor. Çözmek için ürettiğimiz :not([hidden]):last-of-type seçicisi de işlemedi.

Bu konu hakkındaki araştırmalarımız sonucu stackoverflow’daki bu çözüm bize yol gösterdi. :nth-last-child(1 of :not([hidden])) ile sorun çözüldü.

Shadow DOM kaynaklı bir sorun nedeni ile baklavada çözmedi ama CSS ile böyle bir sorun yaşayanlar için not olsun diye buraya ekliyeyim dedim :)

Erbil burdaki sorunu çözen bir yöntem yazmış onu da ekliyeyim de web komponent için çözümü de aktarmış olalım.

 private _handleLastVisibleSearchedOption() {
    const lastVisibleOption = [...this.options].reverse().find(option => !option.hidden);

    if (lastVisibleOption) {
      lastVisibleOption?.shadowRoot?.querySelector("div")?.classList.add("no-border-bottom");
    }

    this.options.map(option => {
      if (!option.hidden && option !== lastVisibleOption) {
        option.shadowRoot?.querySelector("div")?.classList.remove("no-border-bottom");
      }
    });
  }

Kalın sağlıcakla.

Kaynaklar

Durumu şöyle açıklayabilirim: Aslında başlıkta açıklamış gibiyim :) Değişen arka planların olduğu bir yapının üzerindeki metinlerin rengini dinamik değiştirmeyi göreceğiz.

Böyle bir ihtiyacımız olmuştu daha önce bunu nasıl yaparız diye düşünüp çözemeyince farklı yollara başvurmuştuk.

Hatırladığım dört örnek var. Kendilerini bulamasam da benzer örnekler üzerinden sorunları ve çözümlerini anlatmaya çalışacağım. Son örnek benim sitemden olduğu için onu önceki ve sonraki hallerini resim olarak ekledim.

Çok eskilerde bir iş yapmıştım bir carousel yapıda resim üzerinde yazıların olduğu bir örnek vardı. Tasarımcının yaptığı örnekler mükemmeldi ancak iş kodlamaya dökülüp gerçek veriler girdiğinde hiçte hoş olmayan bir durum ortaya çıktı.

Üzerinden çok süre geçtiği için o carousel’i bulamadım. Onun yerine scroll-snap yazısındaki örneğe bir yazı ekleyip göstereyim dedim. Örnek olsun diye ilk resmi metin rengi ile aynı olacak şekilde ardalanı beyaz bir köpek resmi ekledim. İlk resimde yazını altına beyaz ardalan geldiği için normalde yazı gözükmeyecekti. Biz burada mix-blend-mode: difference; ekleyerek yazının arkada gelen resimden bağımsız görünmesini sağladık.

Koddaki başlık olan h2‘den mix-blend-mode: difference; özelliğini kaldırarak sorunlu halini görebilirsiniz.

Mobilde liste üstü buton

Bir diğer soruna uzun bir ürün listenin olduğu alanın üstüne buton koyduğumuzda yaşadığımız benzer sorun. Buton rengine yakın renkteki listeki resimlerin üzerine geldiğimizde butonun görünürlüğü azalıyordu.

Şöyle bir örnek gördüm codepen.io’da jhey‘in yaptığı çözüm ile bu sorunu da halledebiliyormuşuz. mix-blend-mode: difference; uygulaması ile çözülmüş.

Bastıkça dolan buton

Diğer sorun yaşadığım konu bir butonun mobilde tıklma ile değil de basıldığı sürece içinin dolduğu bir animasyon uyguladığımızda metin rengiyle ilgili yaşadığımız sorun.

Benzer bir örnek buldum codepen.io’da. Çözüm yine mix-blend-mode: difference; ile yapılmış.

Sitemdeki resimli başlıkların resim ile olan uyumu

Sitemdeki yazıların başlıkları altına resim olan bir tema kullanıyorum, burada her zaman resim ve üzerindeki yazıyı düşünerek bir şeyler üretmem gerekiyor. mix-blend-mode: difference; uygulayarak birçok başlık ve resmindeki sorunu çözmüş oluyorum.

mix-blend-mode Genel itibariyle sorunumu çözdü. Sadece bazı yazı içeren karmaşık arka plan resimlerinin olduğu başlıklar güzel sonuç vermedi. Bundan sonra yazılarıma arka plan resmi hazırlarken yazı olmamasına dikkat etmem yeterli olacak.

Tarayıcı desteği konusunda gayet iyi. Türkiye için %96.

Kalın sağlıcakla.

Kaynaklar