Excluding a Content from Getting Styled

The layout of HTML Patterns contains the following:

• web view of the HTML markup and CSS
• source view of the HTML
• source view of the CSS

Both the textarea of HTML and CSS are editable to immediately update and reflect the changes on the web view.

The Problem

One thing that gets in the way is that the stylesheet of the site gets applied to the content in the web view. The favorable behavior is for it to appear unstyled by default and only the CSS in the source view will affect it.

Possible Solutions

1. Contain the web view in div and use style scoped
2. Reset the style by targeting the parent selector of the web view container
3. Use iframe srcdoc

Each of these solutions are not without quirks. I will do a quick follow up as I test for the best solution in this situation.

Stay tuned!

10/01/2014

As far as HTML Patterns is concerned, I settled with #1 – the original solution. Although style scoped is only supported by Firefox, the important thing is that the HTML markup is seen and it is interpreted in the web view. An advantage for Firefox users – they will get to see the style in the web view, too.

Regarding resetting the style of elements in a specific container, the CSS property all and its value initial, again, is only supported by Firefox. What I did was to manually reset each property that was previously set by the HopScotch stylesheet.

iframe srcdoc works best in bringing back the style of the content to browser default but it’s hard to control when it comes to live-updating the CSS (aside from the fact that, again, only Firefox supports that attribute).