Aby zresetować jedną sekcję strony, którą tworzysz, użyj ukierunkowanego resetu CSS dla kontrolowanego znacznikowania, Shadow DOM dla odizolowanych stylów komponentu albo elementu iframe dla osobnego dokumentu. Ten przewodnik pokazuje, jak wybrać rozwiązanie i podejrzeć wynik na Macu.

Jakiego rodzaju resetu potrzebuje Twoja sekcja?

Zadanie czytelnika jest konkretne: nadać zagnieżdżonemu panelowi podglądu własną typografię, odstępy i abstrakcyjne grafiki, zachowując wygląd otaczającej strony. Potrzebujesz dostępu do plików źródłowych strony oraz uprawnień do ich edycji.

Wybierz granicę, zanim wybierzesz deklarację resetującą. Wartości właściwości CSS, zasięg selektorów i zasoby dokumentu to różne kwestie. Poniższa pomoc w podjęciu decyzji łączy udokumentowane działanie resetów CSS, Shadow DOM i ramek śródliniowych.

Twoje wymaganie Praktyczny wybór Warunek, który trzeba uwzględnić
Usuń wybrane style ze zwykłego zagnieżdżonego znacznikowania Ukierunkowane deklaracje lub all Zewnętrzne selektory nadal mogą pasować do elementów sekcji.
Oddziel selektory wewnętrzne od selektorów strony Shadow DOM z jawną wewnętrzną bazą stylów Nadal trzeba zająć się dziedziczonymi wartościami.
Zapewnij sekcji własny dokument i konfigurację arkusza stylów Element iframe Jego wymiary i zasoby wymagają osobnej konfiguracji.

W przypadku niewielkiego, tworzonego przez Ciebie panelu podglądu Shadow DOM to dobry punkt wyjścia. Zapewnia granicę dla selektorów bez potrzeby tworzenia drugiego pliku HTML. Jeśli chcesz jedynie usunąć obramowanie lub zmienić krój pisma nagłówka, jawne deklaracje są prostsze niż wprowadzanie granicy komponentu.

Dlaczego all: revert nie resetuje w pełni zagnieżdżonej sekcji?

Skrót all zmienia właściwości dopasowanych elementów. Nie obejmuje właściwości niestandardowych, direction ani unicode-bidi. Nie tworzy osobnego dokumentu ani nie uniemożliwia innym selektorom dopasowania tych elementów. Dokumentacja MDN dotycząca all

Słowa kluczowe resetu wyznaczają też różne wartości bazowe. initial używa początkowej wartości określonej w specyfikacji dla danej właściwości. unset dziedziczy właściwości, które zwykle podlegają dziedziczeniu, a pozostałym przypisuje wartości początkowe. W arkuszu stylów autora revert cofa daną właściwość poza style autora; dziedziczone wartości nadal mogą pochodzić od elementu nadrzędnego. CSS Cascading and Inheritance Level 5

Na przykład zresetowanie koloru sekcji nie usuwa deklaracji koloru, która bezpośrednio pasuje do znajdującego się w niej akapitu. MDN pokazuje dokładnie tę różnicę: akapit zachowuje przypisany mu bezpośrednio kolor, nawet gdy element nadrzędny używa revert. Reset zastosowany do elementu opakowującego nie wystarczy więc, jeśli niepożądany wygląd wynika z selektorów dopasowujących elementy potomne. Przykład MDN z resetem elementu nadrzędnego

Zastosowanie resetu do każdego elementu potomnego rozszerza jego zasięg, ale usuwa też przydatny układ i formatowanie. Przy all: initial znika nawet zwykłe blokowe wyświetlanie elementu div w przeglądarce, o ile go nie przywrócisz. Używaj takiego resetu tylko wtedy, gdy możesz świadomie odtworzyć wymagany wygląd. Przykład resetowania widżetu w specyfikacji

