W3C home > Mailing lists > Public > www-style@w3.org > November 2012

Re: [css21] undo style declarations / cascading

From: François REMY <francois.remy.dev@outlook.com>
Date: Thu, 8 Nov 2012 19:32:04 +0100
Message-ID: <SNT124-DS5E1229361B18AFAD27516A5690@phx.gbl>
To: "Pete Boere" <pete@the-echoplex.net>, "Andrew Fedoniouk" <news@terrainformatica.com>
Cc: <www-style@w3.org>
|  <div id=editor contenteditable>
|      <table width=700 >...</table>
|  </div>

I may be wrong but it seems to me that what you want is probably an "<iframe 
seamless />"  whose designMode is on. Then, you inherit general styling from 
the main content but not specific things like table formatting. There are 
already good prolyfills for <iframe seamless> availables.

Eventually, the "ideal" solution would be to use an "x-editor" web component 
which would put its edited content in the shadow DOM (so the table would not 
be matched by the selector in the first place, but you could optionnally 
force some selectors to enter the shadow DOM by doing ".shadow-entry ... a 
{ color: red; }" where ... is the "ShadowDOM Traversal combinator" or, 
better, by relying on a specific stylesheet in the components's template 
using CSS Custom properties as parameters (those will be inherited so you'll 
be able to use them to style your ShadowDOM element's childs).




|  <img width="300" />
|  <img width="300px" />
|  <img width="300%" />
|
|  img {width: auto;}
|  img {width: attr(width ?);}

The attr() function as defined in CSS Values and Units has flaws. However, 
you can achieve what you want using CSS Custom Properties and References :

    img {
        width: get(
            attr width ||
            get(
                attr width | px |
                auto
            )
        );
    }

(the prose for 'attr <attribute-name>' is missing but should be easy to 
infer) 
Received on Thursday, 8 November 2012 18:32:25 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:02 GMT