StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>From the previous discussion, it seems as though no online generator exists, right? I sure couldn't find one that would parse the entire stylesheet. </p> <p>First, if em is applied to and image, or input, aside from the font inside an input, would they be relative, and if so, what and how? Images can't be nested, and I have a hard time seeing them being relative to every parent div width. (Conversion for the sake of CSS PIE, to avoid errors, is what is inspiring this).</p> <p>Aside from just input and images, I was wondering if there ways a way to convert an entire stylesheet. Help me to see if my logic would work. I think I have several of the elements already created, I would just need to tack them together. </p> <p>Working with the CSS alone can't do the trick, as it's impossible to know which elements will be nested. So it would require scanning the html output. What's the best way to do that? The only way I could think of is to apply all the styles inline, which a <a href="http://premailer.dialect.ca/" rel="nofollow" title="convert css to inline styles" > generator</a> has been made to convert templates for emails and such. Once styles are inline, this would show how everything is nested. From that, compare to stylesheet. </p> <p>Compare each nested element with "em" to any parent element with "em" to generate the px accordingly, and I already have a regex tool to parse the css, making this easier.</p> <p>The one problem is that a class can be nested under different elements, the em in a single class becoming different in it's context, thus impossible to convert to px and be applied the same. The only solution, I believe, is to recreate the nested structure, or a portion of, in the css sheet to apply the px accordingly, anytime the font size differs in context. </p> <p>For example:</p> <pre><code><code> // Original Stylesheet .mainClass{font-size:1em;} // HTML <div id="outerNest" style="font-size:.5em;"> <div class="mainClass"> Font here is .5em </div> </div> <div class="mainClass> Font here is 1em</div> // New stylesheet .mainClass{font-size:16px;} // newly created styles to work with px conversion #outerNest .mainClass{font-size:8px;} </code> </code></pre> <p>A. Do you think that could work? B. Is there a better way? C. Is it in any way worth it? I could have used it once in a blue moon in some random situations, but I doubt many people would find it of any value. Or is there a situation in which it would be handy in which people do run into here and there?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload