Currently, we are in the process of developing widgets that will be embedded on multiple pages. To safeguard these widgets from potential CSS conflicts (such as a generic p { background-color: red }), I have two options in mind:
The first option involves using a reset stylesheet to ensure all CSS properties for the widget elements are established with known defaults. With the use of a CSS preprocessor like Less, this can be achieved easily:
html body #myWidgetID { .resetCSSMixin(); }The second option is to embed the element within an
iframe, similar to the approach recommended on HTML5 Rocks.
I am familiar with Option 1 and understand its functionality. Although not aesthetically pleasing, it should serve its purpose. However, I have some reservations regarding Option 2. Will a high number of iframes impact page speed? Considering that many visitors access our sites using older hardware and slow internet connections, could this pose a problem? Additionally, would there be browser compatibility issues, especially when supporting old IE 8 without utilizing newer iframe attributes?
Can anyone provide insights into why I may want to avoid choosing Option 2? Despite its appeal, I seek more guidance before finalizing my decision.