Как оградить HTML тег от воздействия css стилизации?

Question

[Евгений Федоров]

Недавно столкнулся с этим вопросом. Пример: мой js скрипт вставляет в чужой(мне не подвластный) сайт div, этому диву я задаю свою стилизацию, но сайт её меняет.
Перечислить все css стили для этого div-а с !important не лучший подход, так как вставляются и другие теги кроме div-а.
Что делать?

Answer 1

[MuXaJIbI4]

может тогда проще iframe вставлять?

Comments

[Евгений Федоров]

Надеюсь это не единственный выход. Я это уже обдумывал.

[MT]

Полностью изолировать вашу вёрстку можно только с помощью фрейма.

Answer 2

[tanz_sullamora]

Пропишите inline-стили. Т.е. <div style="color:red">...</div>, они перебьют все остальные

Comments

[Евгений Федоров]

Перечислить все css стили для этого div-а не лучший подход

[Alex Kheben]

Перебьют, но, сдаётся мне, что не все. !important должны перебивать даже явно прописанные в блоке стили.
А вообще, чтобы не было проблем со стилями в таких библиотечках, то для них надо делать стили с префиксами.
Например, называется ваше творение awesome, делайте всё с префиксом awesome- или как-нибудь короче, например, awsm-.
В этом случае конфликт стилей маловероятен.

[Евгений Федоров]

Интересный подход =)

[Alex Kheben]

И если, таки, проблемы останутся, то это уже будут проблемы того, кто использует вашу работу.
Единственные проблемы, которые могут возникнуть, это в случае, если переназначены стили по селекторам тегов, например, div, span и т.п. Но это не из-за ваших кривых рук.

Вообще, ИМХО, подобные изменения дефолтных стилей по голым селекторам тегов — это не кошерно. Такое возможно, только в том случае, если вы используете какой-нибудь фреймворк, который задаёт весь стиль вашего сайта (Bootstrap и т.п.), но с ними проблем возникать не должно, т.к. там всё это имеется в разумных пределах. Но а в остальных случаях — это геморрой того, кто использует вашу работу.

Answer 3

[spmbt]

Назвать все дивы и прочие общие имена тегов своими именами, которым прописать необходимые свои стили и стили оригинальных тегов по умолчанию. Например, DIV заменить на MYAPPDIV, SPAN на MYAPPSPAN и т.д.

Answer 4

[rozhik]

Создайте innerHTML ифрейма а не через src. Точно так-же как Вы можете создавать див в родителе — также Вы можете сделать и дом нового фрейма. Обойти через CSS не получится, но это можно обойти через javascript.

Answer 5

[exdeniz]

Генерируйте название селекторов рандомно.

Answer 6

[Антон]

Сейчас не найду, но где-то читал аналогичный вопрос — там автор решил применить модель BEM для стилизации своего html-кода на чужом сайте, чтобы не пересекаться по стилям. Подробности, к сожалению, не запомнил, так как не верстальщик.
От себя — насколько я в курсе, к элементу применяется стиль от самого специфичного селектора. Может быть вам просто использовать какие-то уникальные id/class, чтобы ваши стили всегда были на элементе?

Comments

[Badevlad]

Самый высокий приоритет имеют inline-стили. Теоретически, достаточно перечислить все возможные параметры прямо в атрибуте style="...". Но, во-первых, это слишком много кода, а, во-вторых, не спасает от появления новых CSS-свойств.

[Евгений Федоров]

Пример я использую

<p id="lol"> Eugene </p>

а сайт пишет стили

p { display:none; margin-top:20px;}

[Антон]

Вы пишете тогда вот такой селектор и вуаля:

		p#lol {
			display: block;
			margin-top: 2px;;
		}
		p {
			display: none;
			margin-top: 20px;
		}

[Евгений Федоров]

Перечислить все css стили для этого div-а не лучший подход

[EugeneOZ]

Селекторы в CSS по ID это очень недальновидное решение, чреватое конфликтами.

Answer 7

[PopeyetheSailor]

Я все никак не соберусь поближе ознакомиться, но мне кажется что Shadow DOM, то что вам нужно.

Comments

[PopeyetheSailor]

Хм, нет, не поможет — caniuse.com/shadowdom

Answer 8

[Alex Pts]

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

Answer 9

[Всеволод Родионов]

Копайте в сторону shadow DOM, по идее полифилл от polymer должен поддерживать ie9. точно поддерживает ie10

Answer 10

[Павел Воронюк]

А если попробовать вот таким способом:

<div class="style">
...
</div>

а в css-е прописать:

div[class=style]{
...
}