Предотвращение использования существующего CSS для стилизации HTML/CSS

Я работаю над проектом, который вводит JS + CSS + HTML через веб-страницы, которые я не контролирую.

Я беспокоюсь о том, что хост-страница ставит мой внедренный код - я хочу, чтобы мой введенный код выполнял только стиль my, а не их.

В настоящий момент единственный способ сделать это, о котором я могу думать, заключается в явном указании каждого возможного тега для класса контейнера <div> (с использованием предопределенных известных браузеров по умолчанию) и полагаться на наследование для того, чтобы эти правила распространялись до остальная часть моего введенного HTML. Этот CSS должен появиться в нижней части страницы <head>.

Я не думаю, что лучшее решение, и я не ожидаю его реализации. Конечно, есть лучшие способы.

Ответы

Ответ 1

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

Единственный способ, которым я могу думать, чтобы вы не могли повлиять на ваш стиль, повлиять на ваш код, был бы для вас песочницей, которую вы ввели, например, в iframe. В противном случае просто слишком много вещей, которые вам нужно определить - вам нужно будет определить каждый отдельный стиль (padding, border, margin, background... список можно продолжать и продолжать) селектор "*" (или, еще лучше, "#yourid *", поэтому вы просто переопределяете свой собственный контент), чтобы вы могли гарантировать абсолютный контроль над вашим CSS.

Изменить: я понимаю, что последнее решение не обязательно будет слишком болезненным, если вы используете omni-selector для reset для базовой линии:

#myid * {
    somestyle1: default;
    somestyle2: default;
    ... 
}

Я нашел тот, кто написал такое решение. Если вы прокрутите страницу достаточно далеко, вы увидите ее (от SuzyUK). Это не выглядит полным, но это хороший старт.

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

Ответ 2

Оберните введенный HTML специальным классом <div>, например

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

Затем в вашем CSS префикс всех правил с .my-super-specialized-unique-wrapper и используйте ! important для каждого правила. Это даст указание браузеру клиента рассматривать ваше правило как высшее для любых элементов, которые соответствуют независимо от любых других стилей, которые могут быть нацелены на них, даже если другие правила вне вашего контроля более специфичны.

Ответ 3

Вам просто нужно быть specific с помощью ваших селекторов CSS. Это гораздо более специфично, чем правила CSS главной страницы. Вы также можете добавить некий глобальный CSS reset, измененный только на reset ваш HTML. Под этим я подразумеваю что-то, что сбрасывает все цвета, фоны, шрифты, отступы и т.д., Обратно к одному стандарту. Оттуда вы можете создавать свои собственные стили.

Ответ 4

Почему бы не вставлять html-элементы с встроенным форматированием следующим образом:

<p style="color:red">This to be injected</p>

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

Другим решением было бы использовать очень специфический DOM-идентификатор для ваших элементов, а затем стилизовать их на добавленном CSS

Ответ 5

Если вы используете браузер Mozilla, вы можете (если нелегально) добавить видимый контент DOM в элемент <html> вне элемента <body> . Это позволит избежать любых стилей, которые соответствуют телу и наследуются вашим контентом. Возможно, что некоторые стили соответствуют html, что может победить эту технику, но я нашел ее полезной.

например. используя jquery: $('html'). append ('< div id = "mycontent" > blah blah blah </div> ');

Использование популярной библиотеки само по себе является проблемой, когда вы не хотите, чтобы ваш экземпляр библиотеки вмешивался в использование библиотеки, определенной страницами, которые вы изменяете. Greasemonkey '@require' не работал у меня. Я счел необходимым (но возможно!) Сохранить любые существующие значения двух или трех глобальных имен, назначенных jquery script, вставить мой экземпляр библиотеки в DOM, дождаться ее загрузки (пришлось использовать таймер, что раздражает, но я не мог увидеть, как это сделать), кешировать значения, назначенные глобальным переменным в моем собственном пространстве имен, для моего собственного использования и восстанавливать сохраненные.

Ответ 6

Я не уверен, как его использовать, поддержки браузера для этого, но это одна из основных причин использования http://www.w3.org/TR/shadow-dom/

Идея состоит в том, что вы можете вставить веб-компонент, который может быть полностью разработан и иметь определенные события, которые влияют только на shadow-DOM (поэтому ваш модуль не повлияет на остальную часть страницы).