Value definition syntax

  • Revision slug: CSS/Value_definition_syntax
  • Revision title: Value definition syntax
  • Revision id: 311387
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ Draft() }}

To define the set of valid values that a CSS property or function can take, a formal grammar is used, the CSS value definition syntax. Besides the syntaxic aspect, the set of valid values can be further restricted by semantic constraints (like, for a number, to be strictly positive).

The definition syntax describes which components are allowed and how they interact between them. A component can be a keyword, some characters considered as a litteral, or a value of a given CSS data type or of another CSS property..

Component value types

Keywords

Generic keywords

A keyword with a predefined meaning, such as auto, smaller or ease-in, appears litterally, without quote: e.g. auto, smaller or ease-in.

The specific case of inherit and initial

All CSS properties accept the keyword inherit and initial which are defined CSS-wide. They are not shown in the value definition, and are implicitly defined.

Litterals

In CSS a few character can appear on their own, like the slash ('/') or the comma (','), can be used in properties to separate part of it. The comma is often used to separate several values in enumeration, or parameters in mathematical-like functions, the slash often separate different part of the value, allowing to define unambiguously. They appear on their own in a value definition.

Data types

Basic data types

Some kind of data are used throughout CSS and are defined once for all. They are represented with their name surrounded by the symbol '<' and '>': {{ xref_cssangle() }}, {{ xref_cssstring() }}…

Non-terminal data types

Component value combinators

Juxtaposition

Putting several keywords, litterals, data types one of the other, separated by one or several spaces is called juxtaposition. Each juxtaposed entities are mandatory and should appear in that order.

bold <length> , thin

This example matches the following values:

  • bold 1em, thin
  • bold 0, thin
  • bold 2.5cm, thin
  • bold 3vh, thin

But not:

  • thin 1em, bold as the entities must be in the expressed order
  • bold 1em thin as the entities are mandatory; the comma, a litteral, must be present
  • bold 0.5ms, thin as the ms values are not {{xref_csslength()}}

Double ampersand

Separating two or more entities by a double ampersand, &&, means that all entities are mandatory but may appear in any order.

bold && <length>

This example matches the following values:

  • bold 1em
  • bold 0
  • 2.5cm bold
  • 3vh bold

But not:

  • bold as both entities must appear in the value
  • bold 1em bold as both entities must appear only one time
Note: juxtaposition has precedence over the double ampersand, meaning that bold thin && <length> describes bold thin <length> or <length> bold thin but not bold <length> thin.

Double bar

Separating two or more entities by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. This is typically used to define the different values of a shorthand property.

<'border-width'> || <'border-style'> || <'border-color'>

This example matches the following values:

  • 1em solid blue
  • blue 1em
  • solid 1px yellow

But not:

  • blue yellow as an entity must appear at most one single time
  • bold as it isn't a keyword allowed as value of any of the entity
Note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> describes bold, thin, <length>, bold thin, <length> bold, or thin <length> bold but not bold <length> bold thin as bold, if not omitted, must be positioned before or after the whole thin && <length> entity.

Single bar

Separating two or more entities by a single bar, |, means that all entities are options: exactly one of these options must be present. This is typically used to separate a list of possible keywords.

<percentage> | <length> | left | center | right | top | bottom

This example matches the following values:

  • 3%
  • 0
  • 3.5em
  • left
  • center
  • right
  • top
  • bottom

But not:

  • center 3% as only one of the entity must be present.
  • 3em 4.5em as an entity must be present at most one time.

Brackets

Brackets enclose several entities, composers and multiplier and transform them as a single entity. They are used to group elements to bypass the precedence rules.

bold [ thin && <length> ]

This example matches the following values:

  • bold thin 2vh
  • bold 0 thin
  • bold thin 3.5em

But not:

  • thin bold 3em as bold is juxtaposed with the entity defined by the brackets, it must appear before it.

Component value multiplier

A multiplier is a sign that indicate how many time a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.

Asterisk (*)

The asterisk multiplier indicates that the entity may appear zero, one or several times

bold smaller*

This example matches the following values:

  • bold
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller and so on.

But not:

  • smaller as bold is juxtaposed and must appear before the eventual smaller keyword

Plus (+)

