Question

I know there are methods of adding content to a web page like stated here: http://nooshu.com/adding-content-using-css3

But.. I wonder if there is also a possibility to declare a js event in css on given selected nodes, like:

.myclass {
   declare-js-event: "onclick";
   declare-js-function: "alert('I've been clicked!')"
}

If (as I highly suppose) it is not possible, then are these features at least planned in some future css v4 or is it ruled out by design and css would never be able to do such things ?

Answer 1

You can declare JavaScript expressions and functions in CSS using IE’s expression() function. Another way is to use the url() function.

For example:

// Expression()
selector { width: expression((document.body.clientWidth > 1024)? "1200px" : "960px"); }

// URL()
selector { background: url("javascript: alert('XSS')"); }

Expressions in IE{6,7} add some additional logic that are sometimes used to cover up for the in cross-compatibility for IE; however, using expression() at all isn’t recommended.

As cx42net answered, CSS handles presentation whereas JavaScript handles behaviour of a page. Using JavaScript in CSS isn’t common and usually manifests itself as an XSS attack as demonstrated in the url() example above.

It’s possible to use JavaScript is older browser versions but I think they’re slowly removing support for it as IE8+ no longer supports expression(). That said, I don’t recommend using JavaScript at all in CSS especially if you expect your website to be Forward Compatible.