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

On Thu, Sep 20, 2012 at 4:53 PM, Ketan Singh <singh.ketan7@gmail.com> wrote:
> 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.

This is a good use-case, and we have several ways coming down the
pipeline of helping to address it!

First, we've discussed (but not yet put into a draft) an "all"
property, which only takes the values "initial" and "inherit".  It
acts as a shorthand for *all* properties.  This lets you shut down
inheritance from the outside world, resetting you to initial values
the same as if it was in an independent document.

However, that's not always enough.  It prevents inheritance from
leaking values into your element, but the outer document's CSS might
still accidentally target elements *inside* your element.  The Web
Components spec being developed in the WebApps working group can
address this.  It will allow you to write your popup as a component,
and block all outside CSS from targeting elements inside of it - only
the styles you define or link *inside* of the popup will apply.

So, nothing needs to be done here - your use-case is already being
addressed by other technologies we're developing inside the W3C.

~TJ

Received on Friday, 21 September 2012 20:40:52 UTC