Області дії

Використовуйте збірку з обмеженою областю, коли Trace CSS має оформити лише частину сторінки, наприклад вбудовану панель налаштувань. Така збірка використовує CSS @scope і застосовує стилі всередині контейнерів із класом trace-css.

#Підключення збірки з обмеженою областю

На сторінці Вибір версії увімкніть Обмежена область і виберіть Без класів або Повна. Додайте отримане посилання на стилі до сторінки.

#Розмітка області дії

<body class="trace-css">
  <section>
    <h2>Налаштування</h2>
    <label>
      Відображуване ім’я
      <input type="text" />
    </label>
    <button type="button">Зберегти</button>
  </section>
</body>

#Порівняння однакової розмітки

Обидва приклади підключають стилі з обмеженою областю. У прикладі з областю до <body> додано class="trace-css", тому Trace CSS оформлює заголовок, поле й кнопку.

На одній сторінці можна використовувати кілька контейнерів trace-css. Розміщуйте всередині контейнера всі елементи, яким потрібні стилі Trace, зокрема діалоги, які фреймворк виводить в іншому місці DOM. Стилі сторінки й успадковані властивості можуть впливати на контент області.