Revision 70288 of <string>

  • Revision slug: CSS/string
  • Revision title: string
  • Revision id: 70288
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

{{ CSSRef() }}

Strings in CSS can either be defined by 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 (\).

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.

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>Strings in CSS can either be defined by 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 (\).</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>
<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