The most detailed CSS character escape handling

CSS Character Escape sequences by Mathias, 12th July 2010

There are some limitations to consider when writing CSS styles for tags with strange class or ID attribute values. For example, you can’t use ## {color: #foo; } to match elements like id=”#”; Instead, these weird characters should be escaped (in this case, the second “#”), which removes the meaning of special CSS characters contained in identifiers and references to characters that cannot be simply typed out, such as maddeningly Unicode symbols.

There are other cases where you may or need to use escape to escape a character in CSS. For example, you might write a selector for an interesting ID, class, attribute, or attribute value; Or you might want to use the Content property expression to insert a strange character without changing the character encoding of your CSS file.

Identifiers and strings in the CSS

The CSS syntax specification defines identifiers using token diagrams. Identifiers can include a to Z, a to Z, 0 to 9, underscores, hyphens, non-ASCII characters, and escape sequences for any character. However, it cannot begin with a number symbol or a conjunction symbol immediately following a number symbol; And the identifier contains at least one character (that is, a null character is an incorrect identifier).

The syntax of identifiers is referenced in many parts of the specification, including element names, class names, and ids in selectors.

For the definition of a string, the specification says: you can use double or single quotation marks, but double quotation marks cannot appear inside double quotation marks unless they are escaped (for example, ‘\”‘ or ‘\22’); The same goes for single quotes; Strings cannot contain line breaks directly. Escape sequences are used to represent line breaks (U+000A), such as “\A” or “\00000a”; Line breaks can also be denoted by “\ D \A “(CRLF), “\ D” (“\r” in other languages) or “\ C “(“\ f” in other languages); Strings can be broken up into lines for aesthetic or other reasons, but the newline character itself needs to be escaped with a backslash (\).

Now that we know that character escape is supported in both identifiers and strings, let’s look at how these escape sequences are used.

How to escape in CSS

When escaping a character in CSS, you should keep these rules in mind. If you write a selector for a class or ID, use strict syntax for it; If you want to use strings (including quotes) in your CSS, you only need to escape quotes and newlines.

The beginning of digital

If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. For example, the code point for the character 1 is U+0031, so you would escape it as \000031 or \31.

Basically, to escape any numeric character, just prefix it with \3 and append a space character (). Yay Unicode!

If the first character of an identifier is a number, it needs to be escaped with its Unicode code. For example, if the Unicode code point for 1 is U+0031, escape with \000031 or \31.

Basically, all numeric characters need to be escaped is preceded by \3 and followed by a space.

Special characters

Any character that is not hexadecimal, line feed, carriage return, or page feed can be removed from its special meaning by backslashes.

The following characters have special meanings in CSS:! “, #, $, % & ‘, (), *, +, -. /, :; <, =, >,? , @, [, \], ^ `,,,, {, |,}, and ~.

If you want to use these characters, you have two options: first, use Unicode code points. For example, if the code point for the plus sign (+) is U+002B, use \2b (note the trailing space) or \00002b (use the full 6-digit hexadecimal number) to escape. The second is a little more elegant and simply uses a backslash (\), for example, + uses \+ escape.

In theory, : could be escaped using \:, but IE8 versions below do not recognize this escape sequence correctly. One solution is to use \3A instead.

White space characters

Whitespace — even some characters that are technically invalid in HTML attribute values — can be escaped as well.

Any characters matching [\t\n\v\f\r] need to be escaped based on their Unicode code points. The space character () can simply be backslashed (\). Other whitespace characters don’t need to be escaped.

Whitespace characters – although some characters are technically wrong in HTML attribute values – can also be escaped.

Characters that match [\t\n\v\f\r] need to be escaped according to Unicode codes; The space character () only needs to be escaped with a backslash (“\ “); Other whitespace characters do not need to be escaped.

The underline

CSS doesn’t require you to escape the assumptions (_) but if it appears at the start of an identifier, I’d recommend doing it anyway to prevent IE6 from ignoring the rule altogether.

CSS does not require the underscore (_) to be escaped, but IF it is at the beginning of an identifier, I recommend that it be escaped to avoid IE6 ignoring the entire style rule.

Other Unicode characters

Except for these characters, characters that have no meaning can and should be left unescaped.

As a rule, all characters can be escaped with their Unicode code points — as mentioned above. (for example, the four-dash 𝌆 code point is U+1D306, which can be escaped with \ 1D306 or \01d306), but older Webkit browsers do not use the BMP plane (a character plane classified by the Unicode specification that contains the most commonly used characters). Each plane has 65536 or 2 to the 16th characters. Are not supported by this escape.] Older WebKit Browsers don’t support this syntax for characters outside the BMP. (Restored in April 2012)

Because of browser bugs, there is another (non-standard) way to escape these non-BMP characters by splitting their UTF-16 code points (e.g., \d834\ DF06), but this syntax is not supported by Gecko and Opera 12.

Since there is currently no cross-browser compatible way to escape non-BMP flat characters, it is best not to escape them.

The trailing whitespace character of a hexadecimal escape sequence

Any space character (U+0020) immediately following the hexadecimal escape sequence is automatically treated as part of the escape sequence. For example, to escape the text foo © bar, use foo \A9 bar, where \A9 is followed by two Spaces, the first being absorbed and only the second retained.

A space character immediately following a hexadecimal escape sequence can be omitted only if the character next to it is not a space character and is not a hexadecimal numeric character. For example, foo©bar corresponds to foo\A9 bar, and foo©qux can be written as foo\A9qux.

The sample

Here are some random examples:

. \ 3A\ ` \ [{}/* Matches the class=": '(" element */31. \a2b3c{}/* Matches the element of class="1a2b3c" */# \#fake-id {} /* Matches the element with id="#fake-id" */
#-a-b-c- {} /* Matches the element with id="-a-b-c-" */
#© { } /* Matches the element whose id="©" */
Copy the code

Check out the demo page for this post (@id and @class in HMTL5) to see more.

… What about in JS?

For JavaScript, it depends.

Document. The getElementById (), and a similar approach, such as the document. The getElementsByClassName () used directly without escape before the attribute value can be used (HTML enthusiast that way of escape). Of course, you still need to escape quotes to make sure the string is syntactically correct.

And if you use the Selectors API (i.e., the document. The querySelector () and the document. The querySelectorAll ()) or use is dependent on the same syntax of library, you must use a escaped the CSS selector, Then escape — all you need to do is double each backslash (including quotes, if necessary).

<! -- HTML -->
<p class=": ` ("></p>
Copy the code

/* CSS */. \ 3A\ ` \ [{}Copy the code

/* JavaScript */
document.getElementsByClassName(': ` (');
document.querySelectorAll('.\\3A \\`\\(');
Copy the code

CSS escape tool

Remembering all these rules sure sounds like fun, but to make life a little easier I created a simple CSS escaper tool that does all the hard work for you.

These rules are fun, but to make things easier, I’ve created a simple CSS escaper tool that does all the hard work for you.

Simply enter a value and it will tell you how to escape in CSS and JavaScript based on the rules described above. Even though you’re using the ID attribute, you’re actually using the escaped string you get for the class attribute value and the Content attribute as well. Please enjoy!

No need to escape strings or identifiers in CSS? I’ve packaged the code that powers this tool into an open source JavaScript library called CSSESC, check it out!

Update: The CSS object model specification now defines a css.escape () ‘method that can be used to perform an escape. I made a shim library of it.