Как CSS песочница / сброс всей области DIV в текущей странице?

Мы разрабатываем букмарклет, и когда букмарклет загружается на разных сайтах, например: cnn.com, bbc.co.uk, yahoo.com он отображается в различных стилях, и у нас есть борьба, чтобы сбросить эти стили.

Содержимое букмарклета находится в текущей странице DOM, а не в iframe (потому что нам нужны файлы cookie и доступ к DOM).

Мы пробовали использовать CSS reset, но это сбрасывает только некоторые базовые вещи, такие как поля. И страницы, где, например, есть пользовательская форма, или закругленная таблица прямоугольники он наследует и не должен.

Есть ли способ полностью изолировать эту область DIV на текущей странице, чтобы она выглядела только так, как мы хотим?

4 9
javascript html css bookmarklet

4 ответа:

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

Напр. b или em или i или, возможно, даже один из новых элементов html5, если вы не беспокоитесь о поддержке браузера.

И стилизовать их в display: block, чтобы они функционировали как div, который является блочным элементом.

Ваш результирующий HTML не будет действительным или красивым, но это закладка, так что, meh.

Короче говоря, действительно хороший сброс - это то, что вы будете необходимость.

Или вам просто придется жить с небольшими различиями в вашем стиле.
1

В конечном итоге мы используем https://github.com/premasagar/cleanslate

CleanSlate-это крайняя таблица стилей CSS reset. Он используется для сброса стиля HTML-элемента и всех его дочерних элементов обратно к значениям CSS по умолчанию. Он состоит исключительно из !важные правила, которые переопределяют все остальные типы правил.

1

Ну, вы можете использовать либо уникальный идентификатор и добавление !важно для каждого свойства после этого-для сброса созданного элемента в DOM-или вы можете использовать новый атрибут scoped в "HTML5".

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

Таким образом, это экспериментальный атрибут scoped в разделе style, но в прошлый раз я попробовал его только Chrome / Chromium поддерживал его, Firefox, возможно, тоже недавно получил поддержку - потому что в списке рассылки была огромная дискуссия.

Http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped

Правка:

Другим решением может быть использование пользовательского элемента, который по умолчанию отсутствует в DOM. Что-то вроде документа.createElement ("thisisfrommyapp"); Вы можете стилизовать их, как и другие элементы, но должны применить display: block или что-то еще поведение нужно для них.

Также, IE позволяет использовать их, но на самом деле вам нужно вставить их в парсер трезубцев раньше. Если вы хотите использовать их в HTML, вы должны выполнить createElement() до того, как DOM будет проанализирован (поэтому он, скорее всего, находится в голове вашего документа).

<html>
<head><script>document.createElement('customelement');</script></head>
<body><customelement>is stylable in IE8, too</customelement></body>
</html>

Вы должны сделать материал createElement только для Trident, потому что в противном случае вы приведете к странному поведению синтаксического анализа из-за их отображения: inline-block defaulted model:)

Если вы используете XHTML на веб-сайте по каким-то глупым причинам (нет никаких веских причин использовать XHTML поверх HTML, из-за парсеров, которые все равно удаляют XML-теги), вы должны использовать для него пользовательское пространство имен.

~Ура

0

Выполните следующие 2 шага, чтобы изолировать контейнер.

<div class="namespace-box">
    <h1 class="namespace-title">Title</h1>
    <p class="namespace-text">Text</p>
</div>
  1. Unset все свойства пространства имен контейнера, all: unset; является просто заполнителем: 
[class*="namespace-"],
[class*="namespace-"]:after,
[class*="namespace-"]:before,
[class*="namespace-"]:hover:after,
[class*="namespace-"]:hover:before {
    all: unset;
    // properties to be unset
}
  1. Используйте задачу Grunt или Gulp для добавления селектора атрибутов в исходный CSS. Это увеличивает каскад и предотвращает переопределения с помощью unset hack: 
[class*="namespace-"].namespace-box,
[class*="namespace-"].namespace-title,
[class*="namespace-"].namespace-text {
    // original properties
}

Вы можете автоматизировать спецификацию с помощью задачиpostcss-increase-specificity .

Наслаждайтесь вашим пуленепробиваемым контейнером.

0