revert-layer służy innemu celowi: cofa właściwość przez warstwy kaskady. Przydaje się, gdy problem dotyczy konkretnej warstwy stylów, ale nie ustanawia granicy komponentu. Cofanie stylów w warstwach kaskady CSS

Utwórz samodzielny panel podglądu na Macu

Ten kompletny przykład tworzy ciemny interfejs zewnętrzny i jasny zagnieżdżony panel zawierający syntetyczne etykiety oraz dwa autorskie kształty CSS. Wszystko jest osadzone w kodzie: nie są potrzebne pobierane pliki, pakiety, zewnętrzne fonty ani pliki graficzne.

W TextEdit wybierz File > New, a następnie Format > Make Plain Text. Wklej cały poniższy przykład, zapisz go jako section-reset.html i, jeśli pojawi się monit, wybierz Use .html. Są to kroki tworzenia pliku HTML opisane przez Apple. Praca z dokumentami HTML w TextEdit na Macu

<!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>

Otwórz zapisany plik w przeglądarce na Macu. Oczekiwany wynik to jasny panel z nagłówkiem zapisanym wielkimi i małymi literami oraz akapitem bez obramowania. Poza panelem nagłówek pozostaje zapisany wielkimi literami i niebieski, a akapity zachowują lewe obramowania. Są to oczekiwane wyniki działania przykładu, a nie wyniki pomiarów testów przeglądarek.

Skrypt dołącza korzeń shadow do elementu hosta, który nie ma własnej zawartości, i tworzy panel wewnątrz tego korzenia. Jego arkusz stylów należy do drzewa shadow, więc zwykłe selektory nagłówków i akapitów stosują się wewnątrz. Zwykłe selektory nagłówków i akapitów z dokumentu nie docierają do tych wewnętrznych elementów. Tak działa udokumentowany przez MDN wzorzec stylowania Shadow DOM.

Wewnętrzny element .panel zapewnia drugą część rozwiązania: jawną bazę stylów. Granice shadow oddzielają dopasowywanie selektorów, ale dziedziczenie nadal działa w drzewie renderowanych elementów. Zresetowanie wewnętrznego elementu opakowującego zapobiega temu, by szeryfowy font i odstępy między literami z otoczenia stały się jego standardową dziedziczoną bazą. Obecna specyfikacja CSS Shadow opisuje ten model dziedziczenia; jest nadal projektem redakcyjnym. CSS Shadow Module Level 1

Co nadal przekracza granicę lub na nią wpływa?

Host pozostaje elementem otaczającego dokumentu. Reguły strony mogą zmienić jego margines, szerokość lub sposób wyświetlania, a element nadrzędny nadal określa, ile miejsca otrzyma panel. Pozostaw rozmieszczenie hosta arkuszowi stylów strony, a wewnętrzny wygląd panelu arkuszowi stylów shadow. Ten podział wynika z udokumentowanego rozróżnienia między hostem shadow a jego wewnętrznym drzewem. Przewodnik po zakresach CSS

Właściwości niestandardowe także wymagają przemyślanej umowy. all ich nie usuwa. Ten przykład nie korzysta z dziedziczonych właściwości niestandardowych, więc zewnętrzna zmienna nie może zmienić wybranych kolorów przez odwołanie var(). Jeśli później dodasz zmienne motywu, określ, które nazwy akceptuje komponent, i podaj wartości domyślne wewnątrz niego. Wyłączenia z resetu opisane przez MDN

Jeśli chcesz zachować tę samą granicę selektorów, umieszczaj nową zawartość panelu wewnątrz korzenia shadow. Zawartość wstawiana przez sloty podlega innym relacjom stylowania, ponieważ pochodzi z drzewa light; dodanie slotów zmienia założenia tego przykładu. Wyjaśnienie relacji między slotami i drzewami w CSS Shadow

Shadow DOM nie jest też poleceniem resetującym zasoby. Ten przykład całkowicie unika zależności od zasobów. Jeśli wymagany kontrakt zakłada osobny dokument HTML z własnymi odwołaniami do arkuszy stylów, użyj poniższego podejścia z ramką.

