StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The reason those CSS expressions don't work is because IE only evaluates the expression for the last property in the cascade.</p> <p>E.g. if you have an HTML document with a link inside it and the following "CSS",</p> <pre><code>a { color: expression(function(e){ alert('success'); e.runtimeStyle.color = 'blue'; }(this)); } a { color: red; } </code></pre> <p>you will never see that alert (nevermind the style change), because the CSS expression is never evaluated. So no, you can't use an expression to set the <code>!important</code> flag.</p> <p>That is to say, not when you try to set it on the same property. You can cheat. But that does make the expression a bit more complicated:</p> <pre><code>a { filter: expression(function(e){ e.runtimeStyle.color = 'blue'; alert('success'); e.style.filter = ''; }(this)); } a { color: red; } </code></pre> <p>There are a few things to note here.</p> <p>If you simply use another CSS property, you can be sure that the expression <em>will</em> be evaluated. Or at least, a little more sure, because if there's another rule further down the cascade that uses the same property already, you're still out of luck.</p> <p>Secondly, you have to use <a href="http://msdn.microsoft.com/en-us/library/ms535889(VS.85,loband).aspx" rel="nofollow noreferrer"><code>runtimeStyle</code></a> instead of <a href="http://msdn.microsoft.com/en-us/library/ms528441(VS.85,loband).aspx" rel="nofollow noreferrer"><code>currentStyle</code></a>. If you used <code>currentStyle</code> here, the second rule would still end up overwriting it. <code>runtimeStyle</code> overrides all other CSS (<em>except <code>!important</code> declarations</em>). So it's the JScript equivalent of <code>!important</code>.</p> <p>Also note that I'm resetting the <code>filter</code> property itself as well. That prevents the expression from being continuously re-evaluated. But as much as that may reduce performance, I don't think it's super critical. The main reason I put it in here is because I added <code>alert()</code>s in those expressions, and you <em>definitely</em> don't want to have those pop up forever.</p> <p>It is in fact also possible to use any other property you make up. This works too:</p> <pre><code>a { bogus: expression(function(e){ e.runtimeStyle.color = 'blue'; }(this)); } </code></pre> <p>However, since the <code>bogus</code> property doesn't actually exist, you can't reset it using Javascript, so this <em>will</em> be re-evaluated continuously.</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