- From: François REMY <francois.remy.dev@outlook.com>
- Date: Thu, 8 Nov 2012 19:32:04 +0100
- 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 UTC