I am in the process of setting up a preview box for an HTML editor on one of my pages. I created a basic
<div id="preview"></div>The issue arises when Bootstrap's styles start affecting the container and impacting the preview output. I see two potential solutions to this problem:
- Transfer the preview into an
iframe - Apply a clear or reset CSS to the element hosting the preview
For example:
<div id="preview" class="clean-css">
</div>
.clean-css {
div, p: {
border: 0;
margin: 0;
}
/* additional reset CSS rules can be added here */
}
I personally view using an iframe as a backup solution since it may feel clunky. I prefer keeping everything on one page. Therefore, I began exploring different reset CSS stylesheets. Unfortunately, most of them focus on standardizing browser differences rather than resetting all styles to their default values (for instance, blockquote retains its Bootstrap styling).
I could continue searching for a more thorough clear CSS solution, or I could attempt to enhance the current stylesheet myself. Before proceeding, I thought it best to seek advice from experienced frontend developers.
- Is there a more comprehensive clear CSS solution available?
- Is attempting to override Bootstrap's styles a fruitless task, leading me back to considering the
iframeoption?