CSS Shorthand notatie

Met een external stylesheet is het mogelijk om de presentatie en de inhoud van een webpagina van elkaar te scheiden. Hierdoor blijft de HTML code van een pagina beperkt en de pagina wordt zo sneller geladen.

Het is ook nog mogelijk om de code in het CSS bestand efficiënter te maken. Dat kan door middel van CSS shorthand notatie. Hieronder kijken we naar enkele eigenschappen (properties) die we met behulp van shorthand flink in kunnen korten.

Font

In een stylesheet zouden de volgende stijlregels kunnen staan:

p {
font-style:italic;
font-variant:normal;
font-weight:bold;
font-size:1em;
line-height:1.3em;
font-family:Baskerville,serif;
}

In shorthand notatie kan dit herschreven worden tot deze code:

p {
font:italic,bold,1em/1.3em,Baskerville,serif;
}

We kunnen dus alle waarden van de afzondelijke eigenschappen achter elkaar zetten, gescheiden door een komma. Alleen font-size en line-height scheiden we door een slash (/). We kunnen de waarde normal voor font-variant weglaten uit de shorthand code hierboven, omdat dit de standaardwaarde is. Zo sparen we extra ruimte. Datzelfde geldt als de waarde normal is bij één van de andere eigenschappen.

Voor de volgorde van de waarden in de shorthand code kun je het beste de volgorde aanhouden van de officiële W3C specificatie voor de font eigenschappen. Dat geldt ook voor de overige eigenschappen die we hierna behandelen.

Background

De waarden voor background kunnen op deze manier in shorthand omgezet worden:

element {
background-color:#FFF;
background-image:url(afbeelding.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:20px 80px;
}

Shorthand code:

element {
background:#FFF url(afbeelding.gif) no-repeat fixed 20px 80px;
}

Net als bij font houden we bij de shorthand code de volgorde aan van de background CSS specificatie.

Ook voor de background waarden geldt dat je ze kunt weglaten uit de shorthand code als je de standaardwaarden wilt gebruiken. Deze standaardwaarden zijn:

background-color: transparent;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: top left;

Kleuren

In de code voor background-color zie je dat we hier een hexadecimale waarde hebben staan: #FFF. Dit is op zichzelf ook al een shorthand notatie. Wanneer een hexadecimale waarde namelijk bestaat uit drie gelijke paren dan kun je deze als volgt afkorten:

#6699CC kan afgekort worden tot #69C, #CCCCCC wordt #CCC en #993300 wordt #930.

Border

We bekijken deze code voor een border:

element {
border-width:1px;
border-style:solid;
border-color:#C03;
}

Shorthand:

element {
border:1px solid #C03;
}

Hier is het het beste om de volgorde width, style, color van het W3C aan te houden, hoewel het waarschijnlijk geen fouten zal veroorzaken in de meeste browsers als je een afwijkende volgorde in de shorthand code gebruikt.

Margin en padding

Het volgende geldt voor zowel margin als padding! Denk bij de shorthand code aan de wijzers van een klok en begin bij twaalf uur (top), daarna volgen dus right, bottom en left. Ook kun je aan het woord TRouBLe denken als ezelsbruggetje.

De code:

element {
margin-top:1em
margin-right:0.5em;
margin-bottom:1.5em;
margin-left:0;
}

Wordt in shorthand notatie:

element {
margin:1em 0.5em 1.5em 0;
}

List

Ook voor lijsten (<ul> <ol>) is er een shorthand code. We nemen het volgende voorbeeld:

ul li {
list-style-type:square;
list-style-position:inside;
list-style-image:url(afbeelding.gif);
}

De shorthand code wordt:

ul li {
list-style:square inside url(afbeelding.gif);
}

In deze code wordt afbeelding.gif getoond als lijstafbeelding. Als dit bestand niet getoond kan worden dan wordt het vervangen door een vierkantje.

De standaardwaarden voor type, position en image zijn:

list-style-type:disc;
list-style-position:outside;
list-style-image:none;

Tot slot

Met een goed gebruik van shorthand notaties kun je de grootte van je CSS bestand vaak sterk beperken. Ook kan het je code overzichtelijker maken wat fijn is als je er later weer mee aan de slag gaat.

• Terug naar het lessenoverzicht

Homepage-Maken Tip