mozilla

Revision 305925 of Value definition syntax

  • Revision slug: CSS/Value_definition_syntax
  • Revision title: Value definition syntax
  • Revision id: 305925
  • 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

Double ampersand

Double bar

Single bar

Brackets

Component value multiplier

Asterisk (*)

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>
<h3 id="Double_ampersand">Double ampersand</h3>
<h3 id="Double_bar">Double bar</h3>
<h3 id="Single_bar">Single bar</h3>
<h3 id="Brackets">Brackets</h3>
<h2 id="Component_value_multiplier">Component value multiplier</h2>
<h3 id="Asterisk_(*)">Asterisk (<code>*</code>)</h3>
<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