<string>

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

Revision Content

The <string> CSS data type represents 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 represents 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

See also

Revision Source

<p>The <code>&lt;string&gt;</code> <a href="/en/CSS" title="CSS">CSS</a> data type represents 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 represents 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>
<h2>See also</h2>
<ul> <li><a href="/en/CSS_Reference" title="CSS Reference">CSS Reference</a> index</li> <li>CSS Data Types : {{ CSSDataTypes() }}</li>
</ul>
Revert to this revision