Сделать виджет «inherit-proof»

Question

Мы разрабатываем виджет, который предназначен для встраивания в сторонние сайты. Способ, которым он встроен, - это динамическое введение div внутри основной части страницы, используя Javascript.

На странице без каких-либо или нескольких правил стиля виджет выглядит отлично. Проблема в том, что мы видим различные визуальные проблемы, вызванные тем, что правила стиля виджета переопределены веб-страницей (назовем ее главной страницей), когда она включена, когда на главной странице есть много правил CSS, некоторые из которых случаются, чтобы превзойти виджет, если виджет не определяет эти правила явно (таким образом, виджет наследует их от главной страницы).

Мне кажется очевидным решением для этого является: определение ВСЕХ правил CSS для каждого из элементов виджета. Когда я говорю ALL, я имею в виду все правила CSS, такие как цвет фона и т. Д. Для всех состояний, таких как нормальные, сфокусированные. Это, очевидно, метод жестокой силы и может привести к хорошему количеству работы только для простого виджета. На самом деле это не слишком умно.

Итак, мой вопрос: есть ли четкое средство, позволяющее предотвратить стирание стилей главной страницы виджета?

Для примера, скажем, страница хоста есть правило CSS, как это:

div { 
    border-bottom: 1px solid green; 
} 

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

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

Мы знаем, что использование iframe было бы невосприимчивым к таким проблемам, но мы предпочитаем не использовать его, и давайте оставим его вне обсуждения.

Мы также хорошо знаем, какой метод использовать! Важно в правилах CSS, чтобы переопределить предыдущие правила. Но это все еще требует определения полных правил CSS (т. Е. Метода жестокой силы). Пожалуйста, сохраните его и в обсуждении.

Спасибо.

Answer 1

all: initial; CSS свойство это то, что вы ищете:

The CSS все сокращённое свойство возвращает все свойства, кроме юникод-биди и направления, к их первоначальной или наследуемого значения. [MDN]

, но в настоящее время он имеет low browser support.

Вот пример того, как он может быть использован:

div div { 
 
    display: inline-block; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 10px; 
 
    background: gold; 
 
    border-bottom:5px solid green; 
 
} 
 
#wrap div { 
 
    all: initial; 
 
    display:block; 
 
    height:10px; 
 
    background:pink; 
 
    margin:1px; 
 
}

<div> 
 
    <div></div> 
 
    <div></div> 
 
</div> 
 
<div id="wrap"> 
 
    <div></div> 
 
    <div></div> 
 
</div>