Предотвратить существующий CSS от стиля, введенного HTML / CSS - PullRequest
Новая
       22

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

15 голосов
/ 09 апреля 2009

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

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

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

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

Ответы [ 6 ]

12 голосов
/ 09 апреля 2009

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

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

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

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

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

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

3 голосов
/ 09 апреля 2009

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

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

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

1 голос
/ 09 апреля 2009

Почему бы не внедрить элементы html со встроенным форматированием, как это: 

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

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

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

1 голос
/ 09 апреля 2009

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

0 голосов
/ 04 мая 2015

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

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

0 голосов
/ 23 апреля 2009

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

например. используя jquery: $ ('html'). append ('

бла-бла-бла
');

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

...