Предотвратить наследование CSS

Question

Я пытаюсь написать плагин jQuery, который можно перенести на любой сайт.

Мой плагин создает div и применяет к нему стиль.

Он хорошо работает в автономном режиме, но когда я помещаю его в контекст сайта, появляется класс css, от которого он наследуется. Дело в том, что я не могу изменить существующий CSS веб-сайта ... поэтому мне нужен способ «предотвратить наследование» (который, я знаю, технически невозможен).

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

Другое дело, что я не хочу использовать iframe вместо div, потому что мне нужно предоставить возможность форме взаимодействовать с моим div, потенциально.

Однако, два класса css с веб-сайта (которые я не могу изменить), которые вызывают мои проблемы:

* {
    font-weight: inherit;
    font-style: inherit;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

html {
    width: 100%;
    height: 100%;
    font-size: 10px;
}

Answer 1

CSS не основан на наследовании, а скорее "каскадный" (это первый C в "CSS"). Понимая это, вы можете обойти описанную проблему несколькими способами:

1) Добавьте встроенные стили к вашему элементу через скрипт. Встроенные стили имеют приоритет над правилами CSS, будь то из классов, идентификаторов или элементов.

2) Добавьте свой собственный файл CSS программно. CSS-каскады в том порядке, в котором правило появляется в документе. Вы можете написать элемент CSS link в нижней части страницы, чтобы включить CSS-правила вашего плагина. Поскольку они предположительно ниже или «позже» в документе, чем CSS сайта, ваши правила будут иметь приоритет.

3) Программно напишите тег style внизу документа. Та же концепция, что и у # 2, но без внешнего файла.

Я бы лично склонялся к # 1. Если вы хотите, чтобы ваш плагин был непротиворечивым по внешнему виду, независимо от того, что еще происходит, независимо от того, на каком сайте он используется, единственный способ убедиться в этом - применить ваши стили в стиле.

Тем не менее, есть смысл в настройке интерфейса вашего плагина с помощью CSS-классов. Может быть, вы пытаетесь отобрать что-то, чего не должны делать. Например, если весь сайт использует шрифт Serif, и вы используете принудительный шрифт Sans в пользовательском интерфейсе вашего плагина, внешний вид вашего плагина теперь расходится с сайтом. Это может нарушить условия сделки, когда кто-то рассматривает ваш плагин ... настройка - это хорошая вещь в мире многократно используемого кода, и CSS - способ сделать это возможным.