SlideShare une entreprise Scribd logo
1  sur  90
Télécharger pour lire hors ligne
syntax.
Understanding the mysteries of the CSS
property value
The W3C uses a specific syntax
for defining CSS property values.
/*  CSS  property  value  syntax  examples  */  
<line-­‐width>  =  <length>  |  thin  |  medium  |  thick  
<bg-­‐size>  =  [  <length>  |  <percentage>  |  auto  ]{1,2}  |  cover  |  
contain  
<'background'>  =  [  <bg-­‐layer>  ,  ]*  <final-­‐bg-­‐layer>  
<'border-­‐image-­‐slice'>  =  [<number>  |  <percentage>]{1,4}  &&  fill?
The aim of this presentation is to
give you a basic understanding
of this syntax to help understand
the various W3C CSS
Specifications.
We’re going to start with a quick
look at Backus-Naur Form, as
this will help to explain the CSS
property value syntax.
Backus-Naur
Form
In computer science, Backus–
Naur Form (BNF) is one of the
main notation techniques used to
describe the syntax of
computing languages.
A Backus-Naur Form specification
is a set of derivation rules,
written as:
//  BNF  Syntax  example  
<symbol>  ::=  __expression__
//  BNF  Syntax  example  
<symbol>  ::=  __expression__
Non-terminal Symbol
//  BNF  Syntax  example  
<symbol>  ::=  __expression__
“May be replaced with”
//  BNF  Syntax  example  
<symbol>  ::=  __expression__
Expression
The __expression__ consists of
one or more sequences of
symbols that are used to derive
the meaning of the symbol on
the left.
Backus-Naur specifications are
basically saying: “Whatever is on
the left may be replaced with
whatever is on the right”.
Non-terminal symbols appear
between angle brackets “<  >”.
Non-terminal symbols can be
broken down or replaced further.
/*  Non-­‐terminal  symbols  -­‐  recursive  example  */  
<integer>  ::=  <digit>  |  <digit><integer>  
<digit>  ::=  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9
Non-terminal symbols
A terminal symbol indicates that
the value cannot be broken down
or replaced further.
/*  Non-­‐terminal  symbols  -­‐  recursive  example  */  
<integer>  ::=  <digit>  |  <digit><integer>  
<digit>  ::=  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9
Terminal Symbols
There are variants of the BNF
used today, such as
Extended Backus–Naur Form
(EBNF)
Augmented Backus–Naur Form
(ABNF).
The CSS
Property Value
Syntax
While the W3C CSS property value
syntax has some similarities to
BNF and EBNF, it also has some
differences.
Like BNF and EBNF, it begins with
a non-terminal symbol.
/*  Non-­‐terminal  symbol  */  
<line-­‐width>  =  <length>  |  thin  |  medium  |  thick
Non-terminal symbol
Like EBNF, it uses an equals “=”
after the initial non-terminal
symbol. This also means “may be
replaced with”.
/*  The  equals  sign  */  
<line-­‐width>  =  <length>  |  thin  |  medium  |  thick
The “=” symbol
However, unlike BNF and EBNF,
the CSS property value syntax
describes symbols as
“component values”.
/*  Component  values  */  
<line-­‐width>  =  <length>  |  thin  |  medium  |  thick
Component values
There are four different types of
component values.
1. Keyword values
These values appear without
quotes or angle brackets. They are
used “as is” as property values. As
they cannot be replaced or broken
down further, they are terminal.
/*  Keyword  value  example  */  
<line-­‐width>  =  <length>  |  thin  |  medium  |  thick
Keyword Value
2. Basic data types
These basic data types define
core values such as <length> and
<color>. They are non-terminal as
they can be replaced with actual
length or color values.
/*  Basic  data  type  example  */  
<'background-­‐color'>  =  <color>
Basic Data Type
For example, the “<color>”
symbol indicates that this value
can be replaced with a value
such as:
/*  Basic  data  type  example  */  
.example  {  background-­‐color:  honeydew;  }  
.example  {  background-­‐color:  rgb(50%,50%,50%);  }  
.example  {  background-­‐color:  rgba(100%,100%,100%,.5);  }  
.example  {  background-­‐color:  hsl(280,100%,50%);  }  
.example  {  background-­‐color:  hsla(280,100%,50%,0.5);  }  
.example  {  background-­‐color:  transparent;  }
3. Property data types
These types define the property
name. They are defined using the
property name (complete with
quotes) between the angle
brackets “<  >”. They are non-
terminal.
/*  Property  data  type  example  */  
<'border-­‐width'>  =  <line-­‐width>{1,4}
Property Data Type
4. Non-property data types
These types do not share the
same name as a property.
However, they help define aspects
of specific properties. They are
non-terminal.
For example, <line-­‐width> is not
a property, but it is a data type that
helps to define the various
<border> properties.
/*  Non-­‐property  data  type  example  */  
<line-­‐width>  =  <length>  |  thin  |  medium  |  thick
Not a property
/*  Non-­‐property  data  type  example  */  
<line-­‐width>  =  <length>  |  thin  |  medium  |  thick    
<'border-­‐width'>  =  <line-­‐width>{1,4}
Helps define a property
A recap of the four different
types of component values?
/*  Four  different  types  */  
thin  
<color>  
<‘border-­‐width'>  
<line-­‐width>
Keyword Value
Basic Data Type
Property Data Type
Non-property Data Type
Component
value
combinators
Component values can be
arranged into property value
combinators using the following
methods:
1. Component values written
directly after each other means
that all of them must occur, in
the given order.
/*  Component  arrangement  -­‐  all  in  given  order  */  
<property>  =  value1  value2  value3  
/*  Example  */  
.example  {  property:  value1  value2  value3;  }  
2. A double ampersand “&&”
separating two or more
components means that all of
them must occur, in any order.
/*  Component  arrangement  -­‐  all  in  any  order  */  
<property>  =  value1  &&  value2  
/*  Examples  */  
.example  {  property:  value1  value2;  }  
.example  {  property:  value2  value1;  }
3. A single pipe “|” separates two
or more alternatives means that
only one of them must occur.
This symbol acts as “OR”.
/*  Component  arrangement-­‐  one  of  them  must  occur  */  
<property>  =  value1  |  value2  |  value3  
/*  Examples  */  
.example  {  property:  value1;  }  
.example  {  property:  value2;  }  
.example  {  property:  value3;  }  
4. A double pipe “||” separating
two or more options means that
one or more of them must occur,
in any order.
/*  Component  arrangement-­‐  one  or  more  in  any  order  */  
<property>  =  value1  ||  value2  ||  value3  
/*  Examples  */  
.example  {  property:  value1;  }  
.example  {  property:  value2;  }  
.example  {  property:  value3;  }  
.example  {  property:  value1  value2;  }  
.example  {  property:  value1  value2  value3;  }  
...etc
5. Square brackets “[  ]”
surrounding two or more
alternatives means that the
components inside are a single
grouping.
/*  Component  arrangement-­‐  a  single  grouping  */  
<property>  =  [  value1  |  value2  ]  value3  
/*  Examples  */  
.example  {  property:  value1  value3;  }  
.example  {  property:  value2  value3;  }
A recap of the component value
combinators:
/*  All  in  given  order  */  
<property>  =  value1  value2  value3  
/*  All  in  any  order  */  
<property>  =  value1  &&  value2  
/*  One  of  them  must  occur  */  
<property>  =  value1  |  value2  
/*  One  or  more  in  any  order  */  
<property>  =  value1  ||  value2  
/*  A  single  grouping  */  
<property>  =  [  value1  |  value2  ]  
Component
value multipliers
Component values can also be
multiplied using the following
methods:
1. A question mark “?” indicates
that the preceding type, word, or
group is optional and occurs zero
or one times.
/*  Component  multiplier  -­‐  zero  or  one  time  */  
<property>  =  value1  [,  value2  ]?  
/*  Examples  */  
.example  {  property:  value1;  }  
.example  {  property:  value1,  value2;  }
2. An asterisk “*” indicates that the
preceding type, word, or group
occurs zero or more times.
/*  Component  multiplier  -­‐  zero  or  more  times  */  
<property>  =  value1  [,  <value2>  ]*  
/*  Examples  */  
.example  {  property:  value1;  }  
.example  {  property:  value1,  <value2>;  }  
.example  {  property:  value1,  <value2>,  <value2>;  }  
.example  {  property:  value1,  <value2>,  <value2>,  <value2>;  }  
...etc
3. A plus “+” indicates that the
preceding type, word, or group
occurs one or more times.
/*  Component  multiplier  -­‐  one  or  more  times  */  
<property>  =  <value>+  
/*  Examples  */  
.example  {  property:  <value>;  }  
.example  {  property:  <value>  <value>;  }  
.example  {  property:  <value>  <value>  <value>;  }  
...etc
4. A single number in curly braces
“{A}” indicates that the preceding
type, word, or group occurs “A”
times.
/*  Component  multiplier  -­‐  occurs  A  times  */  
<property>  =  <value>{2}  
/*  Examples  */  
.example  {  property:  <value>  <value>;  }
5. A comma-separated pair of
numbers in curly braces “{A,B}”
indicates that the preceding type,
word, or group occurs at least “A”
and at most “B” times.
/*  Component  multiplier  -­‐  at  least  A  and  at  most  B  */  
<property>  =  <value>{1,3}  
/*  Examples  */  
.example  {  property:  <value>;  }  
.example  {  property:  <value>  <value>;  }  
.example  {  property:  <value>  <value>  <value>;  }
6. The “B” may be omitted “{A,}”
to indicate that there must be at
least “A” repetitions, with no
upper limit on the number of
repetitions.
/*  Component  multiplier  -­‐  at  least  A,  no  upper  limit  */  
<property>  =  <value>{1,}  
/*  Examples  */  
.example  {  property:  <value>;  }  
.example  {  property:  <value>  <value>;  }  
.example  {  property:  <value>  <value>  <value>;  }  
...etc
7. A hash “#” indicates that the
preceding type, word, or group
occurs one or more times,
separated by comma tokens.
(Whitespace is optional)
/*  Component  multiplier  -­‐  one  or  more,  separated  by  commas  */  
<property>  =  <value>#  
/*  Examples  */  
.example  {  property:  <value>;  }  
.example  {  property:  <value>,  <value>;  }  
.example  {  property:  <value>,  <value>,  <value>;  }  
...etc
8. An exclamation point “!” after a
group indicates that the group is
required and must produce at
least one value.
/*  Component  multiplier  -­‐  required  group,  at  lease  one  value  */  
<property>  =  value1  [  value2  |  value3  ]!  
/*  Examples  */  
.example  {  property:  value1  value2;  }  
.example  {  property:  value1  value3;  }
A recap of component value
multipliers:
?  
*  
+  
{A}  
{A,B}  
{A,}  
#  
!
/*  zero  or  one  time  */  
/*  zero  or  more  times  */  
/*  one  or  more  times  */  
/*  occurs  A  times  */  
/*  at  least  A  and  at  most  B  */  
/*  at  least  A,  no  upper  limit  */  
/*  one  or  more,  separated  by  commas  */  
/*  at  lease  one  value  from  the  group  */
An example?
Let’s look at the <'text-­‐shadow'>
property as an example.
/*  text-­‐shadow  */  
<'text-­‐shadow'>  =  none  |  [  <length>{2,3}  &&  <color>?  ]#  
/*  text-­‐shadow  */  
<'text-­‐shadow'>  =  none  |  [  <length>{2,3}  &&  <color>?  ]#  
/*    
|  =  One  of  them  must  occur  
#  =  one  or  more,  separated  by  commas  
&&  =  All  in  any  order  */  
?  =  zero  or  one  time  */  
*/  
.example  {  text-­‐shadow:  none  OR  one  or  more  comma-­‐separated  
groups  of  2-­‐3  length  values  and  optional  color  value  in  any  
order;  }
/*  text-­‐shadow  */  
<'text-­‐shadow'>  =  none  |  [  <length>{2,3}  &&  <color>?  ]#  
/*  Examples  */  
.example  {  text-­‐shadow:  none;  }  
.example  {  text-­‐shadow:  10px  10px;  }  
.example  {  text-­‐shadow:  10px  10px  10px;  }  
.example  {  text-­‐shadow:  10px  10px  10px  red;  }  
.example  {  text-­‐shadow:  red  10px  10px  10px;  }  
.example  {  text-­‐shadow:  10px  10px  red,  20px  20px  lime;  }
A burger
challenge
(Disclaimer: This idea is ripped off
from a great A List Apart article by
J. David Eisenberg.)
http://alistapart.com/article/readspec
How would you define the syntax
of a burger if you had to use a
specific set of ingredients in a
specific order?
Anyone want to volunteer? The
first person to get the correct
answer during the break will win a
copy of “Offscreen” magazine.
http://www.offscreenmag.com/
/*  ingredients  */  
In  the  correct  order  from  bottom  to  the  top  of  the  bun,  the  
ingredients  are:  
-­‐ bottom  bun  
-­‐ one  of  the  following:  mustard  or  mayonnaise  
-­‐  lettuce  (optional)  
-­‐  tomato  (optional)  
-­‐  one  of  the  following  meats:  chicken  or  beef  
-­‐  one  to  three  slices  of  the  following  cheese:  swiss  or  cheddar  
-­‐ one  of  the  following  sauces:  tomato  or  bbq  
-­‐ top  bun
/*  burger  syntax  */  
<burger>  =
The answer is on the following
screen.
/*  burger  syntax  */  
<burger>  =  
        bottom-­‐bun  
        [  mustard  |  mayonnaise  ]  
        lettuce?  
        tomato?  
        [  chicken  |  beef  ]  
        [  swiss-­‐cheese  |  cheddar-­‐cheese  ]{1,3}  
        [  tomato-­‐sauce  |  bbq-­‐sauce]  
        top-­‐bun
Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley

