У меня есть эта штука на моей веб-странице ... Я думаю, это можно было бы назвать виджетами ...Как изолировать конкретный элемент на веб-странице?
Как отделить CSS и JS от CSS и JS-страниц, содержащих страницы? предпочтительно без использования iframe?
В моем приложении пользователь может настроить CSS содержимого, поэтому мне нужен чистый список.
В самом внешнем элементе вашего виджета установите относительно уникальное имя класса. Например:
<div class="my_spiffy_widget">
<!-- Insert spiffy widget here -->
</div>
Поместите Javascript и CSS в свои собственные файлы. Для CSS, структуры всех ваших селекторов, как это:
.my_spiffy_widget P { /* paragraph rules */ }
.my_spiffy_widget A { /* anchor rules */ }
.my_spiffy_widget UL { /* unordered list rules */ }
Это гарантирует, что ваши правила не случайно получить переопределены другими правилами CSS.
Аналогично с JavaScript, префикс ваших функций с общим отличительным префиксом:
function my_spiffy_widget_doSomething() {...}
Избегайте глобальных переменных, если это возможно, но если вы не можете, префикс их, а также:
var my_spiffy_widget_firstTime = true;
Хотя это будет работать для основного виджета песочницы, пользователь может настроить CSS содержимого, поэтому мне нужен чистый список. – NullVoxPopuli
Проблема в том, что нужно переписать ** все ** правила. Если вы забудете один атрибут, он будет наследоваться/каскадно/безотносительно. Да, это работает, но нужно быть очень осторожным. –
В дополнение к тому, что сказал Феликс Клинг: любое правило с более высокой специфичностью будет иметь приоритет над другими правилами. Так работает каскад в CSS. –
You может добавить важное объявление в свойствах, что усложняет пользователю переопределение настроек.
например:
div.widget #header {
padding-left: 10px !important;
padding-right: 5px !important;
}
и/или вы могли бы захватить сценарий сброса CSS (например, Эрик Мейер) и предварить каждый селектор с именем вашего контейнера DIV.
Ну, я хочу, чтобы я и пользователь имели полный независимый контроль над CSS. Я управляю CSS-приложением, пользователь управляет CSS своей вещью. Один из парней, с которыми я работаю, давным-давно добавил это в базовую таблицу стилей * { margin: 0px; прокладка: 0px; } , который отлично подходит для нашего приложения, но он смешивается с виджетами, если пользователь хочет изменить отступы на столе, ему или ей необходимо изменить заполнение КАЖДОЙ ячейки, а не просто объявлять заполнение в таблице тег – NullVoxPopuli
Вы можете указать все элементы вне очень сложных имен класса css и убедиться, что они не сталкиваются с теми, которые пользователь выберет (например, «KAFHxyz _...»). Таким образом, все нормальные имена классов и стили по умолчанию будут применяться только к «виджету».
Это будет некоторое усилие, так как вы должны установить все стандартные стили CSS, используя !important (так что пользователь может сказать «тело {шрифт ...}», и он будет применяться только к своей области.
Кроме того, вы можете попробовать написать javascript, который извлекает все стили всех элементов, а затем добавляет «виджет» (и это JS/CSS), а затем восстанавливает все стили до того, чем они были раньше. Должно быть возможно, но производительность будет, вероятно, suck.
[EDIT] Это означает, что вы знаете, что можете создать iframe с JavaScript и манипулировать содержимым (DOM внутри) в контент вашего сердца, да? В этом случае IF rame будет просто Div-подобным элементом, который добавляет «пространство имен» для CSS и JS-файлов.
Я не думаю, что есть способ, но я хотел бы знать один :) –
Вы не можете остановить общий CSS, применяемый к разделу, но чтобы остановить CSS раздела, применяемого к остальной части страницы, см. Ответ Devon_C_Miller , – Quentin