Is it possible to create inline pseudo styles? [duplicate]

Question

Is it possible to create inline pseudo styles?

For instance, can I do something like the following?

<a href="#" style="background-color:green;{hover:background-color:red;}">Coding Horror</a>

The reason behind this is I'm developing a .NET library that creates UI elements. I want to produce HTML elements that can have their hover state set without the use of an external style sheet.

Answer 1

Unfortunately no, you can't implement hover effects using inline CSS.

A (poor) work-around for this problem is to have your controls render style blocks when they are rendered. For example, your control could render as:

<style type="text/css">
    .custom-class { background-color:green; }
    .custom-class:hover { background-color:Red; }
</style>
<a href="#" class="custom-class">Coding Horror</a>

If you could force your users to drop a "style control" at the top of their pages you could render all your custom classes there instead of rendering them next to each control, which would be a very, very bad thing (browsers will restart rendering every time they come across a style block, having a lot of style blocks scattered around your page will cause slow rendering).

Unfortunately there's no elegant solution to this problem.

Answer 2

This is kind of a Catch-22 situation.

On one hand, you can add a style block right before where your element is inserted into the page, but Chris Pebble points out the problems with that. (If you decide on this, make sure you pick unique IDs for your Elements so your selectors don't accidentally select or style anything else).

On the other hand, you could do something like this:

<a href="#" onmouseover="this.style.color=red;" onmouseout="this.style.color='blue';">...</a>

But, that's nasty in its own right as it ties together markup, presentation, behavior, and a whole bunch of other things.

You could also inject a stylesheet into the page by writing out a link tag or manipulating document.stylesheets, but that's going to trigger a download.

I've usually seen the first method (adding a style block) done on large. "Modular" portal sites do this sort of thing, so maybe it's the de-facto standard (it is at least more readable and maybe easier to maintain than cramming JavaScript in there?). The JavaScript method seems to have the least impact on the DOM and the overall page as you're keeping your presentation to yourself.

This is one of those front-end dev morasses where every answer you choose is wrong to some extent, so weigh the options and pick what's easiest for you to build and maintain.