Yazarı olduğunuz bir sayfanın tek bir bölümünü sıfırlamak için, denetimli işaretlemede hedefli bir CSS sıfırlaması, yalıtılmış bileşen stilleri için Shadow DOM veya ayrı bir belge için iframe kullanın. Bu kılavuz, seçimi nasıl yapacağınızı ve sonucu Mac’te nasıl önizleyeceğinizi gösterir.

Bölümünüz ne tür bir sıfırlamaya ihtiyaç duyuyor?

Buradaki okuyucu görevi belirli: çevresindeki sayfanın görünümünü korurken iç içe bir önizleme paneline kendi tipografisini, boşluklarını ve soyut grafiklerini kazandırmak. Sayfanın kaynak dosyalarına erişiminiz ve bunları düzenleme izniniz olmalı.

Sıfırlama bildirimini seçmeden önce sınırı belirleyin. CSS özellik değerleri, seçicilerin erişim alanı ve belge kaynakları farklı konulardır. Aşağıdaki karar kılavuzu, CSS sıfırlamalarının, Shadow DOM’un ve satır içi çerçevelerin belgelenmiş davranışını bir araya getirir.

Gereksiniminiz Uygulanabilir seçim Korunması gereken koşul
Sıradan iç içe işaretlemeden belirli stilleri kaldırmak Hedefli bildirimler veya all Dışarıdaki seçiciler bölümün öğeleriyle hâlâ eşleşebilir.
İç seçicileri sayfa seçicilerinden ayrı tutmak Açıkça tanımlanmış bir iç temel stille Shadow DOM Devralınan değerlere yine de dikkat etmek gerekir.
Bölüme kendi belgesini ve stil sayfası kurulumunu vermek Bir iframe Boyutları ve kaynakları ayrıca yapılandırmak gerekir.

Yazarı olduğunuz küçük bir önizleme paneli için Shadow DOM iyi bir başlangıç noktasıdır. İkinci bir HTML dosyası gerektirmeden seçiciler arasında bir sınır sağlar. Yalnızca bir kenarlığı kaldırmanız veya başlık yazı tipini değiştirmeniz gerekiyorsa, açık bildirimler kullanmak bileşen sınırı eklemekten daha basittir.

all: revert neden iç içe bir bölümü tamamen sıfırlamaz?

all kısaltması, eşleştiği öğelerdeki özellikleri değiştirir. Özel özellikleri, direction ve unicode-bidi öğelerini kapsamaz. Ayrı bir belge oluşturmaz ve diğer seçicilerin bu öğelerle eşleşmesini engellemez. MDN’nin all başvurusu

Sıfırlama anahtar sözcükleri de farklı başlangıç değerleri oluşturur. initial, her özelliğin belirtimde tanımlı başlangıç değerini kullanır. unset, normalde devralınan özellikleri devralır, diğerlerini ise başlangıç değerlerine ayarlar. Yazar stil sayfasında revert, etkilenen özelliği yazar stillerinin ötesindeki bir değere döndürür; devralınan değerler yine de üst öğeden gelebilir. CSS Basamaklama ve Devralma Düzeyi 5

Örneğin, bir bölümün rengini sıfırlamak, içindeki bir paragrafla doğrudan eşleşen renk bildirimini kaldırmaz. MDN bu ayrımı tam olarak gösteriyor: üst öğe revert kullansa bile paragrafa doğrudan atanmış renk korunur. Bu nedenle, istenmeyen görünümün kaynağı alt öğe seçicileriyse bir sarmalayıcıya sıfırlama uygulamak yeterli olmaz. MDN’nin üst öğe sıfırlama örneği

Sıfırlamayı tüm alt öğelere uygulamak erişim alanını genişletir, ancak yararlı düzen ve biçimlendirmeyi de kaldırır. all: initial kullanıldığında, yeniden tanımlamadığınız sürece bir div öğesinin tarayıcıdaki olağan blok gösterimi bile kaybolur. Böyle bir sıfırlamayı yalnızca gerekli sunumu bilinçli biçimde yeniden kurabiliyorsanız kullanın. Belirtimdeki bileşen sıfırlama örneği

revert-layer başka bir amaca hizmet eder: bir özelliği basamakman katmanları boyunca geriye alır. Sorun belirli bir stil katmanından kaynaklanıyorsa kullanışlıdır, ancak bir bileşen sınırı oluşturmaz. CSS basamak katmanı geri alma

Mac’inizde kendi içinde yeterli bir önizleme paneli oluşturun

Bu eksiksiz örnek, koyu renkli bir çevre arayüzü ve sentetik etiketler ile CSS’te oluşturulmuş iki özgün şekil içeren açık renkli, iç içe bir panel oluşturur. Her şey satır içidir: indirme, paket, harici yazı tipi veya görsel dosyası gerekmez.

