Yoğun bir dönem geçiriyor olsanız da, What’s !important #14 ile son iki haftanın en çarpıcı CSS ve web platformu gelişmelerini hızlıca gözden geçirelim. Tarayıcı güncellemeleri az olsa da, CSS Quake’ten Gap Dekorasyonları’na kadar kaçırılmayacak içerikler var. İşte öne çıkan başlıklar: Hyperblam ile HTML’den müzik, CSS Quake, gap dekorasyonları, random() deneyleri, field-sizing ile select öğeleri ve modern CSS temalama.
Hyperblam: HTML ile Müzik Yapmak: Heydon Pickering’in yarattığı Hyperblam, Web Audio API’nin HTML tabanlı bir uygulaması. Web Components kullanarak JavaScript olmadan müzik oluşturmayı sağlıyor. Tam olarak CSS odaklı olmasa da, yaratıcılığıyla dikkat çekiyor.
CSS Quake: PolyCSS destekli Layoutit, 1996 yapımı efsanevi oyun Quake’i CSS’e taşıdı. CSS DOOM’un ardından gelen bu port, CSS’in sınırlarını zorluyor. Oyun motorları için CSS’in potansiyelini gösteren harika bir örnek.
CSS Gap Dekorasyonlarına Derin Dalış: Temani Afif, gap dekorasyonlarının nasıl şekillendirileceğini gösterdi. Flexbox, grid ve çok sütunlu düzenlerde gap’lerin oluşturduğu boşlukları stillendirmek uzun zamandır beklenen bir özellikti. Temani’nin çalışması, bu boşluklarla neler yapılabileceğini etkileyici bir şekilde ortaya koyuyor.
Önemli Gelişmeler
CSS random() Deneyleri: Polypane, henüz yalnızca Safari’de desteklenen CSS random() fonksiyonuyla bokeh efekti, düşen yapraklar, dağınık polaroidler, şiir ve animasyonlu aurora gibi birçok yaratıcı örnek hazırladı. Bu derinlemesine inceleme, random() ile neler yapılabileceğini gözler önüne seriyor.
Uzmanların Görüşleri
Manuel Matuzović, field-sizing: content özelliği ile select öğelerinin genişliğini seçili option’a göre ayarlamayı anlattı. Bu özellik, Firefox 152 ile Baseline haline geldi. Ayrıca size attribute’ü kullanıldığında field-sizing: content’in tüm option’ları göstermek için bu davranışı geçersiz kıldığını belirtmek önemli.
Modern CSS Temalamanın Yeni Standardı: Una Kravets, modern CSS temalamanın nasıl çalıştığını açıkladı. @property, light-dark(), contrast-color() ve @container style() gibi yeni gelen Baseline özelliklerini bir arada kullanarak kapsamlı bir temalama sistemi oluşturmayı gösterdi. Ayrıca contrast-color() üzerine kendi yazdığım bir içerik de var.
Sonuç ve Değerlendirme
Web Siteleri Herkes İçin Aynı Çalışmak Zorunda Değil: Bramus, farklı platformlarda farklı giriş yöntemleri olduğunu ve kullanıcı tercihlerine göre web sitelerinin aynı olması gerekmediğini savundu. Interest invokers, overscroll actions ve Document Picture-in-Picture API gibi özelliklerin platforma göre farklı davranması gerektiğini vurguladı. Ayrıca Marina Aísa’nın Web Engines Hackfest notları da oldukça ilgi çekici.
Kaynak: css-tricks.com
