Birkaç yıl önce JavaScript veya ön işlemci gerektiren pek çok şey artık doğrudan CSS ile yapılabiliyor. Tarayıcıların ortak destek durumunu gösteren Baseline girişimi sayesinde hangi özelliğin güvenle kullanılabileceğini görmek de kolaylaştı. Bu yazıda 2026'da üretimde kullanmaya değer modern CSS özelliklerini, kısa örneklerle özetliyoruz. Daha hızlı ve daha sade sitelerin sırrı, çoğu zaman daha az JavaScript'tir.
1. :has() — "Ebeveyn seçici"
Yıllarca istenen özellik: Bir öğeyi içindeki başka bir öğeye göre biçimlendirmek.
/* Görseli olan kartlar iki sütunlu olsun */
.card:has(img) { display: grid; grid-template-columns: 160px 1fr; }
/* Hatalı alanı içeren form satırını vurgula */
.field:has(input:invalid) { border-color: #e5484d; }Bu sitedeki reklam alanı da :has() kullanıyor: Reklam doldurulamazsa alan kendiliğinden gizleniyor.
2. Container queries
Medya sorguları ekran genişliğine bakar; container queries ise bileşenin bulunduğu kutunun genişliğine. Aynı ürün kartı, geniş bir alanda yatay, dar bir kenar çubuğunda dikey görünebilir.
.products { container-type: inline-size; }
@container (min-width: 520px) {
.product-card { display: flex; gap: 16px; }
}3. CSS nesting
Sass benzeri iç içe yazım artık yerleşik:
.menu {
display: flex;
& a { color: inherit; }
& a:hover { text-decoration: underline; }
}4. View Transitions
Sayfalar veya durumlar arasında yumuşak geçiş animasyonları. Tek sayfa uygulamalarda JavaScript API'si ile, çok sayfalı sitelerde ise destekleyen tarayıcılarda yalnızca CSS ile etkinleştirilebiliyor:
@view-transition { navigation: auto; }Desteklemeyen tarayıcıda sayfa normal şekilde açılır; bu yüzden aşamalı iyileştirme için idealdir. Animasyonları prefers-reduced-motion tercihine göre kapatmayı unutmayın.
5. Anchor positioning
Açılır menü, ipucu (tooltip) ve bilgi kutularını bir öğeye "bağlı" konumlandırmak için JavaScript kütüphanelerine duyulan ihtiyacı azaltır:
.btn { anchor-name: --yardim; }
.tooltip { position: absolute; position-anchor: --yardim; top: anchor(bottom); left: anchor(center); }Tarayıcı desteği 2026'da genişlemiş olsa da kullanmadan önce hedef kitlenizin tarayıcılarını kontrol edin ve yedek konumlandırma tanımlayın.
6. Popover ve dialog
HTML'in popover özniteliği ve <dialog> öğesi; menü, bildirim ve modal pencereleri erişilebilirlik davranışlarıyla birlikte (Esc ile kapatma, odak yönetimi) sunar.
<button popovertarget="filtre">Filtrele</button>
<div id="filtre" popover>...</div>7. @starting-style ve geçişler
display: none durumundan görünür hale gelen öğelere giriş animasyonu vermek artık mümkün; açılan modal ve popover'lar için kullanışlı.
8. Küçük ama faydalı özellikler
text-wrap: balance: Başlık satırlarını dengeli böler.text-wrap: pretty: Paragrafın son satırında tek kelime kalmasını azaltır.color-mix()ve göreli renkler: Tema renklerinden ton türetmek.light-dark(): Açık ve koyu tema renklerini tek satırda tanımlamak.field-sizing: content: Metin alanının içeriğe göre büyümesi (destek durumunu kontrol edin).- Scroll-driven animations: Kaydırmaya bağlı animasyonlar için JavaScript olmadan çözüm.
Uygulamada dikkat edilecekler
- Her özellik için Baseline durumuna ve hedef kitlenizin tarayıcı dağılımına bakın.
- Desteklenmeyen durumda da sayfa kullanılabilir kalmalı;
@supportsile yedek stil tanımlayın. - Animasyonlarda performansı ve hareket hassasiyeti olan kullanıcıları düşünün.
- Eski JavaScript kütüphanelerini kaldırırken davranışın aynı kaldığını test edin.
Sık sorulan sorular
Bu özellikler eski iPhone'larda çalışır mı?
Safari sürümüne bağlıdır. Eski cihaz kullanan bir kitleniz varsa yedek stil tanımlayın ve gerçek cihazda test edin.
Tailwind veya Bootstrap kullanıyorsam bu özellikler işime yarar mı?
Evet. Çoğu framework bu özellikleri destekleyen yardımcılar sunuyor; ayrıca özel bileşenlerde doğrudan CSS ile kullanabilirsiniz.
Sass kullanmaya devam etmeli miyim?
Nesting ve değişkenler yerleşik hale geldiği için küçük projelerde Sass'a ihtiyaç azaldı. Büyük projelerde mevcut yapıyı korumak daha mantıklı olabilir.
Sonuç
Modern CSS, daha az kodla daha hızlı ve daha erişilebilir arayüzler kurmayı mümkün kılıyor. Sitenizi modernize ederken ilk adım, JavaScript ile yaptığınız görsel işleri CSS'e taşımak olabilir. Web sitenizin ön yüzünü yenilemek için bizimle iletişime geçin.
