<string>

  • Revision slug: Web/CSS/string
  • Revision title: <string>
  • Revision id: 496003
  • Created:
  • Creator: teoli
  • Is current revision? Yes
  • Comment

Revision Content

{{ CSSRef() }}

Summary

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
{{ SpecName('CSS3 Values', '#strings', '<string>') }} {{ Spec2('CSS3 Values') }} No significant change from CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#strings', '<string>') }} {{ Spec2('CSS2.1') }} Explicitly defined; allows 6-digit Unicode escaped characters
{{ SpecName('CSS1', '', '<string>') }} {{ Spec2('CSS1') }} Implicitly defined; allows 4-digit Unicode escaped characters

Browser Compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.0) <=5.0 {{compatVersionUnknown()}} 1.0 (85)
\xx 1.0 1.0 (1.0) 6.0 {{compatVersionUnknown()}} 1.0 (85)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{compatVersionUnknown()}} {{compatVersionUnknown()}} {{compatVersionUnknown()}} {{compatVersionUnknown()}} {{compatVersionUnknown()}} {{compatVersionUnknown()}}
\xx {{compatVersionUnknown()}} {{compatVersionUnknown()}} {{compatVersionUnknown()}} {{compatVersionUnknown()}} {{compatVersionUnknown()}} {{compatVersionUnknown()}}

See also

  • CSS Data Types: {{ CSSDataTypes() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<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 id="Examples">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 id="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Values', '#strings', '&lt;string&gt;') }}</td>
   <td>{{ Spec2('CSS3 Values') }}</td>
   <td>No significant change from CSS Level 2 (Revision 1)</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'syndata.html#strings', '&lt;string&gt;') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Explicitly defined; allows 6-digit Unicode escaped characters</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '', '&lt;string&gt;') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Implicitly defined; allows 4-digit Unicode escaped characters</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_Compatibility" 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</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>&lt;=5.0</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td>\xx</td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>6.0</td>
    <td>{{compatVersionUnknown()}}</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>Chrome for Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>{{compatVersionUnknown()}}</td>
   </tr>
   <tr>
    <td>\xx</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>{{compatVersionUnknown()}}</td>
    <td>{{compatVersionUnknown()}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
 <li>CSS Data Types: {{ CSSDataTypes() }}</li>
</ul>
Revert to this revision