CSS щит для виджета

Question

Я создаю букмарклет.Это будет отображать виджет на странице.Тем не менее, некоторые существующие CSS на странице могут повлиять на мой виджет.Как этого избежать?Я не хочу использовать iframe.

Answer 1

Используйте локализованный сброс.

Возьмите существующий сброс CSS (или сверните свой собственный), и поместите в пространство имен его, поместив id вашего виджета (иликласс) перед ним.

Пример

HTML

<div id="my-bookmarklet-panel">...</div>

CSS

#my-bookmarklet-panel a,
#my-bookmarklet-panel div,
#my-bookmarklet-panel span {
    /* Reset rules */
}

Answer 2

используйте утверждение! Important в нашем виджете CSS, чтобы защитить ваши правила от переопределения.