Чтобы сбросить стили одного раздела страницы, которую вы редактируете, используйте точечный сброс CSS для контролируемой разметки, Shadow DOM для изолированных стилей компонента или iframe для отдельного документа. В этом руководстве показано, как выбрать подход и просмотреть результат на Mac.

Какой сброс нужен вашему разделу?

Задача читателя здесь конкретна: задать вложенной панели предварительного просмотра собственные шрифты, интервалы и абстрактные графические элементы, сохранив оформление окружающей страницы. Вам нужны доступ к исходным файлам страницы и разрешение на их редактирование.

Сначала выберите границу изоляции, а затем способ сброса. Значения свойств CSS, область действия селекторов и ресурсы документа — разные вопросы. В этой памятке по выбору объединены описанные особенности сбросов CSS, Shadow DOM и встроенных фреймов.

Требование Практический выбор Что нужно учитывать
Удалить выбранные стили обычной вложенной разметки Точечные объявления или all Внешние селекторы по-прежнему могут совпадать с элементами раздела.
Отделить внутренние селекторы от селекторов страницы Shadow DOM с явно заданными базовыми стилями Унаследованные значения всё равно нужно учитывать.
Предоставить разделу собственный документ и таблицы стилей iframe Его размеры и ресурсы нужно настраивать отдельно.

Для небольшой панели предварительного просмотра, которую вы создаёте сами, Shadow DOM — хорошая отправная точка. Он задаёт границу для селекторов, не требуя отдельного HTML-файла. Если нужно лишь убрать рамку или изменить шрифт заголовка, явные объявления проще, чем создание границы компонента.

Почему all: revert не сбрасывает стили вложенного раздела полностью?

Сокращённое свойство all меняет свойства совпавших с ним элементов. Оно не затрагивает пользовательские свойства, direction и unicode-bidi. Оно не создаёт отдельный документ и не мешает другим селекторам совпадать с этими элементами. Справочник MDN по all

Ключевые слова сброса также задают разные исходные состояния. initial использует начальное значение, определённое спецификацией для каждого свойства. unset наследует свойства, которые обычно наследуются, а остальные сбрасывает к начальным значениям. В таблице стилей автора revert возвращает затронутое свойство к состоянию до авторских стилей; унаследованные значения всё ещё могут поступать от родителя. Спецификация CSS Cascading and Inheritance Level 5

Например, сброс цвета раздела не удалит объявление цвета, которое напрямую применяется к абзацу внутри него. MDN демонстрирует именно это различие: абзац сохраняет явно заданный ему цвет, даже если для родителя используется revert. Поэтому сброса на обёртке недостаточно, если нежелательное оформление задают селекторы потомков. Пример MDN со сбросом стилей родителя

Сброс для каждого потомка расширяет область действия, но удаляет и полезные правила компоновки и форматирования. При использовании all: initial исчезает даже обычное для браузеров блочное отображение элемента div, если его не восстановить. Используйте такой сброс, только если можете намеренно заново задать необходимое оформление. Пример сброса виджета из спецификации

revert-layer служит другой цели: возвращает свойство к состоянию до применения слоёв каскада. Это полезно, если проблема связана с конкретным слоем стилей, но такая команда не создаёт границу компонента. Откат слоёв каскада CSS

Создайте автономную панель предварительного просмотра на Mac

В этом готовом примере создаётся тёмный интерфейс снаружи и светлая вложенная панель с условными подписями и двумя оригинальными фигурами CSS. Всё встроено в файл: загрузки, пакеты, внешние шрифты и файлы изображений не нужны.

В TextEdit выберите File > New, затем Format > Make Plain Text. Вставьте весь пример ниже, сохраните его как section-reset.html и, если появится запрос, выберите Use .html. Таковы документированные Apple шаги по созданию HTML-файла. Работа с HTML-документами в TextEdit на Mac

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

Откройте сохранённый файл в браузере на Mac. Ожидаемый результат — светлая панель с заголовком, написанным обычным регистром, и абзацем без рамки. За её пределами заголовок останется синим и прописными буквами, а абзацы сохранят левую рамку. Это ожидаемые результаты примера, а не данные тестирования браузера.

Скрипт прикрепляет корень теневого дерева к узлу-оболочке и создаёт панель внутри этого корня. Таблица стилей панели принадлежит теневому дереву, поэтому обычные селекторы заголовков и абзацев применяются внутри него. Обычные селекторы заголовков и абзацев документа не достигают этих внутренних элементов. Это соответствует описанному MDN способу стилизации Shadow DOM.

Внутренний элемент .panel обеспечивает вторую часть решения — явно заданные базовые стили. Границы теневого дерева изолируют совпадения с селекторами, но наследование продолжает работать по дереву отображаемых элементов. Сброс стилей внутренней обёртки не даёт окружающему шрифту с засечками и межбуквенному интервалу стать её обычными унаследованными базовыми значениями. В действующей спецификации CSS Shadow описана эта модель наследования; документ пока имеет статус черновика редактора. CSS Shadow Module Level 1

