2025’in modern CSS’inde bilmeniz gerekenler

 (frontendmasters.com)
16 puan yazan GN⁺ 2025-09-30 | 3 yorum | WhatsApp'ta paylaş
  • Bu yıl yeni eklenen veya desteği genişleyen CSS/HTML özelliklerini pratik bir bakış açısıyla derleyen bir liste; UI geçişlerinden formlara, tipografiden fonksiyonel CSS’ye kadar geniş bir alanı kapsıyor
  • auto gibi anahtar kelimelere boyut geçişi, HTML popover/invoker, CSS @function ve if() gibi yeni özellikler öne çıkıyor; birçoğu önce Chrome’da desteklendiği için kademeli iyileştirme stratejisi gerekiyor
  • field-sizing ile otomatik genişleyen giriş alanları, özel Select, text-wrap: balance/pretty, linear() easing, shape() yolu gibi özellikler görsel ve kullanılabilirlik kalitesini kolayca artırıyor
  • Güçlendirilmiş attr(), okuma sırası kontrolü için reading-flow, calc-size() gibi değer ve akış kontrol araçları artıyor; böylece yalnızca CSS ile çözülebilecek tasarım kapsamı genişliyor
  • Standartlaşma ve destek süreci devam eden Masonry, random(), margin-trim, View Transitions genişletmeleri izlenmeli; ancak Container Queries, :has(), dvh vb. zaten günlük geliştirme pratiğinin temel parçaları haline gelmiş durumda

Auto’ya animasyon

  • Rastgele içerik yüksekliğine sahip bir öğede sabit değer ↔︎ auto arasında akıcı geçiş yapmayı sağlayan özellik
    • Global olarak interpolate-size: allow-keywords tanımlanırsa height: 0 → auto gibi geçişlere izin verilir
    • Ya da interpolate-size olmadan calc-size() kullanılarak height: calc-size(auto, size) ile geçiş yapılabilir
  • Avantajı, mevcut max-height hilelerini veya ekran dışı ölçüm + JS animasyonu gibi kırılgan alternatifleri ortadan kaldırırken doğal yerleşimi korumasıdır
  • Destek durumu şu anda Chrome merkezli; animasyonlar olsa iyi olur düzeyinde olduğundan PE (Progressive Enhancement) için uygundur

Popover’lar ve Invoker’lar

  • popover özelliği, herhangi bir öğeye açma/kapama davranışı ve buna karşılık gelen JS API’si veren bir HTML özelliğidir; modalden farklı, hafif bir overlay kategorisine girer
    • Invoker öznitelikleri kullanılırsa JS olmadan bildirimsel kontrol mümkündür
  • Önemi, erişilebilirlik, klavye ve odak yönetimi gibi konuları HTML düzeyinde varsayılan olarak sunarak eksik uygulama riskini azaltmasıdır
  • Destek tarafında Popover yaygın, Invoker ise önce Chrome’da; popover="hint" gibi ayrıntılı özelliklerde destek farkları vardır
    • Polyfill bulunduğundan, temel UX için de benimsenebilir

@function

  • CSS değer fonksiyon sistemine kullanıcı tanımlı fonksiyonlar eklenir; @function --foo(--x) { result: ... } biçimiyle ortak mantık soyutlanabilir
  • Tekrarı azaltma (DRY) ve bildirimleri sadeleştirme yoluyla okunabilirlik ve bakım kolaylığı sağlar
  • Destek tarafı önce Chrome; uygunsa property: fallback satırının ardından property: --func() ile zarif fallback uygulanabilir
    • Sass fonksiyonlarıyla uyumlu olmadığını unutmamak gerekir
    Reklam

if()

  • CSS’teki ilk değer düzeyinde dallanma fonksiyonu; media(), supports(), style() koşullarını switch ifadesi gibi sıralayarak ilk eşleşen değeri döndürür
    • Örneğin breakpoint’e göre grid-template-columns, tek bir bildirimle yazılabilir
  • Etkisi, okunabilirliği artırması ve tekrarı azaltmasıdır; özel @function ile de iyi çalışır
  • Destek tarafı önce Chrome; önce fallback değer tanımlayıp PE deseni uygulamak önerilir