TextEdit’te File > New seçin, ardından Format > Make Plain Text seçeneğine tıklayın. Aşağıdaki örneğin tamamını yapıştırın, section-reset.html adıyla kaydedin ve sorulursa Use .html seçeneğini belirleyin. Apple, HTML dosyası oluşturmak için bu adımları belgeliyor. Mac’te TextEdit’te HTML belgeleriyle çalışma

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Section reset demonstration</title>
  <style>
    body {
      margin: 0;
      padding: 32px;
      background: #202a36;
      color: #f2f5f8;
      font: 18px/1.6 Georgia, serif;
      letter-spacing: 1px;
    }
    main { max-width: 720px; margin: auto; }
    h2 { color: #bce8ff; text-transform: uppercase; }
    p { border-left: 4px solid #7db5cf; padding-left: 12px; }
    #panel-host { display: block; margin: 24px 0; }
  </style>
</head>
<body>
  <main>
    <h1>Shape workspace</h1>
    <p>Outer label Alpha</p>
    <div id="panel-host">
      <p>Preview unavailable. Use a browser supporting Shadow DOM.</p>
    </div>
    <h2>Outer label Beta</h2>
    <p>This paragraph belongs to the surrounding interface.</p>
  </main>
  <script>
    const host = document.getElementById("panel-host");
    if (typeof host.attachShadow === "function") {
      const root = host.attachShadow({ mode: "open" });
      const style = document.createElement("style");
      style.textContent = `
        .panel {
          all: initial;
          display: block;
          box-sizing: border-box;
          direction: ltr;
          unicode-bidi: normal;
          font: 16px/1.5 system-ui, sans-serif;
          color: #233344;
          background: #f4f7fa;
          padding: 24px;
          border: 2px solid #9db0c1;
          border-radius: 12px;
        }
        h2 { margin: 0 0 12px; font-size: 22px; }
        p { margin: 0 0 16px; }
        .shapes { display: flex; gap: 16px; flex-wrap: wrap; }
        .circle {
          width: 56px; height: 56px;
          border-radius: 50%; background: #386f91;
        }
        .bar {
          width: 104px; height: 56px;
          border-radius: 8px; background: #c98252;
        }
      `;
      const panel = document.createElement("section");
      panel.className = "panel";
      const heading = document.createElement("h2");
      heading.textContent = "Panel Delta";
      const text = document.createElement("p");
      text.textContent = "Circle and rounded bar";
      const shapes = document.createElement("div");
      shapes.className = "shapes";
      shapes.setAttribute("aria-hidden", "true");
      for (const name of ["circle", "bar"]) {
        const shape = document.createElement("div");
        shape.className = name;
        shapes.append(shape);
      }
      panel.append(heading, text, shapes);
      root.append(style, panel);
    }
  </script>
</body>
</html>

Kaydedilen dosyayı Mac tarayıcınızda açın. Beklenen sonuç, büyük ve küçük harfleri koruyan bir başlık ile kenarlıksız bir paragraf içeren açık renkli bir paneldir. Panelin dışında başlık büyük harfli ve mavi kalır, paragrafların sol kenarlıkları korunur. Bunlar örnekten beklenen sonuçlardır; tarayıcı testlerinden elde edilmiş ölçümler değildir.

Betik, belirli bir amacı olmayan ana öğeye bir shadow root bağlar ve paneli bu kökün içinde oluşturur. Stil sayfası shadow ağacına aittir; dolayısıyla sıradan başlık ve paragraf seçicileri panelin içinde uygulanır. Belgenin sıradan başlık ve paragraf seçicileri bu iç öğelere erişmez. Bu, MDN’nin belgelenmiş Shadow DOM stil düzenini izler.

İç .panel, çözümün ikinci kısmını sağlar: açıkça tanımlanmış bir temel stil. Shadow sınırları seçici eşleşmelerini ayırırken, devralma oluşturulmuş öğe ağacı boyunca işlemeye devam eder. İç sarmalayıcıyı sıfırlamak, çevredeki serif yazı tipinin ve harf aralığının olağan devralınan temel stil hâline gelmesini önler. Güncel CSS Shadow belirtimi bu devralma modelini açıklar; belge hâlâ editör taslağıdır. CSS Shadow Modülü Düzey 1

Sınırın ötesine neler geçer veya sınırı neler etkiler?

Ana öğe, çevresindeki belgenin bir öğesi olarak kalır. Sayfa kuralları kenar boşluğunu, genişliğini veya görüntülenme biçimini değiştirebilir; ayrıca üst öğe panelin ne kadar alan alacağını belirlemeye devam eder. Ana öğenin konumlandırmasını sayfa stil sayfasında, panelin iç görünümünü ise shadow stil sayfasında tutun. Bu ayrım, shadow ana öğesi ile onun iç ağacı arasındaki belgelenmiş farklılığı izler. CSS kapsam belirleme kılavuzu

Özel özellikler için de bilinçli bir sözleşme gerekir. all bunları temizlemez. Bu örnek devralınan özel özellikleri kullanmadığından, dışarıdaki bir değişken seçtiği renkleri var() başvurusu üzerinden değiştiremez. Daha sonra tema değişkenleri eklerseniz, bileşenin hangi adları kabul ettiğini tanımlayın ve içeride varsayılan değerler belirleyin. MDN’nin sıfırlama dışlamaları

Aynı seçici sınırını korumak istediğinizde yeni panel içeriğini shadow root içine ekleyin. Slotlanan içerik farklı stil ilişkilerine sahiptir; çünkü açık ağaçtan kaynaklanır. Slot eklemek, bu örneğin varsayımlarını değiştirir. CSS Shadow’da slotlar ve ağaç ilişkileri açıklaması

Shadow DOM ayrıca kaynakları sıfırlama komutu değildir. Bu örnek kaynak bağımlılıklarını tamamen önler. Sözleşme, kendi stil sayfası başvuruları olan ayrı bir HTML belgesi gerektiriyorsa aşağıdaki çerçeve yaklaşımını kullanın.

Bunun yerine ne zaman iframe kullanmalısınız?

Iframe başka bir belgeyi gömer. Bu nedenle, belge kurulumu çevresindeki sayfadan ayrı olması gereken, bağımsız biçimde stillendirilmiş bir önizleme için uygundur. HTML Standardı, başvurulan bir kaynak için src, satır içi bir belge içinse srcdoc tanımlar. HTML Standardı: iframe öğesi

Yerel ve iki dosyalı bir düzen için, paneli ve stil sayfasını içeren panel.html adlı ikinci, eksiksiz bir HTML dosyası oluşturun. Ana öğeyi ve betiğini kaldırıp yerlerine bu dosyaya başvuran bir iframe ekleyin. Aşağıdaki kod bağımsız bir belge değil, bütünleştirme parçasıdır:

<iframe
  title="Shape panel preview"
  src="panel.html"
  style="display:block;width:100%;height:280px;border:0">
</iframe>

Buradaki dosya adları yerel örnek dosya adlarıdır. Parçayı kullanmadan önce ikinci dosyanın gerçekten mevcut olduğundan emin olun. Çerçevenin dış boyutu onu içeren sayfaya, gömülü sayfa ise kendi iç sunumuna aittir. 280px değerini örnek bir başlangıç yüksekliği olarak değerlendirin ve daha uzun içeriğin sığacağını varsaymak yerine kontrol edin.

Bunun yerine srcdoc seçerseniz göreli kaynak URL’lerinin yerleştiren sayfanın URL’sine göre çözümlendiğini unutmayın. Bu nedenle satır içi belge içeriği kendiliğinden bağımsız bir kaynak tabanına sahip olmaz. MDN ayrıca desteklenmeyen srcdoc değerinin src değerine geri döndüğünü belgeliyor. MDN’nin iframe öznitelik başvurusu

Uyumluluğu kontrol edin ve beklenmedik stilleri tanılayın

MDN, hem temel attachShadow() özelliğini hem de all özelliğini Ocak 2020’den bu yana tarayıcılar arasında yaygın biçimde kullanılabilir olarak işaretliyor. Bu durum, bu özelliklerdeki her yeni seçeneğin kullanılabilir olacağını garanti etmez. Bu örnek temel open kipini kullanır ve Shadow DOM kullanılamadığında görünür bir yedek ileti gösterir. MDN: attachShadow(), MDN: all

@scope, seçiciler kümesinin nerelerde uygulanacağını sınırlamak için desteklenen başka bir yöntemdir; ancak devralmayı durdurmaz veya ilgisiz genel kuralların alt ağaca girmesini önlemez. MDN, bunun Mart 2026’dan bu yana güncel tarayıcılar arasında yeni kullanılabilir olduğunu ve eski tarayıcılarda kısıtlar bulunduğunu belirtiyor. Gereksinimi karşılayan seçici düzenlemesi için kullanın; kendi sınırlarına ihtiyaç duyduğunuzda Shadow DOM’u veya çerçeveyi koruyun. MDN: @scope

Örneği düzenledikten sonra şu tanılama adımlarını izleyin:

  1. Dosyada kaynak metni görünüyorsa kaydedilen uzantısının .html olduğunu doğrulayın ve dosyayı tarayıcıda açın.
  2. Yedek ileti hâlâ görünüyorsa JavaScript’in çalıştığını ve tarayıcının attachShadow() özelliğini desteklediğini doğrulayın.
  3. Panel yanlış görünüyorsa içeriğin shadow root’a eklendiğini doğrulayın, ardından iç temel stili ve stil sayfasını inceleyin.
  4. Çevredeki arayüz değişiyorsa belge stil sayfasında ve ana öğe kurallarında yaptığınız düzenlemeleri inceleyin.
  5. İçerik artık sığmıyorsa tipografiyi değiştirmeden önce ana öğenin veya çerçevenin boyutlarını kontrol edin.

Görevi karşılayan en küçük sınırı seçin: denetimli bir düzeltme için hedefli CSS, kendi temel stili tanımlanmış yalıtılmış bir panel için Shadow DOM veya ayrı bir belge için iframe. Bölümün değişmesi çevresinin yeniden tasarlanmasını gerektirmesin diye konumlandırmayı, iç stilleri ve kaynak başvurularını açıkça tanımlayın.

Kaynaklar