StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The newest browser's SHOULD support it, I tried the following code.</p> <p><em>This is a webkit example I made, so check it in chrome</em></p> <p><strong>CSS</strong></p> <pre><code>p { -webkit-var-a: -webkit-calc(1px + 3px); margin-left:-webkit-calc(-webkit-var(a) + 5px); } </code></pre> <p><strong>HTML</strong></p> <pre><code><p>This text should have margin-left, but it doesn't</p> </code></pre> <p><strong>FIDDLE</strong></p> <p><a href="http://jsfiddle.net/uqE8b/" rel="nofollow">http://jsfiddle.net/uqE8b/</a></p> <p>If you inspect the <code><p></code> element you can see that it DOES see the code as valid, it just doesn't do anything... So it seems that for now you have to use javascript, LESS or anything equivelent as it's still a experimental feature.</p> <p><strong>EDIT:</strong></p> <p>it <strong>DOES</strong> seem to work when you make the var a plain number:</p> <pre><code>p { -webkit-var-a: 3px; margin-left:-webkit-calc(-webkit-var(a) + 5px); } </code></pre> <p><a href="http://jsfiddle.net/uqE8b/1/" rel="nofollow">http://jsfiddle.net/uqE8b/1/</a></p> <p><em><strong>So to answer your question, yes this is possible, but I would not recommend it for now.</em></strong></p> <p><strong>CSS</strong></p> <pre><code>.my-style { height:100px; background-color:black; -webkit-var-width: 50px; margin-left: -webkit-calc(50% - -webkit-var(width) / 2); } </code></pre> <p><strong>FIDDLE</strong></p> <p><a href="http://jsfiddle.net/ShsmX/" rel="nofollow">http://jsfiddle.net/ShsmX/</a></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