Cascading Style Sheets

Optimalisatie van CSS is ook belangrijk

Bent u van plan om een website te maken? Waar moet u dan goed op letten? Elke ervaren webdesigner kan er een antwoord op geven. U moet op de structuur en de grootte van het CSS bestand goed letten.

Heeft u al een website maar laad hij niet zo vlot? Dan wilt u natuurlijk de opmaak van uw webpagina's zo instellen, zodat uw waardevolle website sneller op het scherm verschijnt. U moet niet vergeten dat de grootte van de CSS file ook een grote rol hierbij speelt.

Verschillende browsers, maar dezelfde weergave van uw website

Om uw externe stylesheet kleiner te maken en gemakkelijker te lezen heb ik in dit artikel zes CSS optimalisatie tips met enkele voorbeelden op een rijtje samen gezet. Ziet uw website er anders uit in de ene browser dan in de andere, dan moet u ook even kijken of u bekend bent met de volgende tips.

Lees maar nauwkeurig door alle tips, haal er dan het nodige voor u uit en optimaliseer uw CSS layout.

CSS optimalisatie tips

  1. Spatie en puntkomma
    Gebruik in uw stijldeclaraties geen spatie tussen een eigenschap en een waarde voor die eigenschap. Als er maar 1 keer een eigenschap en een waarde in het declaratie blok worden aangegeven, hoeft er geen puntkomma te staan na de waarde. Verder het is ook helemaal niet nodig om na de eerste accolade en voor de tweede accolade een spatie te zetten.
    Voorbeeld 1:
    In plaats van dit
    p { font-size : 10px; }
    is dit beter
    p {font-size:10px}
    Voorbeeld 2:
    p {font-size:10px; text-align:justify; padding: 7px 0;}
  2. 0 (nul) is dezelfde als 0px, 0em, 0% enz.
    Als er wordt besloten om aan een eigenschap de waarde 0 (nul) te geven, dan is het echt overbodig om er nog em, px enz. bij te zetten. In dit geval blijft het altijd hetzelfde te betekenen.
    Voorbeeld:
    In plaats van dit
    p {padding:0px; margin:5px 0px 0px 10px;}
    gebruikt u dit
    p {padding:0; margin:5px 0 0 10px;}
  3. Selector zonder element type
    U kunt class- en id-selectors in uw stijldeclaratie zonder element type gebruiken.
    Voorbeeld:
    In plaats van dit
    div#wrapper {/* uw declaratie */}
    div.code {/* uw declaratie */}
    gebruikt u dit
    #wrapper {/* uw declaratie */}
    .code {/* uw declaratie */}
  4. Kleuren
    Als de kleuren van 3 paren uit 2 dezelfde cijfers bestaan, kunt u dat makkelijk verkorten door het 2-de cijfer van elk paar weg te halen.
    Voorbeeld:
    Dit
    color:#000000
    color:#3355FF
    color:#00CC55
    wordt
    color:#000
    color:#35F
    color:#0C5
  5. Groepering
    CSS kan ook verkort worden door selectors in één regel te groeperen. Vergeet niet over de komma die tussen elke selectors geplaatst moet worden.
    Voorbeeld:
    Dit is hetzelfde
    h1 {color:blue; font-weight:bold;}
    h2 {color:blue; font-weight:bold;}
    h3 {color:blue; font-weight:bold; font-style:italic;}
    h4 {color:red; font-weight:bold;}
    als dit
    h1, h2, h3, h4 {color:blue; font-weight:bold;}
    h3 {font-style:italic}
    h4 {color:red}
  6. Shorthand properties
    Optimaliseer uw CSS files door gebruik te maken van shorthand properties.
    Voorbeeld 1 (font):
    Zo'n CSS declaratie
    p {
    font-style: italic;
    font-weight: bold;
    font-variant:small-caps;
    font-size: 1em;
    line-height: 1.5em;
    font-family: verdana, arial, sans-serif;
    }
    kan op deze manier herschreven worden
    p {font:bold italic small-caps 1em/1.5em verdana, arial, sans-serif}
    Let op! In het geval als u Font Property Shorthand gaat gebruiken, moet u 2 simpele maar WEL belangrijke regels niet vergeten:

    Regel 1: De waardes voor font-size en font-family moeten altijd gedeclareerd zijn.

    Regel 2: De volgorde van properties moet als volgende zijn:

    • als eerste: font-style, font-weight en font-variant in willekeurige volgorde
    • daarna: font-size of font-size/line-height
    • als laatste: font-family
    Voorbeeld 2 (background):
    In plaats van dit
    .test {
    background-color:#99F;
    background-image:url(achtergrond.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:5px 5px;
    }
    is het beter om dit te gebruiken
    .test {background:#99F url(achtergrond.png) no-repeat fixed 5px 5px}
    Let op! Ook de volgorde hier is van belang! Gebruik dus altijd de volgende volgorde:
    1. background-color
    2. background-image
    3. background-repeat
    4. background-attachment
    5. background-position
    Voorbeeld 3 (padding, margin en border-width):
    Dit
    #v1 {padding-top:10px; padding-right:0; padding-bottom:15px; padding-left:7px;}
    is gelijk aan
    #v1 {padding:10px 0 15px 7px} /* top, right, bottom, left */
    U hoeft niet altijd alle 4 waardes doorgeven, bijvoorbeeld:
    #v2 {padding:10px 5px 15px} /* top, right & left, bottom */
    #v3 {border-width:10px 5px} /* top & bottom, right & left */
    #v4 {border-width:10px} /* top & right & bottom & left */
    Let op! Hier moet u ook de juiste volgorde niet vergeten:
    1. top
    2. right
    3. bottom
    4. left

    Dezelfde regel geldt zoals voor padding en margin als voor border.

    Voorbeeld 4 (border):
    In plaats van dit
    .v1 {border-width:2px; border-style:double; border-color:#333;}
    gebruik dit
    .v1 {border:2px double #333}
    Let op! Niet vergeten de volgende volgorde:
    1. border-width
    2. border-style
    3. border-color