Re: Discussing possibilities of a 'CSS-ignore' rule.

When you need to isolate some HTML/CSS content from another one, I think using IFRAMES is the best solution. This is exacly why they were made for.

In your case, the problem is most likely is that Word-genenerated CSS expects the browser to run in Quirks mode while your external template is running in Standards mode.
https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

Before messing things up with an IFRAME, let’s try this quick fix in your CSS:

    .wordContentWrapper * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

This is only a part of what is usually included in Quirks mode, but it’s an important one. If you’re left with only small issues after that, I would consider looking at https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior to see if you can fix the latest remaining issues.


From: Ketan Singh 
Sent: Friday, September 21, 2012 1:53 AM
To: www-style@w3.org 
Subject: Discussing possibilities of a 'CSS-ignore' rule.
Hello there!

I am Ketan, 23. I am a web developer based in India. I am freelancer at digit, which is the leading technology magazine published in India. 
I've been working on a project this week, which has a PHP script that is meant to open a popup window that contains a 'template' with dynamically generated values plugged in. The template was originally generated by Microsoft Word 2010, using the 'html, featured' (or something like that) saving option. The reason why I went for it instead of using CSS on HTML markup, is because of the complexity of the tables that had to be created, and I am sort of running short of time.
The tricky part started when I decided to insert the project's theme 'header' and 'footer' into that popup, which required me to include the css file on it as well. Now that the external css file is hooked up with with the popup, I have kind of, lost control on the styling that was originally generated by Microsoft word. Though most of the template markup has inline definitions, still some parts are not showing up as expected.

This makes me feel a need for something that could be called 'css-ignore'. E.g. If I had a div with id 'my_div', I could have used something like #my_div{  css-ignore:external;  } which could have asked the browser not to associate any external style sheets with 'my_div'. The css-ignore rule could have possible values such as 'inline', 'internal', 'external', which could make the browser ignore css of a certain 'kind' for a particular selection of elements.
I guess, there are many possible ways this can be achieved, many of them kind of 'hackish' like tweaking it using jQuery; but having a proper legitimate rule for it would certainly be helpful for many of us. 
In addition, it can also be a great tool for developers, who might need it to test their codes, in case they don't have a proper debugger.

I'd like to apologize in advance in case something similar to this already exists. I couldn't spare much time to research on this topic. 
In case there isn't anything similar to this, I'd love to discuss how this can be taken forward.
Waiting for hearing from you!

Regards,
Ketan Singh