CSS: пространство имен кусок HTML

Question

Я создаю расширение для браузера, которое будет вставлять кусок HTML в некоторые страницы. Я бы хотел, чтобы CSS страницы не относился к этому разделу. Каков наилучший способ сделать это? Есть ли хороший сброс, который я могу поместить в корневой элемент моего HTML и установить его!

Answer 1

Вы можете использовать сброс CSS и применить его только к подмножеству вашей страницы. Например, этот .

My page
<div id="no-css">
 blah blah this has no css
</div>

Конечно, вы должны охватить все в сбросе, например:

ol, ul {
    list-style: none;
}

должно быть:

#no-css ol, #no-css ul {
    list-style: none;
}

Чтобы упростить это, я рекомендую использовать CSS-фреймворк, такой как Less , который упрощает такие вещи:

#no-css{
    /* Big copy and paste of all the reset css file */
}

Используя этот меньший код, вы можете использовать меньше или просто сгенерировать новый файл reset.css и использовать его как обычно.

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

Другое решение - встроить вашу страницу в iframe.

Answer 2

Единственный способ на 100% вытащить его из каскада - поместить его в iframe.

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

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