Is it possible to create inline pseudo styles?

Question

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.

@robbotic: Suppose he had a function foo(string u, string color1, string color2) which output Coding Horror 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, Jun 12 '09 at 13:38
@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, Jun 12 '09 at 13:42
What exactly is the purpose of this? Inline styling is a toxic breach of separation of concerns. Leave it to CSS. — annakata, Jun 12 '09 at 13:45
You could use javascript to inject the pseudo styles into the head of the document. — Ryan Florence, Jun 12 '09 at 14:43
Thanks for your answers everybody. I suspected there wouldn't be a true solution, just a variety of approaches that approach it from different ways. — Peter Bridger, Jun 23 '09 at 09:49
Well, with SVG you can add a style block inline with pseudo states. I'm trying to solve this as well. — 1.21 gigawatts, Mar 29 '14 at 05:54

score 13 · Accepted Answer · answered Jun 12 '09 at 13:38

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.

why is this a 'poor' 'workaround' ... isn't exactly the reason css pseudo styles exist? — dsdsdsdsd, Feb 23 '16 at 15:21

score 6 · Answer 2 · edited Aug 08 '16 at 07:36

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.

Yes, I think your last paragraph sums it up :) – Peter Bridger Jun 23 '09 at 09:50 — Peter Bridger, Jun 23 '09 at 09:50

score 0 · Answer 3 · answered Sep 26 '16 at 21:33

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.

score 0 · Answer 4 · answered May 16 '20 at 02:29

0

Hacss effectively brings pseudo-selectors to inline styles.

answered May 16 '20 at 02:29

Nick Saunders

453
1
4
9

score 0 · Answer 5 · answered Dec 14 '21 at 12:25

You could send a static stylesheet with the built page that uses css variables to control specific states and generate those in your script. Sadly you have to do this for every state and property you want to use.

* {
  background-color: var(--n-background-color);
}

:hover {
  background-color: var(--hover-background-color);
}

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

To avoid using !important we cannot define the normal state inline directly.

score -1 · Answer 6 · edited Oct 22 '13 at 17:25

-1

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

edited Oct 22 '13 at 17:25

Peter Mortensen

30,738
21
105
131

answered Jun 12 '09 at 13:39

David

5,356
2
26
39

Is it possible to create inline pseudo styles?

6 Answers6

Linked

Related