Kiedy zamiast tego użyć elementu iframe?

Element iframe osadza inny dokument. Dlatego nadaje się do niezależnie stylowanego podglądu, którego konfiguracja dokumentu powinna być oddzielona od otaczającej strony. Standard HTML definiuje src dla odwołanego zasobu, a srcdoc dla dokumentu wbudowanego. Standard HTML: element iframe

W przypadku lokalnego układu z dwoma plikami utwórz drugi, kompletny plik HTML o nazwie panel.html, zawierający panel i jego arkusz stylów. Zastąp host i jego skrypt elementem iframe odwołującym się do tego pliku. Poniższy fragment służy do integracji, a nie jest samodzielnym dokumentem:

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

Podane nazwy plików to przykładowe nazwy lokalne. Przed użyciem fragmentu przygotuj drugi plik. Zewnętrzny rozmiar ramki ustala strona zawierająca ją, a osadzona strona określa swój wewnętrzny wygląd. Potraktuj 280px jako przykładową wysokość początkową i sprawdź, czy zmieści się dłuższa zawartość, zamiast zakładać, że tak będzie.

Jeśli zamiast tego wybierzesz srcdoc, pamiętaj, że względne adresy zasobów są rozwiązywane względem adresu URL osadzającej strony. Zawartość dokumentu wbudowanego nie otrzymuje więc automatycznie niezależnej ścieżki bazowej zasobów. MDN podaje też, że nieobsługiwany srcdoc powoduje użycie src. Dokumentacja atrybutów iframe w MDN

Sprawdź zgodność i diagnozuj nieoczekiwane style

MDN oznacza zarówno podstawowe attachShadow(), jak i właściwość all jako powszechnie dostępne w przeglądarkach od stycznia 2020 roku. Nie gwarantuje to obsługi każdej nowszej opcji tych funkcji. Ten przykład używa podstawowego trybu open i zachowuje widoczny komunikat zastępczy, gdy Shadow DOM jest niedostępny. MDN: attachShadow(), MDN: all

@scope to kolejny obsługiwany sposób ograniczania miejsca stosowania zestawu selektorów, ale nie zatrzymuje dziedziczenia ani nie uniemożliwia stosowania niezwiązanych reguł globalnych w poddrzewie. MDN podaje, że ta funkcja jest powszechnie dostępna w obecnych przeglądarkach od marca 2026 roku, choć starsze przeglądarki mają ograniczenia. Użyj jej, gdy organizacja selektorów spełnia wymagania; zachowaj Shadow DOM lub ramkę, gdy potrzebujesz odpowiednich dla nich granic. MDN: @scope

Po edycji przykładu wykonaj następujące czynności diagnostyczne:

  1. Jeśli plik wyświetla kod źródłowy, upewnij się, że zapisano go z rozszerzeniem .html, i otwórz go w przeglądarce.
  2. Jeśli komunikat zastępczy nadal się wyświetla, sprawdź, czy JavaScript działa i czy przeglądarka obsługuje attachShadow().
  3. Jeśli panel wygląda nieprawidłowo, upewnij się, że jego zawartość została dodana do korzenia shadow, a następnie sprawdź jego wewnętrzną bazę stylów i arkusz stylów.
  4. Jeśli zmieni się otaczający interfejs, sprawdź edycje arkusza stylów dokumentu i reguł hosta.
  5. Jeśli zawartość przestanie się mieścić, przed zmianą typografii sprawdź wymiary hosta lub ramki.

Wybierz najmniejszą granicę, która spełnia zadanie: ukierunkowany CSS do kontrolowanej korekty, Shadow DOM z określoną bazą stylów dla odizolowanego panelu albo element iframe dla osobnego dokumentu. Określ jawnie rozmieszczenie, style wewnętrzne i odwołania do zasobów, aby można było zmieniać sekcję bez przebudowy jej otoczenia.

Źródła