Reputation: 5571
I'm currently developing a widget that can be embedded within a page. However, when embedded, it affects the style (font, text, layout, etc.) of the page it is embedded in.
I wonder how Clearspring and other widget frameworks encapsulate their widgets so as not to affect the embedding page.
Thanks.
Upvotes: 5
Views: 2702
Reputation: 490667
Make your widget, say under one div with a unique Id (or class if there will be multiple) that is least likely to clash with others on the host page. A good example might be #company-widjet-name
. See how jQuery UI does it (.ui-widget input
).
Then you might need to perform a sort of localised reset, to avoid the parent page's CSS from stuffing up your design. Modify something like Eric Meyer's reset to suit. Please avoid the #uniqueId * { padding: 0, margin: 0 }
as it can cause headaches.
As long as you do
#uniqueId a {
property: value;
}
The specificity should be strong enough to style the elements correctly without letting the host page's CSS from changing it unintentionally.
Upvotes: 6