Are there any known issues with putting invalid CSS characters (@,:,!) in the class attribute of a HTML element?

Question

I wrote a comparison validator, that compares two inputs values.

Originally in tried using the primary input's name attribute to store the secondary inputs id.

//example: does not work in IE7
<input id='txtPrimary' type='text' class='compare' name='txtSecondary'/>
<input id='txtSecondary' type='text' />

This work in every browser except IE7. I then tried using the rel attribute, but this broke in FF.

I decided to just put the secondary input's id in the class attribute.

//example: appears to work
<input id='txtPrimary' type='text' class='compare @txtSecondary'/>
<input id='txtSecondary' type='text' />

I was also thinking about maybe doing something like:

//example: just an idea at the point 
<input id='txtPrimary' type='text' class='compare id:txtSecondary'/>
<input id='txtSecondary' type='text' />

Before I continue working on this, even though it appears to be working cross-browser, are there any known issues with putting invalid CSS class characters (@,:,!) in the class attribute of a HTML element?

Answer 1

A simpler solution would be to split it with a dash - or an underscore _, which are both valid in CSS class names.

<input id='txtPrimary' type='text' class='compare id-txtSecondary'/>
<input id='txtSecondary' type='text' />

<input id='txtPrimary' type='text' class='compare id_txtSecondary'/>
<input id='txtSecondary' type='text' />

Answer 2

CSS fun fact! In section 4.1.3 of the Syntax and Basic Data Types (of CSS2) recommendation, it says...

Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

So you can include special characters in your CSS:

<style type="text/css">
    .\@user { /* valid! */
        color:red;
    }
</style>

Additionally, the class attribute is a cdata-list which basically means "any text except new lines and multiple spaces".

So you can include something like this in your markup:

<div class="@user">
    This is an @user
</div>

Your problem isn't so much the @ or the : characters, but those spaces   you've tossed in. (since in the class attribute spaces mean something special: "Multiple class names must be separated by white space characters.")