field-sizing

  • Girdi/düzenleme öğelerinin içeriğe göre otomatik büyümesini sağlayan field-sizing özelliği
    • Otomatik yükseklik kazanan <textarea> en tipik örnektir; satır içi anında yeniden boyutlandırma UX’i için de kullanılabilir
  • Destek, Chrome tarafında mevcut ve Safari’ye gelmesi planlanıyor; gerekirse hafif JS alternatifi kullanılabilir
    • Temel işlev değil, bir UX iyileştirmesi olduğu için kademeli benimsemeye uygundur
Reklam

Özel Select’ler

  • Sadece select görünümünü değil, açılmış seçim arayüzünün kendisini de stillendirmeyi mümkün kılmak için açık opt-in ile tam özelleştirme desteği sunulur
  • PE açısından çok güçlüdür; desteklenmeyen ortamlarda güvenli biçimde varsayılan <select> öğesine fallback yapılır
  • Destek tarafı önce Chrome; appearance: base-select ve ::picker(select) gibi araçlarla kontrol alanı genişletilebilir

text-wrap

  • text-wrap: balance, başlık gibi büyük metinlerde satır uzunluklarını dengeler; text-wrap: pretty ise gövde metninde de yetim satırları azaltıp görünümü iyileştirir
  • Etkisi, okunabilirlik ve tipografi kalitesini artırmasıdır; ek maliyet olmadan hemen hissedilir
  • Destek tarafında balance yaygın, pretty ise önce Chrome ve Safari’de; PE için uygundur

linear() easing

  • linear anahtar kelimesinden farklı olarak linear() fonksiyonu, istenen sayıda noktayla ince ayarlı easing eğrileri tanımlar; bounce gibi bileşik hareketler için uygundur
  • Alternatif olan cubic-bezier() sınırlıyken, linear() daha ayrıntılı zamanlama kontrolü sunar ve tam destek durumundadır
  • Gerekirse adlandırılmış easing ya da cubic-bezier() ile fallback uygulanabilir

shape()

  • Eski path() yaklaşımının yalnızca piksel odaklı ve zor sözdizimini geliştiren shape() fonksiyonu, duyarlı birimler ve özel özellikler kullanarak rastgele yollar tanımlamayı sağlar
  • clip-path ile rastgele şekil maskeleme, offset-path ile yol boyunca yerleştirme/animasyon, ileride de shape-outside ile birleşim bekleniyor
  • Destek tarafında Chrome ve Safari mevcut, Firefox’ta flag altında ilerliyor; gerçek projelerde iyi fallback tasarımı önerilir

Daha güçlü attr()

  • attr(), tip belirtmeyi destekleyerek sayı, renk gibi metin dışı değerleri HTML özniteliklerinden doğrudan okuyup CSS değeri olarak kullanabilmeyi sağlar
  • Anlamı, tema rengi, sayaç, boyut gibi değerlerin markup üzerinden enjekte edilmesi desenini genişletmesidir
  • Destek tarafı önce Chrome; çekirdek yerleşime bağımlı kullanımlar yerine önce görsel güçlendirme öğelerinde kademeli benimseme önerilir

Reading Flow

  • Görsel sıra ile kaynak sırasının uyuşmadığı yerleşimlerde Tab dolaşım sırasını mantıksal olarak düzeltmeye yarayan reading-flow özelliği
    • Grid yeniden düzenlenirken reading-flow: grid-rows gibi yerleşim türüne uygun odak akışı belirtilebilir
  • Erişilebilirlik riskini tek satırlık bir CSS bildirimiyle azaltabildiği için yerleşim özgürlüğünü artırır
  • Destek tarafı önce Chrome olduğundan, aşırı yeniden sıralamadan genel destek gelene kadar kaçınılması önerilir
Reklam

