The <string>
CSS data type represents a sequence of characters. Strings are used in numerous CSS properties, including content
, font-family
, and quotes
.
Syntax
A string is composed of one or more Unicode characters surrounded by either double ("
) or single ('
) quotes.
Most characters can be represented literally. When escaped with a backslash, they can also be represented with their respective Unicode code points in hexadecimal. For example, \27
represents the single quote ('
), and \A9
represents the copyright symbol (©).
Importantly, certain characters which would otherwise be invalid can be escaped with a backslash (\
). These include double quotes when used inside a double-quoted string, single quotes when used inside a single-quoted string, and the backslash itself.
New lines are invalid unless escaped with a line feed character such as \A
or \00000A
. In your code, however, strings can span multiple lines, in which case each new line must be escaped with a "\
" as the last character of the line.
Examples
/* Simple quote escaping */ "Awesome string with double quotes" "Awesome string with \" escaped double quotes" 'Awesome string with single quotes' "Awesome string with \' escaped single quotes" /* New line in a string */ "Awesome string with \Aline break" /* String spanning over two lines (these two strings are exactly the same) */ "A really long \ awesome string" "A really long awesome string"
\22
and single-quoted strings can be escaped using \27
.Specifications
Specification | Status | Comment |
---|---|---|
CSS Values and Units Module Level 3 The definition of '<string>' in that specification. |
Candidate Recommendation | No significant change from CSS Level 2 (Revision 1). |
CSS Level 2 (Revision 1) The definition of '<string>' in that specification. |
Recommendation | Explicit definition; allows 6-digit Unicode escaped characters. |
CSS Level 1 The definition of '<string>' in that specification. |
Recommendation | Implicit definition; allows 4-digit Unicode escaped characters. |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.0) | (Yes) | (Yes) | 1.0 (85) |
\xx | 1.0 | 1.0 (1.0) | 6.0 | (Yes) | 1.0 (85) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
\xx | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |