Is it possible to create inline pseudo styles?

19
votes

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.

5
css
@robbotic: Suppose he had a function foo(string u, string color1, string color2) which output <a href="[[u]]" style="background-color:[[color1]];{hover:background-colour:[[color2]];}">Coding Horror</a> Using inline hover styles is simpler. Is this a good idea? I'd rather just have such a function that took in a style...but this forces the people using my class to use css themselves, which makes deployment slightly more work in the short term. – Brian
@Brian I try to avoid inline styles whenever possible. I know they are faster to set up, but I think you lose out if you ever need to duplicate that same style somewhere else. I'd rather have a big CSS file (or multiple CSS files) with all of the styles on my site. This way I can access whatever one I want easily and I can make one change and effect everything I want to across my entire site. – Robert Greiner
What exactly is the purpose of this? Inline styling is a toxic breach of separation of concerns. Leave it to CSS. – annakata
You could use javascript to inject the pseudo styles into the head of the document. – Ryan Florence
duplicate of stackoverflow.com/questions/1033156/… – rubo77

5 Answers

13
votes

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.

5
votes

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.

0
votes

I would dynamically create a CSS file as I parse all the controls, and I would add a server side attribute to the controls that contained the hover or other pseudoclass styles.

<a style="color:blue" styleHover="color:blue" id="a1">Click!</a>

Your code can look for these attributes and generate a css file on the fly

#a1:hover {
  color:blue
}

I don't know if .NET allows for you to do this type of parsing of the attributes, but I do something similar in a framework I created for php.

0
votes

Hacss effectively brings pseudo-selectors to inline styles.

-1
votes

Or you can use jQuery's hover function and set the background color.