Что всё же пересекает границу или влияет на неё?

Узел-оболочка остаётся элементом окружающего документа. Правила страницы могут менять его отступ, ширину или способ отображения, а предок по-прежнему определяет, сколько места получит панель. Оставьте расположение узла-оболочки под управлением таблицы стилей страницы, а внутреннее оформление панели — под управлением таблицы стилей теневого дерева. Такое разделение соответствует описанному различию между узлом-оболочкой Shadow DOM и его внутренним деревом. Руководство по областям действия CSS

Для пользовательских свойств тоже нужен продуманный договор. all их не сбрасывает. В этом примере унаследованные пользовательские свойства не используются, поэтому внешняя переменная не может изменить выбранные цвета через ссылку var(). Если позже вы добавите переменные темы, определите, какие имена компонент принимает, и задайте внутренние значения по умолчанию. Исключения при сбросе стилей в MDN

Если нужна та же граница для селекторов, добавляйте новое содержимое панели внутрь теневого корня. У содержимого, добавленного через слот, другие отношения стилизации, поскольку оно берётся из обычного дерева; использование слотов меняет предположения этого примера. Объяснение слотов и связей между деревьями в CSS Shadow

Shadow DOM также не является командой сброса ресурсов. В примере вообще нет зависимостей от внешних ресурсов. Если требуется отдельный HTML-документ со своими ссылками на таблицы стилей, используйте описанный ниже подход с фреймом.

Когда следует использовать iframe?

iframe встраивает другой документ. Поэтому он подходит для независимо оформленного предварительного просмотра, у которого настройки документа должны быть отделены от окружающей страницы. В стандарте HTML атрибут src задаёт ссылку на ресурс, а srcdoc — встроенный документ. Стандарт HTML: элемент iframe

Для локальной схемы из двух файлов создайте второй полноценный HTML-файл с именем panel.html, содержащий панель и её таблицу стилей. Замените узел-оболочку и скрипт на iframe, ссылающийся на этот файл. Ниже приведён фрагмент для интеграции, а не самостоятельный документ:

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

Здесь указаны локальные имена файлов для примера. Перед использованием фрагмента создайте второй файл. Внешний размер фрейма задаётся на содержащей его странице, а внутреннее оформление — во встроенной странице. Считайте 280px примерной начальной высотой и проверьте, как помещается более длинное содержимое, вместо того чтобы полагать, что оно уместится.

Если вместо этого выбрать srcdoc, помните, что относительные URL ресурсов разрешаются относительно URL встраивающей страницы. Поэтому встроенный документ не получает автоматически независимую базу для ресурсов. MDN также указывает, что неподдерживаемый srcdoc заменяется значением src. Справочник MDN по атрибутам iframe

Проверьте совместимость и выясните причину неожиданного оформления

По данным MDN, базовый attachShadow() и свойство all широко поддерживаются браузерами с января 2020 года. Это не гарантирует поддержку всех более новых возможностей этих функций. В примере используется базовый режим open, а если Shadow DOM недоступен, остаётся видимым резервное сообщение. MDN: attachShadow(), MDN: all

@scope — ещё один поддерживаемый способ ограничить область применения группы селекторов, но он не останавливает наследование и не мешает посторонним глобальным правилам попадать в поддерево. По данным MDN, эта возможность стала доступна в актуальных браузерах с марта 2026 года, но в старых браузерах поддерживается ограниченно. Используйте её, если достаточно упорядочить селекторы; если нужны соответствующие границы изоляции, сохраняйте Shadow DOM или iframe. MDN: @scope

После редактирования примера выполните диагностику по шагам:

  1. Если файл отображается как исходный текст, проверьте, что его расширение — .html, и откройте его в браузере.
  2. Если резервное сообщение остаётся, проверьте, что JavaScript выполняется и браузер поддерживает attachShadow().
  3. Если панель выглядит неправильно, проверьте, что её содержимое добавлено в теневой корень, а затем изучите внутренние базовые стили и таблицу стилей.
  4. Если меняется окружающий интерфейс, проверьте изменения в таблице стилей документа и правилах для узла-оболочки.
  5. Если содержимое больше не помещается, проверьте размеры узла-оболочки или фрейма, прежде чем менять шрифты.

Выберите минимальную границу изоляции, подходящую для задачи: точечный CSS для контролируемого исправления, Shadow DOM с заданными базовыми стилями для изолированной панели или iframe для отдельного документа. Явно задайте расположение, внутреннее оформление и ссылки на ресурсы, чтобы раздел можно было изменить, не переделывая окружающую страницу.

Источники