This is an eternal battle, but there are a few ways we can make this plugin more resistant to page styles.
As a first step, the CSS needs to be made to cover more properties in case these are set away from the defaults. For example, here's a rule in Bootstrap:
* {
box-sizing: border-box;
}
This is a really invasive style that forces ALL elements to default to border-box instead of the default content-box. With that in mind, the CSS for this project would need to specify which one we want. We should do this for all such rules that might get set by page css. Could this be automated?
Instead of all this, it might do to have all elements inside a Shadow DOM, which would completely isolate this project from any page styling. Shadow DOM / Web Components support isn't quite there yet, so we'd have to use something like SkateJS with a polyfill.
This is an eternal battle, but there are a few ways we can make this plugin more resistant to page styles.
As a first step, the CSS needs to be made to cover more properties in case these are set away from the defaults. For example, here's a rule in Bootstrap:
This is a really invasive style that forces ALL elements to default to
border-boxinstead of the defaultcontent-box. With that in mind, the CSS for this project would need to specify which one we want. We should do this for all such rules that might get set by page css. Could this be automated?Instead of all this, it might do to have all elements inside a Shadow DOM, which would completely isolate this project from any page styling. Shadow DOM / Web Components support isn't quite there yet, so we'd have to use something like SkateJS with a polyfill.