- Modern web teknolojilerindeki gelişmeler sayesinde, geçmişte JavaScript ile uygulanması gereken birçok iş artık HTML ve CSS ile kolayca yapılabiliyor
- Bileşen odaklı stillendirme, üst öğe stillendirme, göreli renk tanımlama gibi yeni teknolojiler artık birçok tarayıcıda geniş ölçüde kullanılabiliyor
- Tasarımcılar ve geliştiriciler için UI bileşenlerini daha basit ve etkili biçimde üretmenin yollarını sunuyor
CSS Container Queries ve Style Queries
- Bileşen odaklı stillendirme mümkün
- Konteynerin genişliği ve stil bilgisi sorgulanarak CSS stilleri uygulanabilir
- Birden fazla varyasyona sahip yeniden kullanılabilir bileşenleri stillendirmek için kullanışlıdır
- Referans: CSS Style Queries tanıtımı
Metin dengeleme (text-wrap: balance)
- Tipografik dengeyi korur
- Başlıklar ve kart başlıkları gibi alanlarda metnin dengeli dağılması otomatik olarak hesaplanır
- Referans: Ahmad Shadeed’in rehberi
Form giriş alanlarını otomatik boyutlandırma
- Giriş boyutunu otomatikleştirir
- Metin girişi veya seçim menüsünün boyutu içeriğe göre otomatik olarak ayarlanır
- Tek satırlık basit bir CSS ile uygulanabilir
- Referans: Adam Argyle’ın açıklaması
Gizli içeriğin aranabilir olması (hidden=until-found)
- UI erişilebilirliğini artırır
- Katlanmış akordeon bölümleri gibi gizli içerikler, sayfa içi aramada ve arama motorlarında bulunabilir hale gelir
- Referans: Joey Arhar’ın rehberi
Yüksek çözünürlüklü renk desteği (OKLCH, OKLAB)
- %50 daha fazla renk desteği
- İnsanların renk algısı temel alınarak tasarlanmış yeni renk spesifikasyonları
- Tasarım sistemleri ve degradeler için uygundur
- Referans: Vitaly Friedman’ın açıklaması
CSS göreli renkler
- Mevcut renklere dayalı renk hesaplama
from anahtar sözcüğü kullanılarak rengin parlaklığı ayarlanabilir, tamamlayıcı renk hesaplanabilir vb.- Referans: Adam Argyle’ın kod parçacığı
View Transitions API
- Akıcı ekran geçişleri
- Mevcut ekrandan yeni ekrana geçerken CSS animasyonlarıyla pürüzsüz geçişler uygulanabilir
- Tek bir belge içinde veya iki belge arasında geçişi destekler
- Referans: Bramus Van Damme’ın rehberi
CSS Scroll Snap
- Daha hassas bir kaydırma deneyimi sunar
- Kullanıcının belirli bir içerik öğesine sabitlenmesini sağlayacak şekilde kaydırma konteyneri ayarlanabilir
- Referans: Ahmad Shadeed’in rehberi
Üst öğe stillendirme (:has)
- Üst öğeyi, alt öğenin durumuna göre stillendirme
Dikkat çeken diğer özellikler
- Giriş durumu stillendirmesinde iyileştirme:
:user-valid, :user-invalid ile kullanıcının giriş değişikliğinden sonra geri bildirim sağlanır
- Mobil klavye optimizasyonu:
inputmode ve enterkeyhint ile sanal klavye iyileştirilir
<dialog> HTML öğesi: erişilebilir modal ve popover uygulamaları
Sonuç
- Yeni ve pratik frontend teknolojileri, UI ve UX tasarımında dönüştürücü bir etki yaratıyor
- Gelecekte uygulanacak özellikler arasında masonry düzeni,
<selectmenu> özelleştirmesi, metin kutusu hizalama gibi başlıklar var
- Web platformunun gelişimi için emek veren tüm geliştiricilere teşekkürler; bu yazının projeleri ve uygulamaları geliştirmede faydalı olmasını dileriz. İyi çalışmalar!
4 yorum
Başka birinin de belirttiği gibi, yazar tarayıcılar arası uyumluluğu ya da davranış tutarlılığını hiç dikkate almıyor. Bunun dışında da tarayıcılar arasında uygulama veya davranışın farklı olduğu durumlar var; bu yüzden yeni özellikleri sorgusuz sualsiz seçmek mümkün değil. Chrome'un kullanım oranı ne kadar yüksek olursa olsun, iOS var olduğu için en azından Safari'de düzgün çalışıp çalışmadığını dikkate almak gerekir.
Katılıyorum.. üründe doğrudan kullanmak zor olabilir gibi görünüyor
Safari, Firefox'ta uygulanmadı
hidden=until-found)Firefox'ta uygulanmadı
Frontend'deki yeni özellikleri fiilen yalnızca Chrome'un yeni özellikleri olarak görmek daha rahat.
Uç örnek olarak OffscreenCanvas gibi 5 yıl süren durumlar da var. (Chrome 2018, Safari 2023)
Container query'ler ve
:hasinanılmaz kullanışlı.