Contenu connexe

Tendances

Perl programming language
Perl programming languagePerl programming language
Perl programming languageElie Obeid
 
Regular expressions in Perl
Regular expressions in PerlRegular expressions in Perl
Regular expressions in PerlGirish Manwani
 
Class 5 - PHP Strings
Class 5 - PHP StringsClass 5 - PHP Strings
Class 5 - PHP StringsAhmed Swilam
 
Bioinformatica 06-10-2011-p2 introduction
Bioinformatica 06-10-2011-p2 introductionBioinformatica 06-10-2011-p2 introduction
Bioinformatica 06-10-2011-p2 introductionProf. Wim Van Criekinge
 
Strings,patterns and regular expressions in perl
Strings,patterns and regular expressions in perlStrings,patterns and regular expressions in perl
Strings,patterns and regular expressions in perlsana mateen
 
Php String And Regular Expressions
Php String  And Regular ExpressionsPhp String  And Regular Expressions
Php String And Regular Expressionsmussawir20
 
Javascript part1
Javascript part1Javascript part1
Javascript part1Raghu nath
 
P H P Part I, By Kian
P H P  Part  I,  By  KianP H P  Part  I,  By  Kian
P H P Part I, By Kianphelios
 
Unit 1-scalar expressions and control structures
Unit 1-scalar expressions and control structuresUnit 1-scalar expressions and control structures
Unit 1-scalar expressions and control structuressana mateen
 
