Suggestion: Scoped Styles

[Touched]

The [div][/div] and other CSS tags result in some really ugly markup. Would it not be possible to grant scoped styling (so that It can't leak out and affect the surrounding styles) with something like

[PLAIN]
[scoped]
[style]
.my-class { color: red: }
[/style]

[class="my-class"]Whatever[/class]
[/scoped]
[/PLAIN]

This could be implemented using

<div class="scoped">
<style scoped>
.my-class { color: red }
</style>
<span class="my-class">Whatever</span>
</div>

Or using an Iframe for maximum browser support (with srcdoc, a data url containing html or some external html file generated from the inner BBCode)

<iframe class="scoped" seamless="seamless" srcdoc="...">

This would just allow for cleaner and reusable CSS inside a thread, and maybe hover effects or other things that are not currently possible.

 

[Touched]

The reason I haven't implemented this for all users with BB code is that I'm not confident about its safe usage, especially with browsers that haven't implemented it properly. And we're certainly not implementing iframes in posts.

I know the browser support isn't that great, that is why I suggested the iframe shim (or use some other shim, but iframes really are the best way). I wasn't suggesting that you allow full use of iframes, but merely use their sandboxing features to implement cross-browser scoped CSS. If BBCode rendered as HTML is safe from injecting arbitrary JavaScript and/or HTML, then rendered BBCode inside an iframe is no less safe, provided you do not allow users to control their attributes like src.

 

[Touched]

https://caniuse.com/#search=seamless

Simple shim:

iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}