CSS @scope, belirli bir ağaç dalındaki stillerin kapsamını tanımlamak için kullanılan yeni bir CSS kuralıdır. Bu özellik, bileşen tabanlı projelerde stil çakışmalarını önler ve öngörülebilir bir öncelik sistemi sunar. Özellikle büyük ölçekli uygulamalarda, stillerin yanlışlıkla sızmasını engelleyerek uzun vadeli bakım maliyetini düşürür.
@scope Nasıl Çalışır?
@scope kuralı, seçicilerin yalnızca belirtilen bir kök (scope root) altındaki alt ağaçta eşleşmesini sağlar. Temel sözdizimi şöyledir:
@scope (scope-root) {
/* sadece scope-root içindeki stiller */
a { color: blue; }
}Burada scope-root herhangi bir CSS seçicisi olabilir (sınıf, ID, element). İsteğe bağlı olarak bir alt sınır (lower boundary) da belirleyebilirsiniz:
@scope (scope-root) to (lower-boundary) {
/* stiller */
}Alt sınır, scope’un daha derine inmesini engeller ve iç içe bileşenlerde izolasyonu güçlendirir.
Neden @scope Kullanmalısınız?
Geleneksel CSS’te stiller küreseldir ve çakışmaları önlemek için BEM, CSS modülleri veya Shadow DOM gibi yöntemlere ihtiyaç duyulur. @scope, stil kapsamlamayı doğrudan CSS’e kazandırarak bu yöntemlerin dezavantajlarını ortadan kaldırır:
- Küresel kirlilik yok: stiller yalnızca tanımlandıkları dalda etkilidir.
- Öngörülebilir öncelik: @scope içindeki seçiciler, dışarıdaki seçicilerden daha yüksek özgünlük (specificity) kazanmaz; sadece scope önceliği sayesinde daha baskındır.
- Shadow DOM’dan daha hafif: Web Bileşenleri (Web Components) ile kullanılan Shadow DOM’a göre daha az tarayıcı yükü oluşturur.
CSS @scope, Shadow DOM’un çözüm getirdiği bir soruna daha hafif ve esnek bir alternatif sunar. Özellikle aynı sayfada birden fazla kez kullanılan bileşenler için idealdir.
@scope vs Diğer Kapsamlama Yöntemleri
Aşağıdaki tablo, @scope ile yaygın kapsamlama tekniklerini karşılaştırmaktadır:
| Yöntem | Performans** | Öğrenme Eğrisi | Tarayıcı Desteği |
|---|---|---|---|
| @scope | Orta (scope hesaplama) | Düşük | Chrome 124+, Firefox 122+, Safari 18+ |
| Shadow DOM | Düşük (ek bellek) | Yüksek | Tüm modern tarayıcılar |
| CSS Modülleri | Yüksek (derleme zamanı) | Orta | Derleyici bağımlı |
| BEM / Soyadlandırma | Yüksek | Düşük | Evrensel |
Pratik Kullanım Senaryoları
1. Bileşen Tabanlı Stiller
Bir .card bileşeni düşünün. İçindeki tüm a bağlantılarının farklı renkte olmasını istiyorsunuz. @scope ile:
@scope (.card) {
a { color: teal; }
.footer a { color: gray; }
}Bu stiller yalnızca .card içindeki bağlantıları etkiler; sayfadaki diğer bağlantılar etkilenmez.
2. İç İçe Bileşenlerde Alt Sınır Kullanımı
Bir liste bileşeni (.list) ve onun altında başka bir bağımsız liste (.sub-list) varsa, üst listenin stillerinin alt listeye sızmasını engellemek için alt sınır ekleyin:
@scope (.list) to (.sub-list) {
li { list-style: disc; }
}Böylece .sub-list içindeki elemanlar varsayılan stillerini korur.
3. Dinamik İçerik Değişiklikleri
@scope, DOM değişikliklerine (örneğin React ile) doğal olarak uyum sağlar. Yeni eklenen bir bileşen otomatik olarak scope’un kapsamına girer. Bu özellik, sayfanın farklı bölümlerinde farklı tema stilleri uygulamak için idealdir. Örneğin, bir blogun yorum bölümünde farklı bir renk paleti kullanılabilir.
Dikkat Edilmesi Gerekenler
- Tarayıcı desteği: @scope henüz eski tarayıcılarda çalışmaz. Üretim ortamında kullanmadan önce hedef kitleyi doğrulayın.
- Scope ve Özgünlük: @scope içindeki seçicilerin özgünlüğü değişmez; ancak scope önceliği sayesinde dışarıdaki benzer seçicilere göre her zaman üstün gelir. Bu, planlama yaparken dikkate alınmalıdır.
- İç içe @scope: İç içe scope tanımları mümkündür ancak her bir scope’un kendi alt sınırını doğru ayarlamak gerekir, aksi halde beklenmeyen sızıntılar olabilir.
Sık yapılan hata: @scope kuralının tüm alt öğeleri kapsadığını unutup alt sınır kullanmamak. Her zaman alt sınır gerekip gerekmediğini değerlendirin.
Performans İpuçları
@scope kullanımı, tarayıcının her scope için ayrı bir stil ağacı oluşturmasına neden olur. Çok sayıda scope performansı etkileyebilir. Bu durumda, scope sayısını sınırlandırın veya karmaşık seçicilerden kaçının. Ayrıca, dinamik bileşenlerde stil güncellemelerini React’te Debounce ve Throttle uygulayarak optimize edebilirsiniz.
Responsive tasarımlarda @scope ile birlikte CSS Container Queries kullanmak, bileşen bazlı kapsamlama konusunda tam bir çözüm sunar.
Sonuç
CSS @scope, modern web geliştirme için güçlü bir araçtır. Küresel stil çakışmalarını ortadan kaldırır, öğrenmesi kolaydır ve mevcut projelere kademeli olarak eklenebilir. Henüz deneysel aşamada olsa da yakın gelecekte standart haline gelmesi bekleniyor. Şimdiden bu özelliği öğrenmek ve test etmek, uzun vadede avantaj sağlayacaktır.
Sık Sorulan Sorular
CSS @scope nedir ve ne işe yarar?
CSS @scope, belirli bir DOM dalı içindeki stillerin kapsamını sınırlandırmak için kullanılan bir CSS kuralıdır. Stil çakışmalarını önler ve bileşen tabanlı projelerde bakım kolaylığı sağlar.
@scope ile Shadow DOM arasındaki fark nedir?
@scope, stilleri yalnızca CSS düzeyinde kapsamlar; Shadow DOM ise tam bir DOM izolasyonu sunar. @scope daha hafiftir ancak içerik yapısını değiştirmez, performans ve basitlik açısından avantajlıdır.
Tarayıcı desteği nasıldır?
Chrome 124+, Firefox 122+ ve Safari 18+ sürümlerinden itibaren desteklenir. Eski tarayıcılar için polyfill bulunmamaktadır, bu nedenle üretim ortamında kullanmadan önce hedef kitleyi kontrol edin.
@scope ile CSS Container Queries birlikte kullanılabilir mi?
Evet, @scope ve Container Queries (CSS @container) farklı amaçlara hizmet eder: @scope stilleri kapsamlar, @container ise boyutlara göre stil uygular. Birlikte kullanıldığında güçlü bir bileşen tabanlı yapı elde edilir.
Alt sınır (lower boundary) ne zaman kullanılmalıdır?
Bir scope altındaki başka bir scope veya bağımsız bileşeni izole etmek için alt sınır eklenir. Örneğin, bir paneldeki alt panelin stillerinin üst panelin stillerinden etkilenmemesi için kullanılır.
