Mozilla/Firefox Issues

The Gecko-based browsers like Mozilla and Firefox have a phantastic and still growing standards support. Thus I only noticed one minor irritating issue. Resolved^[1].

Generated Content — The CSS content property

CSS2 allows authors to include content via the content property. This property can have the following values:
[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

We are now only interested in the first value: string. Strings may contain any character which is included in the character encoding specified with the @charset rule right at the beginning of the stylesheet, except some ASCII- characters with special meaning, which have to be escaped, like single or double quotes. What about characters which are not part of any common character encoding but are part of e.g. UTF-8 (one may think of Mathematical Operators or Dingbats)?

These characters are meant to be included through their numeric code. The syntax for this inclusion is not the same as in HTML, meaning we should not use the delimiters & and ; for inclusion of encoded characters into stylesheets but should rather escape the hexadecimal numeric code with a backslash \ followed by a whitespace or by padding the hexadecimal code to six digits with leading 0.

Take for example the COPYRIGHT SIGN ©. Its hexadecimal numeric code is A9, thus it may be included in stylesheets using either of these possibilities:

Escaping followed by whitespace:

content: '\A9 ';

Padded escaped numeric code:

content: '\0000A9';

As I would like to have each visited link followed by the CHECK MARK character (codepoint 10003_dec, 2713_hex) ✓, this should be easily achieved using this little piece of code:

a:visited::after { content: '\002713'; }

Now this is all very nice and well but to my utter dismay Gecko browsers (and Opera as well) only allow the first 256 characters upto codepoint FF to be escaped and used for the content property in stylesheets. Luckily enough Opera allows the use of delimited numeric code references to be applied in stylesheets:

a:visited::after { content: '✓'; }

While Gecko browsers interpret this string literally, and correct as is, Opera renders this string wrong as the CHECK MARK character.

As there does not seem to be a clean solution and as I do not want to include this character as a picture, my current workaround is to use the string '[x]' for my purpose of marking links as visited in Gecko browsers. Surely no ideal solution but anyway better than not rendering the content property at all.

• Scope: The CSS content property.
  Note that the quotes property is not affected. With the latter, escaping hexadecimal number codes works like a charm.

Applies to:

Update: The described behaviour is not apparent in the absence of myriad other stylesheet rules mingled with this property as encountered through my stylesheets. A testcase demonstrates Gecko’s correct behaviour when only few properties are applied.

Resolved

The behaviour I noticed was actually not caused by any CSS rules but was caused by the unproperly applied PHP language construct echo. The problematic line was: <?php echo ("a:visited::after { content: '\002713'; }");?> Reading the php manual about echo I became aware that this command differentiates between single and double quotes. Variables inside double quotes are first evaluated before echoed while they are literally returned when set inside single quotes. This apparently applies to escaped characters as well. The solution is simply to change the quotes: <?php echo ('a:visited::after { content: "\002713"; }');?>