Can't get css property of 'content' in Safari 4

Question

I'm having the hardest time figuring out why Firefox3.1 returns the value of 'content' on a test element, while Safari 4 won't.

My sample page is setup like:

<style>
#asd{
content: 'test';
}
</style>

<div id="asd">
Bleh
</div>

And my JS is using getComputedStyle. This works for other properties like "background-color" but not for "content":

if( window.getComputedStyle ){
    var thestyle = window.getComputedStyle( document.getElementById('asd'), '');
    alert( thestyle.getPropertyValue('content') );
}

Is Safari more restrictive about the pseudo-element selectors, :before and :after? I tested with :after and that also fails, while FF succeeds in returning the data.

Answer 1

Check this line out it may solve all your problems:

<div id="#asd">

Shouldn't that be:

<div id="asd">

I'm guessing that was a simple mistake, but to clarify, you don't need to (shouldn't) include a # in the name of an element id.

Also i'm guessing that Firefox ignores this issue and just and compensates for it, while safari may be more strict in its implementation of the code so it doesn't compensate.

Answer 2

Safari only supports the content property on the :before and :after pseudo-elements.