- 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 gerekiyorfield-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
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
Ö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
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
3 yorum
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.
Harika özellikler epey artacak gibi; şimdiye kadar JavaScript ile uygulanması gereken şeyler vardı.
CSS gerçekten çok gelişti.