Ruby_Coding_Convention
Ruby_Coding_ConventionRuby_Coding_Convention
Ruby_Coding_ConventionJesse Cai
 
Session 2 - Objective-C basics
Session 2 - Objective-C basicsSession 2 - Objective-C basics
Session 2 - Objective-C basicsVu Tran Lam
 
Perl.predefined.variables
Perl.predefined.variablesPerl.predefined.variables
Perl.predefined.variablesKing Hom
 
Drupaljam xl 2019 presentation multilingualism makes better programmers
Drupaljam xl 2019 presentation   multilingualism makes better programmersDrupaljam xl 2019 presentation   multilingualism makes better programmers
Drupaljam xl 2019 presentation multilingualism makes better programmersAlexander Varwijk
 
Regular expressions in oracle
Regular expressions in oracleRegular expressions in oracle
Regular expressions in oracleLogan Palanisamy
 
Perl names values and variables
Perl names values and variablesPerl names values and variables
Perl names values and variablessana mateen
 
Programming in perl style
Programming in perl styleProgramming in perl style
Programming in perl styleBo Hua Yang
 

Tendances (18)

Perl Presentation
Perl PresentationPerl Presentation
Perl Presentation
 
Perl programming language
Perl programming languagePerl programming language
Perl programming language
 
Regular expressions in Perl
Regular expressions in PerlRegular expressions in Perl
Regular expressions in Perl
 
Class 5 - PHP Strings
Class 5 - PHP StringsClass 5 - PHP Strings
Class 5 - PHP Strings
 
Bioinformatica 06-10-2011-p2 introduction
Bioinformatica 06-10-2011-p2 introductionBioinformatica 06-10-2011-p2 introduction
Bioinformatica 06-10-2011-p2 introduction
 
Strings,patterns and regular expressions in perl
Strings,patterns and regular expressions in perlStrings,patterns and regular expressions in perl
Strings,patterns and regular expressions in perl
 
Php String And Regular Expressions
Php String  And Regular ExpressionsPhp String  And Regular Expressions
Php String And Regular Expressions
 
