Belirtiler
Banner geldi, sitemde bir şeyler bozuldu — neye bakacağım?
Çok karşılaşılan dört belirti var. En az ikisi varsa CSS çakışması ihtimali yüksek. Önce belirtileri birlikte netleştirelim.
- 1Renkler değişiyor. Banner geldikten sonra sayfanın butonları, linkleri farklı renge dönüyor. Sebep: banner genel CSS değişkenlerinin üzerine yazıyor olabilir (örn.
--primary). - 2Mobilde menü kayıyor / açılmıyor. Banner full-screen modal gibi davranıyor, sayfa scroll'u kilitleniyor, hamburger menü altta kalıyor. Mobil viewport hesabı banner'ın CSS'inde eksik.
- 3Banner kapanmıyor / üst üste açılıyor. "Reddet"e bastıktan sonra banner'ın bir kısmı kalıyor, ya da sayfa her açılışta tekrar gösteriyor.
z-indexsavaşı veya çerez yazılmıyor. - 4Footer banner'ın altında kalıyor. Banner alta sabitleniyor, footer onunla çakışıyor. Çoğu üründe
position: fixed; bottom: 0deyip bırakıyorlar.
Sebep
Sorunun kökü: CSS izolasyonu yok
Çoğu cookie banner ürünü banner DOM'unu doğrudan sayfaya enjekte ediyor. Bu DOM, sayfanın tüm CSS kurallarını miras alıyor. Yani sitenin genel stilleri banner'a giriyor, banner'ın kendi stilleri sitenin diğer öğelerine sızıyor. İki tür CSS aynı arenada savaşıyor.
Sonuçta site bozulmuş gibi görünür. Sorun çoğu zaman ne sadece banner'da ne de sadece sitededir; asıl mesele, birbirine karışmaması gereken stillerin aynı alanda çalışmasıdır.
Detay
Çakışma tam olarak nereden çıkar?
- Sitenin genel CSS değişkenleri (
--primary,--accent) banner'a geçiyor — istemediğin renkler. - Sitenin
* { box-sizing }veya* { margin }reset'leri banner'ı bozuyor. - Mobil için yazılmış
@mediakuralları banner'a doğru uygulanmıyor → banner masaüstü gibi davranıyor, mobilde kayıyor. - Sitenin var olan
z-indexhiyerarşisi banner'la çakışıyor → modal'lar üst üste yığılıyor. - Banner'ın font-loading'i sitenin font'larıyla iki kere yükleniyor → ekstra request.
Çözüm
Banner'ı sitenden tamamen izole etmek: Shadow DOM
Modern web standardında bir özellik var: bir DOM ağacını tamamen ayrı, kapsüllü bir kabuk içine koymak. Tarayıcı düzeyinde izolasyon — JS hack'i değil.
Shadow DOM içine yerleştirilmiş banner, sayfanın CSS'inden tamamen bağımsız bir scope'ta yaşar. Sitenin --primary değişkeni banner'ı etkilemez. Sitenin reset'leri banner'a uygulanmaz. Banner kendi stiliyle render edilir, sitenin görünümünü bozmaz.
Tarayıcıda gerçekten ne oluyor?
Banner DOM'u #shadow-root (open) etiketi altında oluşturuluyor. DevTools'ı açtığında bunu görebilir, kendi alanının dışına stil sızmadığını kontrol edebilirsin. openmodu seçtik — kapalı olsaydı incelenemezdi, biz kanıtlanabilir olmasını istedik.
Karşılaştırma
Diğer çözümler — neden Shadow DOM?
Tasarım izolasyonu için üç yaklaşım var. Her birinin avantajı + dezavantajı.
3 yaklaşım
| Kriter | Direct DOM Çoğu eski banner ürünü | Iframe Bazı modern ürünler | Shadow DOMBizim Veribenim'in tercihi |
|---|---|---|---|
| Tasarım izolasyonu | yok | ||
| Ek HTTP request | yok | +1 request | yok |
| Sayfa açılış süresine etki | değişken | +50-200ms | <10ms |
| Tarayıcı uyumu | Chrome 53+, Safari 10+ | ||
| DevTools'ta inceleme | ayrı document | shadow-root etiketi | |
| Lighthouse Performance etkisi | Yüksek olabilir | Orta | <2 puan |
| Editör erişilebilirliği | iframe sandboxlı |
Test et
Kendi banner'ın izole mi? — 30 saniyede kontrol
- 1Sitende banner aktifken DevTools'ı aç (F12 veya ⌥⌘I).
- 2Elements sekmesinde banner'ı bul. HTML'in herhangi bir yerinde olabilir (
body'nin altında çoğunlukla). - 3Banner element'inin altında
#shadow-root (open)görünüyor mu? Görünüyorsa: izole çalışıyor — sorun yok. Görünmüyorsa: direct DOM (CSS çakışması ihtimali yüksek) veya iframe (performans cezası ihtimali yüksek). - 4Console'a şu satırı yapıştır:
document.querySelectorAll('*').forEach(e => e.shadowRoot && console.log('Shadow:', e)). Çıktı banner ise sorun yok.
Aksiyon
Ne yapmalı?
- Shadow DOM kullanan bir ürüne geçmeyi düşün. Veribenim başından beri Shadow DOM kullanıyor — sitende DevTools'la doğrulayabilirsin.
- Banner ürününü hemen değiştiremiyorsan: kısa vadede CSS düzeltmeleriyle idare et, ama her ürün güncellemesinde tekrar bozulabileceğini hesaba kat. Bunu kalıcı çözüm sayma.
- Banner editörünün renk/font ayarları izole olsa bile sitenin tasarım diline uygun olmalı. Veribenim panelinde renk paleti, font seçimi, border-radius değerlerini sitenle eşleştirebiliyorsun — izole, ama uyumlu.