Css shorthand properties

Als je met css werkt heb je waarschijnlijk al gemerkt dat het aantal regels code snel kan oplopen. Door middel van css shorthand properties kan je een flink aantal regels schrappen. Werken met shorthand properties heeft meer voordelen dan alleen maar het aantal regels code beperken, het is ook een stuk overzichtelijker en je pagina’s laden nog sneller. We zullen eerst eens beginnen met een voorbeeld waarbij je een stuk tekst opmaakt.

1. Font

p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-style:italic;
font-weight:bold;
line-height:18px;
}

Dit kan je beter zo doen. Let op, volgorde is belangrijk.

p {
font:italic bold 12px/18px Georgia, "Times New Roman", Times, serif;
}

2. Margin & padding

.container {
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}

Dit wordt

.container {
margin:10px 20px 30px 40px;
}

De volgorde van de properties kan je gemakkelijk onthouden door middel van een klok. Je begint bovenaan en gaat met de wijzers mee. Zo gaat het ook met padding. Eerst top, dan right, dan bottom en tenslotte left. Deze regels gelden ook voor ‘padding’.

Als je de 3de (bottom) en 4de (left) waarde niet opgeeft, wordt er verondersteld dat de 3de waarde gelijk is aan de 1ste (top), en dat de 4de waarde gelijk is aan de 2de (right).

.sidebar {
margin-top:10px;
margin-right:20px;
margin-bottom:10px;
margin-left:20px;
}

Dit kan dus worden herschreven als

.sidebar {
margin:10px 20px;
}

Of dit

.sidebar {
margin-top:10px;
margin-right:20px;
margin-bottom:50px;
margin-left:20px;
}

Kan worden herschreven als

.sidebar {
margin:10px 20px 50px;
}

3. Background

body {
background-color:#FFF;
background-image:url(images/bg.png);
background-repeat:repeat-x;
background-position:top;
}

wordt

body {
background:#FFF url(images/bg.png) repeat-x top;
}

Als je één van de properties niet gebruikt laat je hem gewoon weg uit de shorthand propertie.

4. Border

.menu {
border-top-width:1px;
border-top-style:solid;
border-top-color:#000;
}

wordt

.menu {
border-top:1px solid #000;
}

dit kan dan weer worden veranderd naar

.menu {
border:1px solid #000;
}

5. List-style

.menu ul {
list-style-type:square;
list-style-position:inside;
list-style-image:url(images/list.png);
}

wordt

.menu ul {
list-style:square inside url(images/list.png);
}

6. Outline

.menu {
outline-color:#FFO;
outline-style:dotted;
outline-width:2px;
}

wordt

.menu {
outline:#FFO dotted 2px;
}