DECIPHERINGTHECSSPROPERTYSYNTAX

By /ChenHuiJing @hj_chen

HAVEYOUEVERSEENACSSSPECIFICATION?

Meet .CSSGridLayoutModuleLevel1

BACKUSNAURFORM(BNF)IntroducedbyJohnBackusandPeterNaur

Acontext-freenotationmethodtodescribethesyntaxofalanguage.

TheCSSpropertyvaluesyntaxislooselybasedonBNFnotation.

Thestuffontheleftcanbereplacedbythestuffontheright.

<symbol> ::= __expression__

ABNFSANDWICHAsandwichconsistsofalowersliceofbread,mustardormayonnaise;optionallettuce,anoptionalsliceoftomato;twotofourslicesofeitherbologna,salami,orham(inanycombination);oneormoreslicesofcheese,andatopsliceof

bread.

sandwich ::= lower_slice [ mustard | mayonnaise ] lettuce? tomato? [ bologna |salami | ham ]{2,4} cheese+ top_slice

Analogyfrom .HowtoReadW3CSpecs

COMPONENTVALUETYPESValuetype Description Example

Keywordvalues

Actualvalueused;Noquotationmarksoranglebrackets

auto or none

Basicdatatypes

Tobereplacedwithactualvalues;Anglebrackets

<length> or<percentage>

Propertydatatype

Usessamesetofvaluesasdefinedproperty,usuallyusedforshorthandpropertydefinitions;Quotationmarkswithinanglebrackets

<'grid-template-rows'>

or <'flex-basis'>

Non-propertydatatype

Setofvaluesisdefinedsomewhereelseinthespecification,usuallynearitsfirstappearance;Anglebracketsonly

<line-names> or<track-repeat>

COMPONENTVALUECOMBINATORS

SPACE-SEPARATEDLISTOFVALUESAllvaluesmustoccurinspecifiedorder

<'property-name'> = value1 value2 value3

↓.selector { property: value1 value2 value3; }

&&Allvaluesmustoccur,orderdoesn'tmatter

<'property-name'> = value1 && value2

↓.selector { property: value1 value2; }.selector { property: value2 value1; }

|Only1valuemustoccur

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

↓.selector { property: value1; }.selector { property: value2; }.selector { property: value3; }

||1ormorevaluesmustoccur,orderdoesn'tmatter

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

↓.selector { property: value3; }.selector { property: value2 value3; }.selector { property: value1 value2 value3; } and so on...

[]Componentsbelongtoasinglegrouping

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

↓.selector { property: value1 value3; }.selector { property: value2 value3; }

COMPONENTVALUEMULTIPLIERS

?Optionalvalue,canoccur0or1time

<'property-name'> = value1 [, value2 ]?

↓.selector { property: value1; }.selector { property: value1, value2; }

*Optionalvalue,canoccur0ormanytimes,multiplevalues

arecomma-separated

<'property-name'> = value1 [, <value2>]*

↓.selector { property: value1; }.selector { property: value1, <value2>; }.selector { property: value1, <value2>, <value2>, <value2>; } and so on...

+Canoccur1ormanytimes,multiplevaluesarespace-

separated

<'property-name'> = <value>+

↓.selector { property: <value>; }.selector { property: <value> <value>; }.selector { property: <value> <value> <value> <value>; } and so on...

{ }Valueoccurs times,multiplevaluesarespace-separated

<'property-name'> = <value>{2}

↓.selector { property: <value> <value>; }

{ , }Valueoccursatleast times,atmost times,multiplevalues

arespace-separated

<'property-name'> = <value>{1,3}

↓.selector { property: <value>; }.selector { property: <value> <value>; }.selector { property: <value> <value> <value>; }

{ ,}Valueoccursatleast times,nomaximumlimit,multiple

valuesarespace-separated

<'property-name'> = <value>{1,}

↓.selector { property: <value>; }.selector { property: <value> <value> <value>; } and so on...

#Valueoccurs1ormanytimes,multiplevaluesarecomma-

separated

<'property-name'> = <value>#

↓.selector { property: <value>; }.selector { property: <value>, <value>; }.selector { property: <value>, <value>, <value>, <value>; } and so on...

[]!Valuesingroupingarerequired,atleast1valuemustoccur

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

↓.selector { property: <value1> <value2>; }.selector { property: <value1> <value3>; }

CONVOLUSIONMAX

BOX-SHADOWnone | <shadow>#

where

<shadow> = inset? && <length>{2,4} && <color>?

all3valuesmustoccur,inanyorder

insetisoptional

atleast2lengthvalues,atmost4

colorvalueisoptional

entiresetcanoccurmultipletimes,comma-separated

BACKGROUND<bg-layer># , <final-bg-layer>

where

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box> || <box>

<final-bg-layer> = <'background-color'> || <bg-image> || <position> [ / <bg-size> ]?|| <repeat-style> || <attachment> || <box> || <box>

atleast1valuemustoccur,therestcanOTOT

for<position>,canoptionallyinclude<bg-size>

entiresetfor<bg-layer>canoccurmultipletimes,comma-separated

only<final-bg-layer>canhave<'background-color'>

GRID-TEMPLATE-COLUMNS/GRID-TEMPLATE-ROWSnone | <track-list> | <auto-track-list>

where

Iistroll

<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length-percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage><line-names> = '[' <custom-ident>* ']'

HERE'SA ,YOUCANPRINTIT.

CHEATSHEET

FURTHERREADING

by

by

by

by

CSSValueDefinitionSyntax

UnderstandingtheCSSSpecifications ElikaEtemad

HowtoReadW3CSpecs J.DavidEisenberg

CSSreference MDN

UnderstandingTheCSSPropertyValueSyntax RussWeakley

THEENDhttp://www.chenhuijing.com

@hj_chen

@hj_chen

@huijing