2023 senesinde genelde CSS’in yeni çıkan özelliklerini olabildiğince anlatmaya çalıştım.

  1. CSS ile tip tanımı @property
  2. ::marker sözde (pseudo) elemanı
  3. accent-color tanımı
  4. CSS scroll-snap
  5. :user-invalid seçicisi
  6. Yeni bakış alanı(viewport) değerleri
  7. Medya sorgularında aralıklı genişlik tanımlama
  8. CSS subgrid
  9. Yeni text-wrap değerleri balance ve pretty
  10. CSS seçicilerin aranan ebeveyni bulundu :has()
  11. SASS’ın sonu geldi mi?
  12. CSS iç içe (nesting) yazım
  13. CSS aspect-ratio tanımı

HTML’in yeni bileşenleri hakkında da yenilikleri paylaşmak gibi bir hedefim vardı ancak bu konuda eksik kaldım.

  1. Popover API

Sadece Popover bileşinini yazmışım. Bu sene daha fazla bileşen eklerim inşallah.

2024 hedeflerim

2024’de daha çok CSS, HTML, PWA ve CSS ile yapılan basit işler hakkında birşeyler yazma planım var.

CSS

Bu sene CSS’in yeni özellikleri hakkındaki yazılara devam etme hedefim var.

Bunların dışında CSS ile yapılan basit işlerle alakalı yazılara da devam etmeyi düşünüyorum.

CSS’de ki gelişmelerinin devam edeceğini düşünüyorum. 2024 interrop’da hangileri dahil edilir bilemiyorum ama aşağıdaki birçok özelliğin sene sonuda kalmadan standartlaşmasını bekliyorum.

  1. Container Query
  2. linear() tanımı
  3. Cascade layer
  4. Yeni renk tanımları lch, oklab, oklch
  5. Logical properties
  6. CSS Scope
  7. Grid masonary
  8. Scroll-timeline
  9. Stil Query
  10. Anchor positioning
  11. View Transitions
  12. @when else
  13. Trigonometrik fonksiyonlar

HTML

HTML bileşenleri konusunda bir atılım bekliyorum. Bu sayede farklı UI kütüphaneleri yerine UI ihtiyacımızı görebilecek standartlar olacak. Burada kritik nokta bence CSS ile yeterli derecede stillendirilebilir bileşenler olursa iş görür yoksa <select> gibi beklenenin altında bir deneyimle kalır.

  1. dialog elementi
  2. progress elementini stillendirelim
  3. Popover API
  4. Akordiyon
  5. Slider
  6. Selectlist
  7. Switch
  8. Drawer
  9. Data table
  10. Tooltip
  11. Date picker
  12. Form Validation
  13. Tabs
  14. Carousel

Çoğu beklenti ama umarım böyle bir liste çıkar sene sonu. :)

PWA

Safari’ye push notification desteği gelmesiyle geçen sene PWA alanında ciddi bir atılım bekliyordum ancak gözle görülür bir sıçrama olmadı. Nasip diyelim. PWA’i birçok konuda avatajlı görmeme rağmen sektör bu konuda benimle aynı düşünmüyor galiba.

  • Tek kod bloku: Mevcut sitelerde mobil için iki ayrı (iOS, Android) geliştirme ortamı var. Ayrıca hala Türkiye’de responsive olmayan birçok siteden dolayı web ve mobil web var. Bu 4 farklı ortam yerine tek ortamda işlerimizi halledebileceğimiz bir sistem var ve kimse kullanmıyor :)

  • Tek platform öğrenme ihtiyacı: Mobilde mevcut şartlarda Android için farklı iOS için farklı bir öğrenme eğrisi var. Bunun için React Native ve Flutter gibi çözümler olsa da hala birçok şirket native olanları tercih ediyor. PWA’in tüm bunlardan daha iyi bir çözümü var. Sadece HTML, CSS ve Javascript ile tüm her yerde çalışan siteler / uygulamalar yapma imkanı.

  • SEO: Mobil uygulamalrın arama motoru konusundaki sıkıntıları malum. PWA arama motorları konusunda olmazsa olmaz.

  • Güncelleme kolaylığı: Mobil uygulamaların Web marketlerinde güncellemenin zorluğunu bilenler bu konuda PWA’nin ne kadar büyük bir nimet olduğunu anlar.

  • Erişilebilirlik: Bu konuda mevcut sitelerinde eksikleri olsa da PWA’nın erişilebilirlik çözümlerinin daha çok ve kolay olduğunu kabul etmeliyiz.

  • Eski araçlarda çalışma: Düşük kalitedeki araçlarda dahi çalışma imkanı sağlamasıyla mobil uygulamalara göre avantajı vardır.

  • Hız: Web tekonolojileri hız konusunda daha fazla araç sunmaktadır. Hız ölçümü ve geliştirmesi daha kolay. Ön bellek yönetimi ve lazy load yöntemleri daha uzun süre tecrübe edilmiştir. Örneğin Orange Polska S.A.‘nın verilerine göre %30 daha hızlıymış.

  • Daha güvenli: Web’in süregelen güvenlik araçları nedeniyle native uygulamalara göre avantajlıdır. HTTPS seçeneği ile güvenli siteler/uygulamalar yapma imkanı sağlar.

  • Daha az maliyetli: Geliştirme ve idame ettirme maliyetleri daha düşüktür.

Eksi olarak yazabileceğimiz iki konu var mobil cihazlarda cihaz özelliklerine erişim sıkıntılı ve animasyon. Animasyon konusunda kesin çözüm geldi diyebilirim. View Transitions API bence mobil uygulamardaki animasyonu aratmayan tecrübe sunuyor. Apple’ıın yani Safari’nin iOS cihazlardaki cihaz özelliklerine erişim konusunda son yıllarda ki atağı da o eksiğinde yakında giderileceği konusunda ümitlendiriyor bizi. Ne diyelim umarım bu sefer “Bu sene PWA’nın yılı” dedirtiriz. :)

Kalın sağlıcakla.

Kaynaklar

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı Devamını oku

field-sizing özelliği

05 August 2024 tarihinde yayınlandı.