CSS codes ingekort (shorthand properties)

Je kunt er voor kiezen om al je css code helemaal uit te schrijven, maar er zijn verschillende korte
notaties mogelijk, waarmee je toch hetzelfde resultaat bereikt. De zogenaamde shorthand properties.
We zetten ze op een rij, zodat je website weer een beetje sneller wordt.

We gaan in op shorthandproperties voor de border, font, lijsten, background, margin en padding.

Shorthand properties voor border

Gebruik:

border: 1px solid black;

in plaats van

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

Gebruik:

border-right: 1px solid black;

in plaats van

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

Hierbij kun je ‘right’ vervangen voor left, top en bottom.

Shorthand properties voor font

Gebruik:

font: 1em/1.5em bold italic serif;

in plaats van

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

Overigens werkt deze methode alleen maar als je font-size en font-family ook gebruikt hebt.
Wanneer je deze twee vergeet werkt de regel niet. Wanneer je font-weight, font-style of font-variant niet
gebruikt, dan wordt automatisch de standaardwaarde overgenomen.

Shorthand properties voor lijsten

Gebruik:

list-style: disc inside url(plaatje.gif);

in plaats van

list-style-type: disc;
list-style-position: inside;
list-style-image: url(plaatje.gif);

Wanneer een onderdeel wordt weggehaald dan zal de standaardwaarde worden overgenomen.

Shorthand properties voor background

Gebruik:

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

in plaats van

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

Ook hier worden weer de standaardwaarden gebruikt als er een onderdeel niet wordt benoemt.

Shorthand properties voor margin en padding

Er zijn een aantal verkorte manieren voor margin en padding. In het voorbeeld wordt margin gebruikt,
maar alle voorbeelden gelden ook voor padding.

Gebruik:

margin: 2px 3px 4px 5px /* boven, rechts, onder, links */

margin: 2px 3px 4px  /* boven, rechts en links, onder */

margin: 2px 3px /* boven en onder, rechts en links */

margin: 2px /* boven, onder, rechts en links tegelijk */