Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 70289 of <string>

  • Revision slug: CSS/string
  • Revision title: string
  • Revision id: 70289
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 55 words added, 6 words removed

Revision Content

{{ CSSRef() }}

The <string> CSS value type represent a string. It is formed by a Unicode characters delimited by either double (") or single (') quotes. A double quoted string cannot contain double quotes unless escaped using a backslash (\). The same practice applies for single quoted strings, they cannot contain single quotes unless escaped using a backslash (\). The backslash character must be escaped to be part of the string.

New lines are not accepted unless escaped by using a line feed character such as \A or \00000a. However, strings can span over several lines. In that case, the new line must be escaped using a \ as the last character of the line.

Characters can be described using their Unicode code point in hexadecimal, when escaped using \. \27 represent the single quote (').

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"
Note: Double quoted strings can also be escaped using \22 and single quoted strings can be escaped using \27

Specifications

Specification Status Comment
CSS Values and Units Level 3 {{ Spec2('CSS3 Values') }} No significant change from CSS Level 2 (Revision 1)
CSS Level 2 (Revision 1) {{ Spec2('CSS2.1') }} Explicitly defined
CSS Level 1 {{ Spec2('CSS1') }} Implicitly defined

Browser Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
basic 1.0 1.0 (1.0) <=5.0 yes 1.0 (85)
\xx 1.0 1.0 (1.0) 6.0 yes 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support yes yes yes yes yes
\xx yes yes yes yes yes

Revision Source

<p>{{ CSSRef() }}</p>
<p>The <code>&lt;string&gt;</code> CSS value type represent a string. It is formed by a <a class=" external" href="http://en.wikipedia.org/wiki/Unicode" title="http://en.wikipedia.org/wiki/Unicode">Unicode</a> characters delimited by either double (") or single (') quotes. A double quoted string cannot contain double quotes unless escaped using a backslash (\). The same practice applies for single quoted strings, they cannot contain single quotes unless escaped using a backslash (\). The backslash character must be escaped to be part of the string.</p>
<p>New lines are not accepted unless escaped by using a line feed character such as \A or \00000a. However, strings can span over several lines. In that case, the new line must be escaped using a \ as the last character of the line.</p>
<p>Characters can be described using their <a class=" external" href="http://en.wikipedia.org/wiki/Unicode#Code_point_planes_and_blocks" title="http://en.wikipedia.org/wiki/Unicode#Code_point_planes_and_blocks">Unicode code point</a> in hexadecimal, when escaped using \. \27 represent the single quote (').</p>
<h2>Examples</h2>
<pre>/* 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"
</pre>
<div class="note"><strong>Note:</strong> Double quoted strings can also be escaped using \22 and single quoted strings can be escaped using \27</div>
<h2>Specifications</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width: 1053px; border-style: solid; border-width: 1px; height: 75px; border-color: rgb(0,0,0);"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-values/#strings" title="http://www.w3.org/TR/css3-values/#strings">CSS Values and Units Level 3</a></td> <td>{{ Spec2('CSS3 Values') }}</td> <td>No significant change from CSS Level 2 (Revision 1)</td> </tr> <tr style="vertical-align: top;"> <td style="vertical-align: top;"><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#strings" title="http://www.w3.org/TR/CSS21/syndata.html#strings">CSS Level 2 (Revision 1)</a></td> <td style="vertical-align: top;">{{ Spec2('CSS2.1') }}</td> <td style="vertical-align: top;">Explicitly defined</td> </tr> <tr> <td style="vertical-align: top;"><a class="external" href="http://www.w3.org/TR/CSS1/" title="http://www.w3.org/TR/CSS1/">CSS Level 1</a></td> <td style="vertical-align: top;">{{ Spec2('CSS1') }}</td> <td style="vertical-align: top;">Implicitly defined</td> </tr> </tbody>
</table>
<h2 name="Browser_Compatibility">Browser Compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>basic</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>&lt;=5.0</td> <td>yes</td> <td>1.0 (85)</td> </tr> <tr> <td>\xx</td> <td>1.0</td> <td>1.0 (1.0)</td> <td>6.0 <a class="external" href="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#values" title="http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#values"></a></td> <td>yes</td> <td>1.0 (85)</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> <tr> <td>\xx</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> <td>yes</td> </tr> </tbody> </table>
</div>
Revert to this revision