How to prevent javascript and css messing up?

Question

My company has a website that serves the same app to several clients so every client has his own html templates and we can't edit anything of that.

We developed a beutiful Web 2.0 app with lots of jQuery that works great, it's a web toy fully enjoyable but we have to integrate it with the horrible and buggy stuff from the clients (like a code sandwich) and as it always gave us problems of all kind we decided to use an iFrame for our app and a little js to refresh its height (the parent and the iFrame content come from the same domain). The iFrame save us from all the mess and weirdness but it's sad to use something like that.

Do you know a better solution for this?

Answer 1

With regards to CSS you could use a "reset" stylesheet like http://meyerweb.com/eric/tools/css/reset/.

If all the content from the webapp is inside some tag then apply the reset stylesheet (modified to your needs with font-family, font-size etc.). Then your customers font-family,font-size,margins etc. don't have an effect to your webapp.

To get every CSS property you need you could inspect your webapp (in your enviroment, not the clients) with Chrome, and see the Computed style with Show inherited on. There you can see the properties the customers might set but there is a lot of the properties which you don't need. And some may even be wrong - such as dimensions so watch out and combine it with the non-computed style.

And ensure you call everything you do with your explicit content tag like below so you don't mess up the customers html/css:

#YourWebAppMainTag a {}

Answer 2

If your aim is to be independent of third-party CSS and JS, you must indeed use a separate document such as an iframe. The customer's code doesn't have to be ‘bad’ for you to get unexpected interactions between the content you're using and the stylesheet rules and actions they're working with.

Anyhow it would be rude for you as a guest script of someone else's page to be dragging an large, intrusive framework like jQuery into their window. Even if you used noConflict there are still many possible interactions if the script on their page doesn't expect to see it there.