Как предотвратить вмешательство CSS во вставленный фрагмент HTML? - PullRequest
Новая
       0

Как предотвратить вмешательство CSS во вставленный фрагмент HTML?

4 голосов
/ 22 августа 2010

В настоящее время я разрабатываю расширение Safari, в котором используется встроенный сценарий для дальнейшей вставки некоторого HTML-кода в текущую веб-страницу, а также добавление некоторых других сценариев для его работы. Это все работает нормально, но проблема в том, что на внедренный HTML влияют таблицы стилей CSS, которые веб-страница уже импортировала. Например, HTML выглядит идеально на Google.com (который имеет относительно мало стилей CSS), но ужасно на StackOverflow.com (который стилистирует кнопки и т. Д.).

jQuery внедряется в веб-страницу во время отображения этого HTML-кода, поэтому у меня есть такая возможность. Я пробовал все виды вещей, включая обход всех элементов и вызов removeClass() для каждого из них, но безрезультатно. Я также пытался добавить классы "CSS reset" и т. Д., Но, похоже, ничего не работает.

Каков наилучший способ избежать вмешательства CSS в мой HTML?

Ответы [ 3 ]

5 голосов
/ 22 августа 2010

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

Ваш плагин: 

<div id="yourapplicationname_mainelement_name">
  <p>My paragraph that must not be styled</p>
</div>

Ваш css: 

#yourapplicationname_mainelement_name p {
  display: block;
  color: black;
  background: white;
  position: relative;
  ... and so on ...
}

Поскольку ваши правила стиля CSS наиболее специфичны, учитывая ваш идентификатор, они будут переопределять любые настройки, присутствующие на странице, где вводится ваш HTML.

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

1 голос
/ 22 августа 2010

это сложный вопрос. два варианта, как я это вижу. Вы можете установить упаковочный div вокруг всего вашего контента и поставить перед ним префикс. Пример: 

<body>
  <div class='wrappingDiv'>
     ...
  </div>
</body>

таблица стилей: 

.wrappingDiv * {}

Затем, когда вы внедряете jquery, используйте это, чтобы закрыть начальный div обтекания перед вашим контентом и обернуть любой следующий контент в другой div обтекания.

Вопросы:

  1. Возможно только если вы вводите другой контент сайта на свой собственный сайт.
  2. Это может быть сложно в зависимости от того, где вы вводите HTML.

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

Другой способ - использовать элемент, который не наследует таблицу стилей, как iframe, но у него есть свои проблемы ...

0 голосов
/ 22 августа 2010

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

Также я видел, чтопри внедрении html-кода люди устанавливают стиль содержимого плагина, используя атрибут «style» внутри тегов, поэтому браузер будет отдавать приоритет CSS внутри атрибута style, а не файлу CSS.Идея состоит в том, чтобы переопределить CSS, как правило, с помощью «! Важно».Но у вас могут быть проблемы в разных браузерах

РЕДАКТИРОВАТЬ я забыл сказать, что мой ответ на случай, когда вы вводите код на чужой странице, где вы не можете напрямую контролировать CSS

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

Нет похожих вопросов

...