Изоляция фрагмента кода от всех существующих внешних CSS - PullRequest
1 голос
/ 14 августа 2010

Я использовал учебник для создания виджета для моего сайта.

Этот виджет теперь необходимо поместить на сложную страницу с существующими правилами CSS для важных тегов, таких как *, body, ul и li.

Есть ли способ добавить этот виджет (в настоящее время это отдельная страница с html, css и javascript) на мою веб-страницу, чтобы веб-страница не применяла весь свой CSS сверху?

Ответы [ 2 ]

2 голосов
/ 14 августа 2010

Есть ли способ добавить этот виджет (в настоящее время это отдельная страница с html, css и javascript) на мою веб-страницу, при этом веб-страница не применяет весь свой CSS сверху?1004 * Самый простой способ - использовать iframe.

. Если вам нужен встроенный виджет, разумнее всего указать встроенные свойства CSS в разметке виджета.Обычно это плохая практика, но здесь это правильно.

Посмотрите, например, как выглядит значок профиля Facebook (чтобы увидеть его, нужно быть пользователем Facebook):

<!-- Facebook Badge START --><a href="http://www.facebook.com/pekkagaiser" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Pekka Gaiser">Pekka Gaiser</a><br/><a href="http://www.facebook.com/pekkagaiser" target="_TOP" title="Pekka Gaiser"><img src="http://badge.facebook.com/badge/1238473725.2447.1697336437.png" width="120" height="239" style="border: 0px;" /></a><br/><a href="http://www.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create Your Badge</a><!-- Facebook Badge END -->

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

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

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

Самый простой способ - обернуть виджет в дополнительный div с идентификатором типа widgetwrapper. Затем добавьте к каждому правилу CSS префикс #widgetwrapper [space]. Таким образом, CSS из виджета не повлияет на остальную часть страницы. Убедитесь, что вы поставили CSS для виджета последним в CSS. Если с вашим виджетом все еще есть правила страницы, перезапишите их в виджете css.

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