Javascript part1
Javascript part1Javascript part1
Javascript part1
 
P H P Part I, By Kian
P H P  Part  I,  By  KianP H P  Part  I,  By  Kian
P H P Part I, By Kian
 
Unit 1-scalar expressions and control structures
Unit 1-scalar expressions and control structuresUnit 1-scalar expressions and control structures
Unit 1-scalar expressions and control structures
 
Ruby_Coding_Convention
Ruby_Coding_ConventionRuby_Coding_Convention
Ruby_Coding_Convention
 
Session 2 - Objective-C basics
Session 2 - Objective-C basicsSession 2 - Objective-C basics
Session 2 - Objective-C basics
 
Perl.predefined.variables
Perl.predefined.variablesPerl.predefined.variables
Perl.predefined.variables
 
Drupaljam xl 2019 presentation multilingualism makes better programmers
Drupaljam xl 2019 presentation   multilingualism makes better programmersDrupaljam xl 2019 presentation   multilingualism makes better programmers
Drupaljam xl 2019 presentation multilingualism makes better programmers
 
Sorting arrays in PHP
Sorting arrays in PHPSorting arrays in PHP
Sorting arrays in PHP
 
Regular expressions in oracle
Regular expressions in oracleRegular expressions in oracle
Regular expressions in oracle
 
Perl names values and variables
Perl names values and variablesPerl names values and variables
Perl names values and variables
 
Programming in perl style
Programming in perl styleProgramming in perl style
Programming in perl style
 

En vedette

Down to Stack Traces, up from Heap Dumps
Down to Stack Traces, up from Heap DumpsDown to Stack Traces, up from Heap Dumps
Down to Stack Traces, up from Heap DumpsAndrei Pangin
 
Building a Docker v1.12 Swarm cluster on ARM
Building a Docker v1.12 Swarm cluster on ARMBuilding a Docker v1.12 Swarm cluster on ARM
Building a Docker v1.12 Swarm cluster on ARMTeam Hypriot
 
The "Why", "What" and "How" of Microservices
The "Why", "What" and "How" of Microservices The "Why", "What" and "How" of Microservices
The "Why", "What" and "How" of Microservices INPAY
 
Developing rich multimedia applications with Kurento: a tutorial for Java Dev...
Developing rich multimedia applications with Kurento: a tutorial for Java Dev...Developing rich multimedia applications with Kurento: a tutorial for Java Dev...
Developing rich multimedia applications with Kurento: a tutorial for Java Dev...Luis Lopez
 
elasticRTC -- how to have your own WebRTC cloud scaling to be billions in min...
elasticRTC -- how to have your own WebRTC cloud scaling to be billions in min...elasticRTC -- how to have your own WebRTC cloud scaling to be billions in min...
elasticRTC -- how to have your own WebRTC cloud scaling to be billions in min...Luis Lopez
 
vJUG - The JavaFX Ecosystem
vJUG - The JavaFX EcosystemvJUG - The JavaFX Ecosystem
vJUG - The JavaFX EcosystemAndres Almiray
 
Token Authentication for Java Applications
Token Authentication for Java ApplicationsToken Authentication for Java Applications
Token Authentication for Java ApplicationsStormpath
 
Configuration beyond Java EE 8
Configuration beyond Java EE 8Configuration beyond Java EE 8
Configuration beyond Java EE 8Anatole Tresch
 
WebRTC with Java
WebRTC with JavaWebRTC with Java
WebRTC with Javaamithap07
 

En vedette (11)

Down to Stack Traces, up from Heap Dumps
Down to Stack Traces, up from Heap DumpsDown to Stack Traces, up from Heap Dumps
Down to Stack Traces, up from Heap Dumps
 
Building a Docker v1.12 Swarm cluster on ARM
Building a Docker v1.12 Swarm cluster on ARMBuilding a Docker v1.12 Swarm cluster on ARM
Building a Docker v1.12 Swarm cluster on ARM
 
The "Why", "What" and "How" of Microservices
The "Why", "What" and "How" of Microservices The "Why", "What" and "How" of Microservices
The "Why", "What" and "How" of Microservices
 
Developing rich multimedia applications with Kurento: a tutorial for Java Dev...
Developing rich multimedia applications with Kurento: a tutorial for Java Dev...Developing rich multimedia applications with Kurento: a tutorial for Java Dev...
Developing rich multimedia applications with Kurento: a tutorial for Java Dev...
 
elasticRTC -- how to have your own WebRTC cloud scaling to be billions in min...
elasticRTC -- how to have your own WebRTC cloud scaling to be billions in min...elasticRTC -- how to have your own WebRTC cloud scaling to be billions in min...
elasticRTC -- how to have your own WebRTC cloud scaling to be billions in min...
 
vJUG - The JavaFX Ecosystem
vJUG - The JavaFX EcosystemvJUG - The JavaFX Ecosystem
vJUG - The JavaFX Ecosystem
 
Token Authentication for Java Applications
Token Authentication for Java ApplicationsToken Authentication for Java Applications
Token Authentication for Java Applications
 
Spring RabbitMQ
Spring RabbitMQSpring RabbitMQ
Spring RabbitMQ
 
Configuration beyond Java EE 8
Configuration beyond Java EE 8Configuration beyond Java EE 8
Configuration beyond Java EE 8
 
Building Netty Servers
Building Netty ServersBuilding Netty Servers
Building Netty Servers
 
WebRTC with Java
WebRTC with JavaWebRTC with Java
WebRTC with Java
 

Similaire à Understanding the mysteries of the CSS property value syntax

Similaire à Understanding the mysteries of the CSS property value syntax (20)

Idiomatic Javascript (ES5 to ES2015+)
Idiomatic Javascript (ES5 to ES2015+)Idiomatic Javascript (ES5 to ES2015+)
Idiomatic Javascript (ES5 to ES2015+)
 
Es6 to es5
Es6 to es5Es6 to es5
Es6 to es5
 
Jekyll - Liquid for noobs
Jekyll - Liquid for noobsJekyll - Liquid for noobs
Jekyll - Liquid for noobs
 
Prototype js
Prototype jsPrototype js
Prototype js
 
Lecture 9
Lecture 9Lecture 9
Lecture 9
 
PowerShell_LangRef_v3 (1).pdf
PowerShell_LangRef_v3 (1).pdfPowerShell_LangRef_v3 (1).pdf
PowerShell_LangRef_v3 (1).pdf
 
EmberConf 2021 - Crossfile Codemodding with Joshua Lawrence
EmberConf 2021 - Crossfile Codemodding with Joshua LawrenceEmberConf 2021 - Crossfile Codemodding with Joshua Lawrence
EmberConf 2021 - Crossfile Codemodding with Joshua Lawrence
 
Using Regular Expressions and Staying Sane
Using Regular Expressions and Staying SaneUsing Regular Expressions and Staying Sane
Using Regular Expressions and Staying Sane
 
Interview C++11 code
Interview C++11 codeInterview C++11 code
Interview C++11 code
 
PHP PPT FILE
PHP PPT FILEPHP PPT FILE
PHP PPT FILE
 
Asp.Net MVC - Razor Syntax
Asp.Net MVC - Razor SyntaxAsp.Net MVC - Razor Syntax
Asp.Net MVC - Razor Syntax
 
XPath
XPathXPath
XPath
 
Php basics
Php basicsPhp basics
Php basics
 
Js types
Js typesJs types
Js types
 
Xhtml tags reference
Xhtml tags referenceXhtml tags reference
Xhtml tags reference
 
Ruby on Rails Intro
Ruby on Rails IntroRuby on Rails Intro
Ruby on Rails Intro
 
XPath
XPathXPath
XPath
 
Chapter 08
Chapter 08Chapter 08
Chapter 08
 
Advanced Perl Techniques
Advanced Perl TechniquesAdvanced Perl Techniques
Advanced Perl Techniques
 
Overpsss API / Overpass-Turbo
Overpsss API / Overpass-TurboOverpsss API / Overpass-Turbo
Overpsss API / Overpass-Turbo
 

Plus de Russ Weakley

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windowsRuss Weakley
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptionsRuss Weakley
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible namesRuss Weakley
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?Russ Weakley
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI componentsRuss Weakley
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?Russ Weakley
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design SystemsRuss Weakley
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletesRuss Weakley
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loaderRuss Weakley
 
Accessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryAccessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryRuss Weakley
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messagesRuss Weakley
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and ErrorsRuss Weakley
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?Russ Weakley
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern LibrariesRuss Weakley
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern librariesRuss Weakley
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Russ Weakley
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-completeRuss Weakley
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labelsRuss Weakley
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdownRuss Weakley
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchRuss Weakley
 

Plus de Russ Weakley (20)

Accessible chat windows
Accessible chat windowsAccessible chat windows
Accessible chat windows
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptions
 
A deep dive into accessible names
A deep dive into accessible namesA deep dive into accessible names
A deep dive into accessible names
 
What are accessible names and why should you care?
What are accessible names and why should you care?What are accessible names and why should you care?
What are accessible names and why should you care?
 
How to build accessible UI components
How to build accessible UI componentsHow to build accessible UI components
How to build accessible UI components
 
What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?What is WCAG 2 and why should we care?
What is WCAG 2 and why should we care?
 
Accessible states in Design Systems
Accessible states in Design SystemsAccessible states in Design Systems
Accessible states in Design Systems
 
Creating accessible modals and autocompletes
Creating accessible modals and autocompletesCreating accessible modals and autocompletes
Creating accessible modals and autocompletes
 
Building an accessible progressive loader
Building an accessible progressive loaderBuilding an accessible progressive loader
Building an accessible progressive loader
 
Accessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and gloryAccessibility in Design systems - the pain and glory
Accessibility in Design systems - the pain and glory
 
Accessible Inline errors messages
Accessible Inline errors messagesAccessible Inline errors messages
Accessible Inline errors messages
 
Accessible Form Hints and Errors
Accessible Form Hints and ErrorsAccessible Form Hints and Errors
Accessible Form Hints and Errors
 
What is accessibility?
What is accessibility?What is accessibility?
What is accessibility?
 
Accessibility in Pattern Libraries
Accessibility in Pattern LibrariesAccessibility in Pattern Libraries
Accessibility in Pattern Libraries
 
Accessibility in pattern libraries
Accessibility in pattern librariesAccessibility in pattern libraries
Accessibility in pattern libraries
 
Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24Building an accessible auto-complete - #ID24
Building an accessible auto-complete - #ID24
 
Building an accessible auto-complete
Building an accessible auto-completeBuilding an accessible auto-complete
Building an accessible auto-complete
 
Creating Acessible floating labels
Creating Acessible floating labelsCreating Acessible floating labels
Creating Acessible floating labels
 
Creating an Accessible button dropdown
Creating an Accessible button dropdownCreating an Accessible button dropdown
Creating an Accessible button dropdown
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off Switch
 

Dernier

Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...HetalPathak10
 
Congestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentationCongestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentationdeepaannamalai16
 
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Unraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptxUnraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptx
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptxDhatriParmar
 
4.9.24 Social Capital and Social Exclusion.pptx
4.9.24 Social Capital and Social Exclusion.pptx4.9.24 Social Capital and Social Exclusion.pptx
4.9.24 Social Capital and Social Exclusion.pptxmary850239
 
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...Nguyen Thanh Tu Collection
 
PART 1 - CHAPTER 1 - CELL THE FUNDAMENTAL UNIT OF LIFE
PART 1 - CHAPTER 1 - CELL THE FUNDAMENTAL UNIT OF LIFEPART 1 - CHAPTER 1 - CELL THE FUNDAMENTAL UNIT OF LIFE
PART 1 - CHAPTER 1 - CELL THE FUNDAMENTAL UNIT OF LIFEMISSRITIMABIOLOGYEXP
 
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxCLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxAnupam32727
 
Objectives n learning outcoms - MD 20240404.pptx
Objectives n learning outcoms - MD 20240404.pptxObjectives n learning outcoms - MD 20240404.pptx
Objectives n learning outcoms - MD 20240404.pptxMadhavi Dharankar
 
DBMSArchitecture_QueryProcessingandOptimization.pdf
DBMSArchitecture_QueryProcessingandOptimization.pdfDBMSArchitecture_QueryProcessingandOptimization.pdf
DBMSArchitecture_QueryProcessingandOptimization.pdfChristalin Nelson
 
The role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenshipThe role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenshipKarl Donert
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptxmary850239
 
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptxMan or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptxDhatriParmar
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...Nguyen Thanh Tu Collection
 
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptxGrade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptxkarenfajardo43
 
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQuiz Club NITW
 
Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Celine George
 
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level   being good citizen -imperative- (1) (1).pdfMS4 level   being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdfMr Bounab Samir
 

Dernier (20)

Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
 
Congestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentationCongestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentation
 
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Unraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptxUnraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptx
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
 
Paradigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTAParadigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTA
 
4.9.24 Social Capital and Social Exclusion.pptx
4.9.24 Social Capital and Social Exclusion.pptx4.9.24 Social Capital and Social Exclusion.pptx
4.9.24 Social Capital and Social Exclusion.pptx
 
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
 
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of EngineeringFaculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
 
PART 1 - CHAPTER 1 - CELL THE FUNDAMENTAL UNIT OF LIFE
PART 1 - CHAPTER 1 - CELL THE FUNDAMENTAL UNIT OF LIFEPART 1 - CHAPTER 1 - CELL THE FUNDAMENTAL UNIT OF LIFE
PART 1 - CHAPTER 1 - CELL THE FUNDAMENTAL UNIT OF LIFE
 
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxCLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
 
Objectives n learning outcoms - MD 20240404.pptx
Objectives n learning outcoms - MD 20240404.pptxObjectives n learning outcoms - MD 20240404.pptx
Objectives n learning outcoms - MD 20240404.pptx
 
DBMSArchitecture_QueryProcessingandOptimization.pdf
DBMSArchitecture_QueryProcessingandOptimization.pdfDBMSArchitecture_QueryProcessingandOptimization.pdf
DBMSArchitecture_QueryProcessingandOptimization.pdf
 
The role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenshipThe role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenship
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx
 
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptxMan or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
 
Plagiarism,forms,understand about plagiarism,avoid plagiarism,key significanc...
Plagiarism,forms,understand about plagiarism,avoid plagiarism,key significanc...Plagiarism,forms,understand about plagiarism,avoid plagiarism,key significanc...
Plagiarism,forms,understand about plagiarism,avoid plagiarism,key significanc...
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
 
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptxGrade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
 
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
 
Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17
 
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level   being good citizen -imperative- (1) (1).pdfMS4 level   being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdf
 

Understanding the mysteries of the CSS property value syntax

  • 1. syntax. Understanding the mysteries of the CSS property value
  • 2. The W3C uses a specific syntax for defining CSS property values.
  • 3. /*  CSS  property  value  syntax  examples  */   <line-­‐width>  =  <length>  |  thin  |  medium  |  thick   <bg-­‐size>  =  [  <length>  |  <percentage>  |  auto  ]{1,2}  |  cover  |   contain   <'background'>  =  [  <bg-­‐layer>  ,  ]*  <final-­‐bg-­‐layer>   <'border-­‐image-­‐slice'>  =  [<number>  |  <percentage>]{1,4}  &&  fill?
  • 4. The aim of this presentation is to give you a basic understanding of this syntax to help understand the various W3C CSS Specifications.
  • 5. We’re going to start with a quick look at Backus-Naur Form, as this will help to explain the CSS property value syntax.
  • 7. In computer science, Backus– Naur Form (BNF) is one of the main notation techniques used to describe the syntax of computing languages.
  • 8. A Backus-Naur Form specification is a set of derivation rules, written as:
  • 9. //  BNF  Syntax  example   <symbol>  ::=  __expression__
  • 10. //  BNF  Syntax  example   <symbol>  ::=  __expression__ Non-terminal Symbol
  • 11. //  BNF  Syntax  example   <symbol>  ::=  __expression__ “May be replaced with”
  • 12. //  BNF  Syntax  example   <symbol>  ::=  __expression__ Expression
  • 13. The __expression__ consists of one or more sequences of symbols that are used to derive the meaning of the symbol on the left.
  • 14. Backus-Naur specifications are basically saying: “Whatever is on the left may be replaced with whatever is on the right”.
  • 15. Non-terminal symbols appear between angle brackets “<  >”. Non-terminal symbols can be broken down or replaced further.
  • 16. /*  Non-­‐terminal  symbols  -­‐  recursive  example  */   <integer>  ::=  <digit>  |  <digit><integer>   <digit>  ::=  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9 Non-terminal symbols
  • 17. A terminal symbol indicates that the value cannot be broken down or replaced further.
  • 18. /*  Non-­‐terminal  symbols  -­‐  recursive  example  */   <integer>  ::=  <digit>  |  <digit><integer>   <digit>  ::=  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9 Terminal Symbols
  • 19. There are variants of the BNF used today, such as Extended Backus–Naur Form (EBNF) Augmented Backus–Naur Form (ABNF).
  • 21. While the W3C CSS property value syntax has some similarities to BNF and EBNF, it also has some differences.
  • 22. Like BNF and EBNF, it begins with a non-terminal symbol.
  • 23. /*  Non-­‐terminal  symbol  */   <line-­‐width>  =  <length>  |  thin  |  medium  |  thick Non-terminal symbol
  • 24. Like EBNF, it uses an equals “=” after the initial non-terminal symbol. This also means “may be replaced with”.
  • 25. /*  The  equals  sign  */   <line-­‐width>  =  <length>  |  thin  |  medium  |  thick The “=” symbol
  • 26. However, unlike BNF and EBNF, the CSS property value syntax describes symbols as “component values”.
  • 27. /*  Component  values  */   <line-­‐width>  =  <length>  |  thin  |  medium  |  thick Component values
  • 28. There are four different types of component values.
  • 29. 1. Keyword values These values appear without quotes or angle brackets. They are used “as is” as property values. As they cannot be replaced or broken down further, they are terminal.
  • 30. /*  Keyword  value  example  */   <line-­‐width>  =  <length>  |  thin  |  medium  |  thick Keyword Value
  • 31. 2. Basic data types These basic data types define core values such as <length> and <color>. They are non-terminal as they can be replaced with actual length or color values.
  • 32. /*  Basic  data  type  example  */   <'background-­‐color'>  =  <color> Basic Data Type
  • 33. For example, the “<color>” symbol indicates that this value can be replaced with a value such as:
  • 34. /*  Basic  data  type  example  */   .example  {  background-­‐color:  honeydew;  }   .example  {  background-­‐color:  rgb(50%,50%,50%);  }   .example  {  background-­‐color:  rgba(100%,100%,100%,.5);  }   .example  {  background-­‐color:  hsl(280,100%,50%);  }   .example  {  background-­‐color:  hsla(280,100%,50%,0.5);  }   .example  {  background-­‐color:  transparent;  }
  • 35. 3. Property data types These types define the property name. They are defined using the property name (complete with quotes) between the angle brackets “<  >”. They are non- terminal.
  • 36. /*  Property  data  type  example  */   <'border-­‐width'>  =  <line-­‐width>{1,4} Property Data Type
  • 37. 4. Non-property data types These types do not share the same name as a property. However, they help define aspects of specific properties. They are non-terminal.
  • 38. For example, <line-­‐width> is not a property, but it is a data type that helps to define the various <border> properties.
  • 39. /*  Non-­‐property  data  type  example  */   <line-­‐width>  =  <length>  |  thin  |  medium  |  thick Not a property
  • 40. /*  Non-­‐property  data  type  example  */   <line-­‐width>  =  <length>  |  thin  |  medium  |  thick     <'border-­‐width'>  =  <line-­‐width>{1,4} Helps define a property
  • 41. A recap of the four different types of component values?
  • 42. /*  Four  different  types  */   thin   <color>   <‘border-­‐width'>   <line-­‐width> Keyword Value Basic Data Type Property Data Type Non-property Data Type
  • 44. Component values can be arranged into property value combinators using the following methods:
  • 45. 1. Component values written directly after each other means that all of them must occur, in the given order.
  • 46. /*  Component  arrangement  -­‐  all  in  given  order  */   <property>  =  value1  value2  value3   /*  Example  */   .example  {  property:  value1  value2  value3;  }  
  • 47. 2. A double ampersand “&&” separating two or more components means that all of them must occur, in any order.
  • 48. /*  Component  arrangement  -­‐  all  in  any  order  */   <property>  =  value1  &&  value2   /*  Examples  */   .example  {  property:  value1  value2;  }   .example  {  property:  value2  value1;  }
  • 49. 3. A single pipe “|” separates two or more alternatives means that only one of them must occur. This symbol acts as “OR”.
  • 50. /*  Component  arrangement-­‐  one  of  them  must  occur  */   <property>  =  value1  |  value2  |  value3   /*  Examples  */   .example  {  property:  value1;  }   .example  {  property:  value2;  }   .example  {  property:  value3;  }  
  • 51. 4. A double pipe “||” separating two or more options means that one or more of them must occur, in any order.
  • 52. /*  Component  arrangement-­‐  one  or  more  in  any  order  */   <property>  =  value1  ||  value2  ||  value3   /*  Examples  */   .example  {  property:  value1;  }   .example  {  property:  value2;  }   .example  {  property:  value3;  }   .example  {  property:  value1  value2;  }   .example  {  property:  value1  value2  value3;  }   ...etc
  • 53. 5. Square brackets “[  ]” surrounding two or more alternatives means that the components inside are a single grouping.
  • 54. /*  Component  arrangement-­‐  a  single  grouping  */   <property>  =  [  value1  |  value2  ]  value3   /*  Examples  */   .example  {  property:  value1  value3;  }   .example  {  property:  value2  value3;  }
  • 55. A recap of the component value combinators:
  • 56. /*  All  in  given  order  */   <property>  =  value1  value2  value3   /*  All  in  any  order  */   <property>  =  value1  &&  value2   /*  One  of  them  must  occur  */   <property>  =  value1  |  value2   /*  One  or  more  in  any  order  */   <property>  =  value1  ||  value2   /*  A  single  grouping  */   <property>  =  [  value1  |  value2  ]  
  • 58. Component values can also be multiplied using the following methods:
  • 59. 1. A question mark “?” indicates that the preceding type, word, or group is optional and occurs zero or one times.
  • 60. /*  Component  multiplier  -­‐  zero  or  one  time  */   <property>  =  value1  [,  value2  ]?   /*  Examples  */   .example  {  property:  value1;  }   .example  {  property:  value1,  value2;  }
  • 61. 2. An asterisk “*” indicates that the preceding type, word, or group occurs zero or more times.
  • 62. /*  Component  multiplier  -­‐  zero  or  more  times  */   <property>  =  value1  [,  <value2>  ]*   /*  Examples  */   .example  {  property:  value1;  }   .example  {  property:  value1,  <value2>;  }   .example  {  property:  value1,  <value2>,  <value2>;  }   .example  {  property:  value1,  <value2>,  <value2>,  <value2>;  }   ...etc
  • 63. 3. A plus “+” indicates that the preceding type, word, or group occurs one or more times.
  • 64. /*  Component  multiplier  -­‐  one  or  more  times  */   <property>  =  <value>+   /*  Examples  */   .example  {  property:  <value>;  }   .example  {  property:  <value>  <value>;  }   .example  {  property:  <value>  <value>  <value>;  }   ...etc
  • 65. 4. A single number in curly braces “{A}” indicates that the preceding type, word, or group occurs “A” times.
  • 66. /*  Component  multiplier  -­‐  occurs  A  times  */   <property>  =  <value>{2}   /*  Examples  */   .example  {  property:  <value>  <value>;  }
  • 67. 5. A comma-separated pair of numbers in curly braces “{A,B}” indicates that the preceding type, word, or group occurs at least “A” and at most “B” times.
  • 68. /*  Component  multiplier  -­‐  at  least  A  and  at  most  B  */   <property>  =  <value>{1,3}   /*  Examples  */   .example  {  property:  <value>;  }   .example  {  property:  <value>  <value>;  }   .example  {  property:  <value>  <value>  <value>;  }
  • 69. 6. The “B” may be omitted “{A,}” to indicate that there must be at least “A” repetitions, with no upper limit on the number of repetitions.
  • 70. /*  Component  multiplier  -­‐  at  least  A,  no  upper  limit  */   <property>  =  <value>{1,}   /*  Examples  */   .example  {  property:  <value>;  }   .example  {  property:  <value>  <value>;  }   .example  {  property:  <value>  <value>  <value>;  }   ...etc
  • 71. 7. A hash “#” indicates that the preceding type, word, or group occurs one or more times, separated by comma tokens. (Whitespace is optional)
  • 72. /*  Component  multiplier  -­‐  one  or  more,  separated  by  commas  */   <property>  =  <value>#   /*  Examples  */   .example  {  property:  <value>;  }   .example  {  property:  <value>,  <value>;  }   .example  {  property:  <value>,  <value>,  <value>;  }   ...etc
  • 73. 8. An exclamation point “!” after a group indicates that the group is required and must produce at least one value.
  • 74. /*  Component  multiplier  -­‐  required  group,  at  lease  one  value  */   <property>  =  value1  [  value2  |  value3  ]!   /*  Examples  */   .example  {  property:  value1  value2;  }   .example  {  property:  value1  value3;  }
  • 75. A recap of component value multipliers:
  • 76. ?   *   +   {A}   {A,B}   {A,}   #   ! /*  zero  or  one  time  */   /*  zero  or  more  times  */   /*  one  or  more  times  */   /*  occurs  A  times  */   /*  at  least  A  and  at  most  B  */   /*  at  least  A,  no  upper  limit  */   /*  one  or  more,  separated  by  commas  */   /*  at  lease  one  value  from  the  group  */
  • 78. Let’s look at the <'text-­‐shadow'> property as an example.
  • 79. /*  text-­‐shadow  */   <'text-­‐shadow'>  =  none  |  [  <length>{2,3}  &&  <color>?  ]#  
  • 80. /*  text-­‐shadow  */   <'text-­‐shadow'>  =  none  |  [  <length>{2,3}  &&  <color>?  ]#   /*     |  =  One  of  them  must  occur   #  =  one  or  more,  separated  by  commas   &&  =  All  in  any  order  */   ?  =  zero  or  one  time  */   */   .example  {  text-­‐shadow:  none  OR  one  or  more  comma-­‐separated   groups  of  2-­‐3  length  values  and  optional  color  value  in  any   order;  }
  • 81. /*  text-­‐shadow  */   <'text-­‐shadow'>  =  none  |  [  <length>{2,3}  &&  <color>?  ]#   /*  Examples  */   .example  {  text-­‐shadow:  none;  }   .example  {  text-­‐shadow:  10px  10px;  }   .example  {  text-­‐shadow:  10px  10px  10px;  }   .example  {  text-­‐shadow:  10px  10px  10px  red;  }   .example  {  text-­‐shadow:  red  10px  10px  10px;  }   .example  {  text-­‐shadow:  10px  10px  red,  20px  20px  lime;  }
  • 83. (Disclaimer: This idea is ripped off from a great A List Apart article by J. David Eisenberg.) http://alistapart.com/article/readspec
  • 84. How would you define the syntax of a burger if you had to use a specific set of ingredients in a specific order?
  • 85. Anyone want to volunteer? The first person to get the correct answer during the break will win a copy of “Offscreen” magazine. http://www.offscreenmag.com/
  • 86. /*  ingredients  */   In  the  correct  order  from  bottom  to  the  top  of  the  bun,  the   ingredients  are:   -­‐ bottom  bun   -­‐ one  of  the  following:  mustard  or  mayonnaise   -­‐  lettuce  (optional)   -­‐  tomato  (optional)   -­‐  one  of  the  following  meats:  chicken  or  beef   -­‐  one  to  three  slices  of  the  following  cheese:  swiss  or  cheddar   -­‐ one  of  the  following  sauces:  tomato  or  bbq   -­‐ top  bun
  • 87. /*  burger  syntax  */   <burger>  =
  • 88. The answer is on the following screen.
  • 89. /*  burger  syntax  */   <burger>  =          bottom-­‐bun          [  mustard  |  mayonnaise  ]          lettuce?          tomato?          [  chicken  |  beef  ]          [  swiss-­‐cheese  |  cheddar-­‐cheese  ]{1,3}          [  tomato-­‐sauce  |  bbq-­‐sauce]          top-­‐bun
  • 90. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley