Есть ли способ «песочницы» HTML-блока от CSS его страницы без использования фреймов?

Question

Возможно ли, например, иметь div, который полностью игнорирует правила CSS, независимо от того, какие class es и id s он содержит?

Answer 1

Нет, это (к сожалению) невозможно без iframe.

Вам нужно будет сбросить все существующие правила CSS для этого div, например, так:

div.sandbox
 {
    font-size: ....
    font-family: ..........
    margin: .........
    padding: .........
    line-height: .........
  }

Несмотря на то, что это сложно и никогда не будет на 100% надежным, таким способом можно достичь полезного результата.Вы можете посмотреть на одну из «таблиц стилей сброса», например Eric Meyer , чтобы получить список важных свойств для сброса; здесь - это то, что претендует на то, чтобы быть полным списком свойств CSS 2.1 - исключая CSS 3 и специфичные для поставщика, которые вы также должны принять во внимание.часто жестко кодируют их «сбросить CSS» как встроенный CSS внутри элемента HTML, чтобы переопределить любые !important правила, которые угрожают переопределить правила класса песочницы.

Answer 2

Может дать результаты:

div {
 all:unset !important;
 clear:both !important;
 margin: 0 !important
}

Встроенный стиль переопределит любые стили CSS. Это также означает, что любые стили, установленные javascript, будут переопределять любые правила CSS, просто потому что javascript устанавливает стили на встроенной основе.

Также любые стили между тегом style непосредственно в части html будут переопределять стили, установленные в файле css. В любом случае стиль inline управляет любым другим иерархически.