Takip edilmesi gerekenler

  • Masonry layout için şartname hâlâ şekilleniyor; item-flow önerisi, grid’in ötesinde yerleşim olanaklarını genişletebilir
  • random() fonksiyonu şu anda Safari’de mevcut ve ifade gücü yüksek varyasyonlu tasarımlar için yararlı
  • margin-trim kullanışlı ama Safari merkezli; sibling-index()/count() ise Chrome’da bulunuyor ve stagger animasyonları için faydalı
  • View Transitions için view-transition-name: match-element;, ayrıca Firefox geliştirmeleri gibi çapraz tarayıcı açısından olumlu gelişmeler var
  • Birim karışımlı calc() çarpma/bölme mantığının sadeleşmesi deneysel aşamayı geçmek üzere; böylece geçmişteki tip dönüştürme hack’lerine daha az ihtiyaç duyulabilir
  • “CSS4” gibi bir sürüm adlandırmasının olmayışı da ele alınıyor; ayrıca son 5 yılın yeniliklerini toplayan bir referans listesi tanıtılıyor

Hatırlamaya değer güçlü özellikler

  • Container Queries ve birimleri, media query’den sonraki en büyük verimlilik artışlarından biri olarak temel beceri konumunu koruyor
  • :has(), ebeveyn ve duruma dayalı seçim yapmayı mümkün kılarak karmaşık birleşik seçicileri yalnızca CSS ile çözme olanağı sunuyor
  • View Transitions, Anchor Positioning, Scroll-Driven Animations, Safari’ye de ulaştıkları için profesyonel kullanımda benimseme eşiği düşmüş durumda
  • Ek viewport birimleri (dvh vb.), Baseline’a girmesiyle mobil viewport kararlılığını artırıyor

Kod/kullanım örneği öne çıkanlar

  • Boyut geçişi: Global interpolate-size: allow-keywords veya durum değişiminde height: calc-size(auto, size) ile içerik yüksekliği animasyonu kurma
  • Grid dallanması: if(media(...): değer; ... else: değer;) deseniyle breakpoint’e göre template columns tanımını tek bir bildirime toplama
  • Özel Select: select, ::picker(select) { appearance: base-select } ile özel picker’ı etkinleştirme
  • Bounce easing: animation-timing-function: linear( ... çok sayıda nokta ... ) ile ince ayarlı sekme/sönüm eğrileri oluşturma
  • Clip path: clip-path: shape( ... ) ile duyarlı oran tabanlı şekil maskelemesi kurma

Pratik uygulama rehberi

  • Tarayıcı desteği farkı büyük olan özelliklerde, önce fallback tasarımı ve giriş maliyetine göre etki esas alınarak benimseme yapılmalı
    • Animasyon, tipografi ve görsel efektler PE için ilk adaylar; odak/Tab sırası gibi kritik erişilebilirlik konularında ise geniş destekten sonra benimseme önerilir
  • Kendi fonksiyonları/dallanma mantığı, tasarım kurallarının belgelenmesi ve token/özel özelliklerle birleştirildiğinde ekip çapında ortak desen haline getirilerek ROI en üst düzeye çıkarılabilir
  • Form UX’i iyileştiren başlıklar (field-sizing, Özel Select), mobil öncelikli senaryolarda daha belirgin fayda sağlar

Sonuç

  • 2025 sürümündeki modern CSS, değer fonksiyonları, mantıksal dallanma ve şekil kontrolünün genişlemesiyle “CSS ile daha fazlasını yapabilme” yılına dönüşüyor; PE stratejisiyle birlikte kademeli benimseme değeri yüksek
  • Temelleri (container query, :has(), viewport birimleri) sağlam kurup, animate-to-auto, if(), shape() gibi yüksek verimli özellikleri önce benimsemeyi hedefleyen gerçekçi bir yol haritası geçerliliğini koruyor

İlgili okumalar

3 yorum

 
shakespeares 2025-10-06

CSS artık neredeyse bir dil haline gelmiş. Mantıksal uygulamaları büyük ölçüde mümkün kılar hale geldi...
Bunun gerçekten bir stil sayfası olup olmadığını sorguluyorum.
 
chl11wq12 2025-10-01

Harika özellikler epey artacak gibi; şimdiye kadar JavaScript ile uygulanması gereken şeyler vardı.
 
addons 2025-09-30

CSS gerçekten çok gelişti.