abkagevi12D97F
New Member
I am working on a system that will allow users to embed content into a web page that they have access to. Conceptually the user would create a div with a specific id (let's call it "myId") on their page, and include a JavaScript file that I control which would basically inject markup into "myId".The markup returned would include divs with inline styles to them. I can't allow the users who are embedding this content into their page override the CSS styles.I've read hundreds of articles and threads about CSS Specificity, !Important, etc. It seems the only true way to block users from overriding your styles is to use iFrames.Below are three articles a few co-workers and I have been bouncing around.http://weblog.bocoup.com/3pjs-css-defense/https://speakerdeck.com/antonkovalyov/achieving-harmony-with-third-party-javascriptOne of the concerns is that iOS will stop supporting iFrames, and honestly we've all been told for years not to use iFrames. While it seems like the perfect and only solution it really does sound "hacky".Does anyone have any insight into any other solutions? I looked at how linkedIn embeds their "connect with linkedIn button" and they are simply wrapping every property value with an !important (which a) seem super hacky and b) doesn't account for undeclared properties and values).Thanks in advance.