Revision 531869 of CSS Property Page Template

<div class="note">
 This is a template page for CSS property. Please use this as a raw template when you create a new CSS property page.<br />
 <em>Comment in italics are information about how to use part of the template</em></div>
<div>
 {{CSSRef()}}</div>
<div>
 <em>Add the non-standard header if the property is not on the standard track. In the summary section, in a note, describe how to achieve its effect using standard Open Web technologies.</em></div>
<div>
 {{non-standard_header()}}</div>
<div>
 &nbsp;</div>
<div>
 <em>Add the experimental header if the property is describes in a standard that has not reached Candidate Recommendation status, or is marked as 'at risk'.</em></div>
<div>
 {{SeeCompatTable()}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p><em>Description of the property. It must start by "The <code>xyz</code> CSS property" followed by a one-sentence description. The first paragraph of this introduction will be used by default as the description of the page.</em></p>
<p>{{note("Place holder for any special messages")}} <em>But don't add several notes. It should be really important, or be part of the description!</em></p>
<ul class="cssprop">
 <li><dfn>{{Xref_cssinitial()}}</dfn> {{Cssxref("none")}} / {{Cssxref("auto")}} / {{Cssxref("normal")}}</li>
 <li><dfn>Applies to</dfn> all elements</li>
 <li><dfn>{{Xref_cssinherited()}}</dfn> yes / no</li>
 <li><dfn>Percentages</dfn> relative to the xyz value. <em>Remove this line if percentages are not allowed.</em></li>
 <li><dfn>Media</dfn> {{Xref_cssvisual()}}</li>
 <li><dfn>{{Xref_csscomputed()}}</dfn> all of the Earth</li>
 <li><dfn>{{ Xref_cssanimatable() }}</dfn> yes / no</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<p><em>For shorthand properties:</em></p>
<p><em>The formal syntax must be taken from the spec (eventually adapted to support later extension to the formal syntax grammar). It is an important tool to get precise syntax information for advanced users.</em></p>
<pre class="syntaxbox">
<code>Formal syntax:  value1 | value2 | {{Cssxref("", "otherproperty")}} | {{Xref_csslength()}} | {{Cssxref("inherit")}}</code></pre>
<p><em>For longhand properties:</em></p>
<pre class="twopartsyntaxbox">
<code>Formal syntax:  value1 | value2 | {{Cssxref("", "otherproperty")}} | {{Xref_csslength()}} | {{Cssxref("inherit")}}</code></pre>
<pre>
property: value1
property: value2
property: 12.8em   /* A valid length */

property: inherit <em>&lt;---- To remember this is a possible</em> value
</pre>
<p><em>The second part of the is a simple translation of the what the formal syntax tells. It is aimed at medium-level users that will not understand well the formal syntax. </em></p>
<h3 id="Values" name="Values">Values</h3>
<p><em>Each element of the formal syntax must be explained</em></p>
<dl>
 <dt>
  <code>value_1</code></dt>
 <dd>
  Is a keyword meaning...</dd>
 <dt>
  <code>value_2</code> {{ Non-standard_inline() }} {{experimental_inline()}}</dt>
 <dd>
  Is a keyword meaning</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<p>{{CSSLiveSample('background.html')}} <em>Add this only if there is such an exampe. No dead link here</em></p>
<pre class="brush:css">
elementName {
  property: value;
  thisis: "example";
  dream: 10000000mm;
  love: "danger";
}</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<p><em>Exclusively use this standard table. Place older spec on the bottom. Use the templates SpecName() for the name and Spec2() for the status. That way, when the spec progress on the standard track, or move, the table content will be automatically adapted.</em></p>
<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 Animations', '#fake-link', 'fake-value') }}</td>
   <td>{{ Spec2('CSS3 Animations') }}</td>
   <td>No change from CSS 2.1.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', '#fake-link', 'fake value') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p><em>(See <a href="/Project:en/Compatibility_tables" title="Project:en/Compatibility_tables">Compatibility tables</a> for more information)</em></p>
<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>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</td>
    <td>100</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</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 Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</td>
    <td>100</td>
    <td>{{CompatUnknown()}}</td>
    <td>{{CompatUnknown()}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li><em>Links of link of related properties: {{Cssxref("example-property")}}</em></li>
 <li><em>Links to article showing how to use the property in context: "Using … article"</em></li>
 <li><em>Very good external links. Don't be afraid of external links, but they should be outstanding, not only bring one single details.</em></li>
</ul>