Question mark (?)

Curly braces ({ })

Hash mark (#)

Revision Source

<p>{{ Draft() }}</p>
<p>To define the set of valid values that a CSS property or function can take, a formal grammar is used, the <em>CSS value definition syntax</em>. Besides the syntaxic aspect, the set of valid values can be further restricted by semantic constraints (like, for a number, to be strictly positive).</p>
<p>The definition syntax describes which <em>components</em> are allowed and how they interact between them. A component can be a <em>keyword</em>, some characters considered as a <em>litteral</em>, or a value of a given CSS data type or of another CSS property..</p>
<h2 id="Component_value_types">Component value types</h2>
<h3 id="Keywords">Keywords</h3>
<h4 id="Generic_keywords">Generic keywords</h4>
<p>A keyword with a predefined meaning, such as <code>auto</code>, <code>smaller</code> or <code>ease-in</code>, appears litterally, without quote: e.g. <code>auto</code>, <code>smaller</code> or <code>ease-in</code>.</p>
<h4 id="The_specific_case_of_inherit_and_initial">The specific case of <code>inherit</code> and <code>initial</code></h4>
<p>All CSS properties accept the keyword <code>inherit</code> and <code>initial</code> which are defined CSS-wide. They are not shown in the value definition, and are implicitly defined.</p>
<h3 id="Litterals">Litterals</h3>
<p>In CSS a few character can appear on their own, like the slash ('<code>/</code>') or the comma ('<code>,</code>'), can be used in properties to separate part of it. The comma is often used to separate several values in enumeration, or parameters in mathematical-like functions, the slash often separate different part of the value, allowing to define unambiguously. They appear on their own in a value definition.</p>
<h3 id="Data_types">Data types</h3>
<h4 id="Basic_data_types">Basic data types</h4>
<p>Some kind of data are used throughout CSS and are defined once for all. They are represented with their name surrounded by the symbol '<code>&lt;</code>' and '<code>&gt;</code>': {{ xref_cssangle() }}, {{ xref_cssstring() }}…</p>
<h4 id="Non-terminal_data_types">Non-terminal data types</h4>
<h2 id="Component_value_combinators">Component value combinators</h2>
<h3 id="Juxtaposition">Juxtaposition</h3>
<p>Putting several keywords, litterals, data types one of the other, separated by one or several spaces is called <em>juxtaposition</em>. Each juxtaposed entities are <u>mandatory and should appear in that order.</u></p>
<pre class="syntaxbox">
bold &lt;length&gt; , thin
</pre>
<p>This example matches the following values:</p>
<ul>
  <li><code>bold 1em, thin</code></li>
  <li><code>bold 0, thin</code></li>
  <li><code>bold 2.5cm, thin</code></li>
  <li><code>bold 3vh, thin</code></li>
</ul>
<p>But not:</p>
<ul>
  <li><code>thin 1em, bold</code> as the entities must be in the expressed order</li>
  <li><code>bold 1em thin</code> as the entities are mandatory; the comma, a litteral, must be present</li>
  <li><code>bold 0.5ms, thin</code> as the <code>ms</code> values are not {{xref_csslength()}}</li>
</ul>
<h3 id="Double_ampersand">Double ampersand</h3>
<p>Separating two or more entities by a <em>double ampersand</em>, <code>&amp;&amp;</code>, means that all entities are <u>mandatory but may appear in any order.</u></p>
<pre class="syntaxbox">
bold &amp;&amp; &lt;length&gt;
</pre>
<p>This example matches the following values:</p>
<ul>
  <li><code>bold 1em</code></li>
  <li><code>bold 0</code></li>
  <li><code>2.5cm bold</code></li>
  <li><code>3vh bold</code></li>
</ul>
<p>But not:</p>
<ul>
  <li><code>bold</code> as both entities must appear in the value</li>
  <li><code>bold 1em bold</code> as both entities must appear only one time</li>
</ul>
<div class="note">
  <strong>Note:</strong> juxtaposition has precedence over the double ampersand, meaning that <code>bold thin &amp;&amp; &lt;length&gt;</code> describes <code>bold thin &lt;length&gt;</code> or <code>&lt;length&gt;</code><code> bold thin</code> but not <code>bold &lt;length&gt;</code><code> thin</code>.</div>
<h3 id="Double_bar">Double bar</h3>
<p>Separating two or more entities by a <em>double bar</em>, <code>||</code>, means that all entities are options: <u>at least one of them must be present, and they may appear in any order.</u> This is typically used to define the different values of a <a href="/en-US/docs/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">shorthand property</a>.</p>
<pre class="syntaxbox">
&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
</pre>
<p>This example matches the following values:</p>
<ul>
  <li><code>1em solid blue</code></li>
  <li><code>blue 1em</code></li>
  <li><code>solid 1px yellow</code></li>
</ul>
<p>But not:</p>
<ul>
  <li><code>blue</code> <code>yellow</code> as an entity must appear at most one single time</li>
  <li><code>bold</code> as it isn't a keyword allowed as value of any of the entity</li>
</ul>
<div class="note">
  <strong>Note:</strong> the double ampersand has precedence over the double bar, meaning that <code>bold || thin &amp;&amp; &lt;length&gt;</code> describes <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>bold thin</code>, <code>&lt;length&gt; bold</code>, or <code>thin &lt;length&gt; bold</code>  but not <code>bold &lt;length&gt;</code><code> bold thin</code> as bold, if not omitted, must be positioned before or after the whole <code>thin &amp;&amp; &lt;length&gt;</code> entity.</div>
<h3 id="Single_bar">Single bar</h3>
<p>Separating two or more entities by a <em>single bar</em>, <code>|</code>, means that all entities are options: <u>exactly one of these options must be present.</u> This is typically used to separate a list of possible keywords.</p>
<pre class="syntaxbox">
&lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom</pre>
<p>This example matches the following values:</p>
<ul>
  <li><code>3%</code></li>
  <li><code>0</code></li>
  <li><code>3.5em</code></li>
  <li><code>left</code></li>
  <li><code>center</code></li>
  <li><code>right</code></li>
  <li><code>top</code></li>
  <li><code>bottom</code></li>
</ul>
<p>But not:</p>
<ul>
  <li><code>center 3%</code> as only one of the entity must be present.</li>
  <li><code>3em 4.5em</code> as an entity must be present at most one time.</li>
</ul>
<h3 id="Brackets">Brackets</h3>
<p><em>Brackets</em> enclose several entities, composers and multiplier and transform them as a single entity. They are used to group elements to bypass the precedence rules.</p>
<pre class="syntaxbox">
<code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></pre>
<p>This example matches the following values:</p>
<ul>
  <li><code>bold thin 2vh</code></li>
  <li><code>bold 0 thin</code></li>
  <li><code>bold thin 3.5em</code></li>
</ul>
<p>But not:</p>
<ul>
  <li><code>thin bold 3em</code> as <code>bold</code> is juxtaposed with the entity defined by the brackets, it must appear before it.</li>
</ul>
<h2 id="Component_value_multiplier">Component value multiplier</h2>
<p>A multiplier is a sign that indicate how many time a preceding entity can be repeated. Without a multiplier, an entity must appear exactly one time.</p>
<h3 id="Asterisk_(*)">Asterisk (<code>*</code>)</h3>
<p>The <em>asterisk multiplier</em> indicates that the entity may appear zero, one or several times</p>
<pre class="syntaxbox">
<code>bold smaller*</code></pre>
<p>This example matches the following values:</p>
<ul>
  <li><code>bold</code></li>
  <li><code>bold smaller</code></li>
  <li><code>bold smaller smaller</code></li>
  <li><code>bold smaller smaller smaller</code> and so on.</li>
</ul>
<p>But not:</p>
<ul>
  <li><code>smaller</code> as <code>bold</code> is juxtaposed and must appear before the eventual <code>smaller</code> keyword</li>
</ul>
<h3 id="Plus_(.2B)">Plus (<code>+</code>)</h3>
<h3 id="Question_mark_(.3F)">Question mark (<code>?</code>)</h3>
<h3 id="Curly_braces_(.7B_.7D)">Curly braces (<code>{ }</code>)</h3>
<h3 id="Hash_mark_(.23)">Hash mark (<code>#</code>)</h3>
Revert to this revision