Is there a way to target browsers which do/don't honor #id:before{content:"...?

HTML & CSS
1

hello,

given that this doesn’t work in all browsers:

#id:before{content:“CSS added text…”}

is there a way, in CSS, to distinguish between browsers which will carry out the above code and those which don’t? that is, is there a way to supply CSS only to browsers which can do content: adding, or, is there a way to supply CSS only to browsers which don’t do content: adding? i’m not sure which browsers don’t do content adding but at least IE6 i’d guess doesn’t. probably several others?

just to add: what i want to do is hide a bit of html text only in browsers which can do ‘#id:before{content:"…’, not hiding the particular html text in browsers which can’t.

thanks.

2

Hi,

You can check browser support in the Sitepoint reference quite easily. :slight_smile:

It’s basically IE7 and under that you would need to cater for as most other browsers are ok with it which means you could use conditional comments to target ie7 and under.

I didn’t quite understand what you were saying though.:slight_smile:

You can add generated content but you can’t take content away. If you want content to show in IE6 and 7 then it needs to be in the html to start with so you may as well do that for everyone.

If you just want to add content for capable browsers then you need do nothing for others because they won;t add it anyway.

I guess I’m still confused as to what you want :slight_smile:

3

hi Paul,

oh yeah :slight_smile:

It’s basically IE7 and under that you would need to cater for as most other browsers are ok with it which means you could use conditional comments to target ie7 and under.

right excellent, that’s what i need to know.

I didn’t quite understand what you were saying though.:slight_smile:

You can add generated content but you can’t take content away. If you want content to show in IE6 and 7 then it needs to be in the html to start with so you may as well do that for everyone.

If you just want to add content for capable browsers then you need do nothing for others because they won;t add it anyway.

I guess I’m still confused as to what you want :slight_smile:

(it’s ok, i know all i need to know now to do it fine, but just in case you’re interested: ) i want to add a bit of css text (using :before) and remove a bit of html text (using display:none on a span), but, i don’t want to remove the html text in browsers which can’t add the css text. so the desired result is: either do both adding and removing, or neither. because, as you say, IE7 and less doesn’t do css text adding (but of course do do display:none) i need to stop IE7 and less carrying out display:none

great, thanks Paul :slight_smile:

4

there is no such thing as “html text vs. css text”. only content.

like in #id:before {content:…}

so you talk about content either way: added in markup or “dynamically” in a css rule. i believe you have a logic error in there somewhere.

5

there’s text which is part of the html mark up, and there’s text which is added using css. that’s a fact. there’s nothing else to say :slight_smile: cheers.

6

yeah there is :wink:

you forgot about the text that’s added using js.

but i do believe you may be using a wrong approach. good luck :slight_smile: