De bedoeling van shorthand is dat we evenveel CSS gaan schrijven met minder tekst. Het voordeel hiervan is dat de stylesheets kleiner gaan zijn, dit is op zijn beurt weer goed voor de downloadtijd van je website. En een snelle website daar houden bezoekers van.

Fonts

Normaal:

0
1
2
3
4

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif;

Met shorthand wordt dit:

0

font: 1em/1.5em bold italic serif

Background

Normaal:

0
1
2
3

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Met shorthand wordt dit:

0

background: #fff url(image.gif) no-repeat top left;

Als je ook maar een van deze waarden niet meegeeft zal elke browser dezelfde standaard waarden toekennen, dat zou dan altijd achtergrondkleur wit, een eventuele afbeelding zal zichzelf herhalen horizontaal en vertikaal, positie van de afbeelding zal altijd top left zijn.

List

Normaal:

0
1
2
3

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif);

Met shorthand wordt dit:

0

list-style: disc outside url(image.gif);

Als er waardes ontbreken bij de shorthand regel, dan zullen automatisch de standaardwaarden worden gebruikt.

Margin & padding

Hier zijn een aantal verschillende mogelijkheden. De gebruikte methode is afhankelijk van het aantal verschillende waarden.

Bij 4 verschillende waarden:

Normaal:

0
1
2
3

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;

Met shorthand wordt dit:

0

margin: 2px 1px 3px 4px; /*top, right, bottom, left*/

Bij 3 verschillende waarden:

Normaal:

0
1
2
3

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em;

Met shorthand wordt dit:

0

margin: 5em 1em 3em; /*top, right & left, bottom*/

Bij 2 verschillende waarden:

Normaal:

0
1
2
3

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%;

Met shorthand wordt dit:

0

margin: 5% 1%; /*top & bottom, right & left*/

Bij 1 en dezelfde waarde:

Normaal:

0
1
2
3

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

Met shorthand wordt dit:

0

margin: 0; /*top & bottom & right & left*/

Bovenstaande regels gelden ook voor padding en border.

Borders

Normaal:

0
1
2

border-width: 1px;
border-color: black;
border-style: solid;

Met shorthand wordt dit:

0

border: 1px black solid;

of

Normaal:

0
1
2

border-right-width: 1px;
border-right-color: black;
border-right-style: solid;

Met shorthand wordt dit:

0

border-right: 1px black solid;

Color

Normaal:

0
1
2

color: #FFFFFF;
color: #6699FF;
color: #990000;

Met shorthand wordt dit:

0
1
2

color: #FFF;
color: #69F;
color: #900;

Als er telkens een paar van twee gelijke waarden is zoals 6699EE, dan kan deze waarde worden ingekort door telkens de tweede waarde weg te laten 69E.

0
1
2
3

#FFFFFF wordt #FFF
#990000 wordt #900
#6633FF wordt #63F
#00FF99 wordt #0F9

Deze tutorial is gebaseerd op het artikel van Mark (Gigadesign).

Dit artikel delen: