[POST] Understanding The CSS Property Value Syntax

Open Rplus opened this issue 9 years ago • 0 comments

Understanding The CSS Property Value Syntax By Russ Weakley 2016-05-20 https://www.smashingmagazine.com/2016/05/understanding-the-css-property-value-syntax/

Component Values

keyword values

<line-width> = <length> | thin | medium | thick

basic data types
```
<'background-color'> = <color>
```
property data types
```
<'border-width'> = <line-width>{1,4}
```

non-property data types

<line-width> = <length> | thin | medium | thick
<'border-width'> = <line-width>{1,4}

Component Value Combinators

adjacent values
```
<'property'> = value1 value2 value3
```
double ampersand: all of
```
<'property'> = value1 && value2
```

single pipe: one of

<'property'> = value1 | value2 | value3

double pipe: one or more of

<'property'> = value1 || value2 || value3

brackets: group

<'property'> = [ value1 | value2 ] value3

Component Value Multipliers

the ? symbol: {0,1}
```
<'property'> = value1 [, value2 ]?
```
the * symbol: {0,}
```
<'property'> = value1 [, <value2> ]*
```
the + symbol: {1,}
```
<'property'> = <value>+
```
the {a} symbol: {a}
```
<'property'> = <value>{2}
```
the {a,b} symbol: {a,b}
```
<'property'> = <value>{1,3}
```
the {a,} symbol: {a,}
```
<'property'> = <value>{1,}
```
the # symbol: repeat with .join(',')
```
<'property'> = <value>#
```

the ! symbol: required

<'property'> = value1 [ value2 | value3 ]!

Example:

<'text-shadow'> = none | [ <length>{2,3} && <color>? ]#

May 21 '16 07:05 Rplus