Vanaf vandaag zul je hier elke zondag op Skindo een nieuwe webtip vinden, een simpele tip die erg nuttig kan zijn voor iedereen die bezig is met het ontwikkelen van zijn/haar website.

Deze week gaan we aan de slag met CSS. Vooral de wat grotere websites hebben vaak te kampen met zeer grote lappen CSS code, was niet echt bevordelijk is voor de laadtijd van je pagina en ook nog eens de overzichtelijk beïnvloedt. Wat veel mensen niet weten is dat je bepaalde CSS elementen makkelijk kunt inkorten. We zullen er hieronder enkele toelichten.

Deze webtip vereist enige kennis van CSS en werkt met alle browsers.

Margin & Padding

We beginnen met de CSS eigenschappen 'margin' en 'padding'. Normaal zou je deze als volgt kunnen schrijven.

.class {
margin-top: 10px;
margin-left: 5px;
margin-right: 15px;
margin-bottom: 20px;
}

Bekijk nu het onderstaande stukje code eens, zoals je ziet is het bovenstaande ook in één regel te schrijven. De eerste waarde komt overeen met 'margin-top', de tweede met 'margin-right', de derde met 'margin-bottom' en de laatste met 'margin-left'.

.class {
margin: 10px 15px 20px 5px;
}

Samengevat kunnen we dus stellen dat de 'lange' code kan worden ingekort tot één regel: 'margin: boven rechts onder links'. Hetzelfde principe kun je ook toepassen op de padding-eigenschap.

Kleuren

Het klinkt misschien vreemd, maar ook kleurcodes kunnen vaak worden ingekort. Voor we hier naar gaan kijken, kijken we eerst hoe deze kleurcodes zijn opgebouwd. Een kleurcode (hex code) is opgebouwd volgens het volgende principe:

#hoeveelheid rood, hoeveelheid groen, hoeveelheid blauw

Waarbij elke kleur twee 'codes' krijgt. Puur rood heeft bijvoorbeeld de volgende hex code: #FF0000 en groen: #00FF00. Het inkorten van kleurcodes kan echter alleen bij de zogenaamde 'web safe' kleuren. Dit zijn, simpel gezegd, kleuren waarbij de beiden kleurcodes van één kleur hetzelfde zijn. Wellicht klinkt dit wat ingewikkeld, dus kijk eens naar het onderstaande voorbeeld:

color: #000000;
color: #3300CC;
color: #CC6600;

Verkorte versie:

color: #000;
color: #30C;
color: #C60;

Vanzelfsprekend is de 'niet web safe' kleur: #3B48C5 niet in te korten. Zou je deze kleurcode namelijk inkorten dan krijg je #34C, wat niet meer overeenkomt met de originele kleurcode, maar met #3344CC, wat een geheel andere kleur is.

Achtergronden

Ook achtergrond-eigenschappen zijn makkelijk in te korten tot één regel. Kijk maar eens naar het volgende voorbeeld.

.class {  
background-color: #FFFFFF;  
background-image: url('image.png');  
background-repeat: no-repeat;  
background-position: top left;   
}

En de ingekorte versie, waarbij de eerste waarde overeenkomt met 'background-color', de tweede met 'background-image', de derde met 'background-repeat' en de laatste met 'background-position':

.class {  
background: #FFF url('image.png') no-repeat top left;  
}

Zoals je ziet kun je hier ook weer de verkorte kleurcodes in gebruiken.

Randen (borders)

Tot slot bespreken we de randen, oftewel de 'borders'. Normaal zouden we het volgende gebruiken, willen we ergens een leuk randje omheen hebben:

.class {
border-color: #000;
border-style: solid;
border-top: 1px;
border-right: 2px;
border-bottom: 3px;
border-left: 4px;
}

Dit kunnen we inkorten tot het volgende:

.class {
border: solid #000;
border-width: 1px 2px 3px 4px;
}

Willen we alle randen dezelfde dikte (width) geven, dan is dit zelfs nog verder in te korten tot bijvoorbeeld:

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

Of indien we alleen links van het element een randje willen geven

.class {
border-left: 1px solid #000;
}

En dit was de eerste webtip op Skindo! Mocht iets je toch niet duidelijk zijn of heb je een andere vraag over CSS (of welke web-taal dan ook), laat het dan weten in de reacties of stel je vraag op het forum. En volgende week hebben we uiteraard weer een geheel nieuwe webtip.