DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS...
Transcript of DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS...
![Page 1: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/1.jpg)
DECIPHERINGTHECSSPROPERTYSYNTAX
By /ChenHuiJing @hj_chen
![Page 2: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/2.jpg)
HAVEYOUEVERSEENACSSSPECIFICATION?
Meet .CSSGridLayoutModuleLevel1
![Page 3: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/3.jpg)
BACKUSNAURFORM(BNF)IntroducedbyJohnBackusandPeterNaur
Acontext-freenotationmethodtodescribethesyntaxofalanguage.
TheCSSpropertyvaluesyntaxislooselybasedonBNFnotation.
Thestuffontheleftcanbereplacedbythestuffontheright.
<symbol> ::= __expression__
![Page 4: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/4.jpg)
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
![Page 5: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/5.jpg)
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>
![Page 6: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/6.jpg)
COMPONENTVALUECOMBINATORS
![Page 7: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/7.jpg)
SPACE-SEPARATEDLISTOFVALUESAllvaluesmustoccurinspecifiedorder
<'property-name'> = value1 value2 value3
↓.selector { property: value1 value2 value3; }
![Page 8: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/8.jpg)
&&Allvaluesmustoccur,orderdoesn'tmatter
<'property-name'> = value1 && value2
↓.selector { property: value1 value2; }.selector { property: value2 value1; }
![Page 9: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/9.jpg)
|Only1valuemustoccur
<'property-name'> = value1 | value2 | value3
↓.selector { property: value1; }.selector { property: value2; }.selector { property: value3; }
![Page 10: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/10.jpg)
||1ormorevaluesmustoccur,orderdoesn'tmatter
<'property-name'> = value1 || value2 || value3
↓.selector { property: value3; }.selector { property: value2 value3; }.selector { property: value1 value2 value3; } and so on...
![Page 11: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/11.jpg)
[]Componentsbelongtoasinglegrouping
<'property-name'> = [ value1 | value2 ] value3
↓.selector { property: value1 value3; }.selector { property: value2 value3; }
![Page 12: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/12.jpg)
COMPONENTVALUEMULTIPLIERS
![Page 13: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/13.jpg)
?Optionalvalue,canoccur0or1time
<'property-name'> = value1 [, value2 ]?
↓.selector { property: value1; }.selector { property: value1, value2; }
![Page 14: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/14.jpg)
*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...
![Page 15: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/15.jpg)
+Canoccur1ormanytimes,multiplevaluesarespace-
separated
<'property-name'> = <value>+
↓.selector { property: <value>; }.selector { property: <value> <value>; }.selector { property: <value> <value> <value> <value>; } and so on...
![Page 16: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/16.jpg)
{ }Valueoccurs times,multiplevaluesarespace-separated
<'property-name'> = <value>{2}
↓.selector { property: <value> <value>; }
![Page 17: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/17.jpg)
{ , }Valueoccursatleast times,atmost times,multiplevalues
arespace-separated
<'property-name'> = <value>{1,3}
↓.selector { property: <value>; }.selector { property: <value> <value>; }.selector { property: <value> <value> <value>; }
![Page 18: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/18.jpg)
{ ,}Valueoccursatleast times,nomaximumlimit,multiple
valuesarespace-separated
<'property-name'> = <value>{1,}
↓.selector { property: <value>; }.selector { property: <value> <value> <value>; } and so on...
![Page 19: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/19.jpg)
#Valueoccurs1ormanytimes,multiplevaluesarecomma-
separated
<'property-name'> = <value>#
↓.selector { property: <value>; }.selector { property: <value>, <value>; }.selector { property: <value>, <value>, <value>, <value>; } and so on...
![Page 20: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/20.jpg)
[]!Valuesingroupingarerequired,atleast1valuemustoccur
<'property-name'> = <value1> [ <value2> | <value3> ]!
↓.selector { property: <value1> <value2>; }.selector { property: <value1> <value3>; }
![Page 21: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/21.jpg)
CONVOLUSIONMAX
![Page 22: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/22.jpg)
BOX-SHADOWnone | <shadow>#
where
<shadow> = inset? && <length>{2,4} && <color>?
all3valuesmustoccur,inanyorder
insetisoptional
atleast2lengthvalues,atmost4
colorvalueisoptional
entiresetcanoccurmultipletimes,comma-separated
![Page 23: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/23.jpg)
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'>
![Page 24: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/24.jpg)
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>* ']'
![Page 26: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/26.jpg)
FURTHERREADING
by
by
by
by
CSSValueDefinitionSyntax
UnderstandingtheCSSSpecifications ElikaEtemad
HowtoReadW3CSpecs J.DavidEisenberg
CSSreference MDN
UnderstandingTheCSSPropertyValueSyntax RussWeakley
![Page 27: DECIPHERING THE CSS PROPERTY SYNTAXCSS SPECIFICATION? Meet . CSS Grid Layout Module Level 1 BACKUS NAUR FORM (BNF) Introduced by John Backus and Peter Naur A context-free notation](https://reader033.fdocuments.us/reader033/viewer/2022051604/600262e6f85d6c2c2f0cf0d4/html5/thumbnails/27.jpg)
THEENDhttp://www.chenhuijing.com
@hj_chen
@hj_chen
@huijing