1. CSS font shorthand regel

Als je font opmaakt doe je het misschien op deze manier:


font-weight: bold;

font-style: italic;

font-variant: small-caps;

font-size: 1em;

line-height: 1.5em;

font-family: verdana,sans-serif

Dit in in principe overbodig want je kunt de shorthandmethode gebruiken.:


font: bold italic small-caps 1em/1.5em verdana,sans-serif.

Kijk dat is een stuk beter.

Pas op : Dit werkt alleen als je én de font-size én de font-family defeniëert. De Font-family moet altijd aan het eind van de regel staan, met de fonr-size daar direct voor. Ook is het zo dat als je font-weight, font-style, or font-variant defeniëert dan krijgen deze hun default waarde.

2. Twee classes samen

Normaal zou je alle opmaak van in 1 class zetten. Maar je kunt ook een aantal generieke classes maken en de dan samen gebruiken.

Bijvoorbeeld:


<p class="text side">...</p>

Door deze 2 classen samen te gebuiken (gescheiden door een spatie en niet door een komma) wordt de waarde van beide classen aan de tag gegeven. Mochten de c;assen overlappende waarden hebben wordt de waarde van de laatst genoemde class gebruikt.

3. CSS border default value

Als je aan een element een rand (border) wilt geven zou je normaal gesproken de kleur, breedte en stijl defeniëren.

Bjivoorbeeld :


border: 3px solid #000

Creëerd een solid zwarte border van 3px. Maar je hoeft hier maar 1 waarde in te vullen.

Als je namenlij alleen maar border: solid; invoerd dan worden voor de overig waarden de default waarden gebruikt. Namelijk een medium dikte (3/4px) en de kleur die voor de tekst in dat element is bepaalt.

4. CSS document for printing

Je ziet vaak op paginas een ‘printervriendelijke”versie. Maar dit is in principe overbodig. Je kunt namelijk een 2e css-document aan een pagina hangen welke zich bezig houd met de uitsluitend met het printgedrag.

<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen”/>

<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print”/

De eerste regel haalt de code op als het op een scherm wordt weergegeven en de 2e stylesheet wordt gebruikt voor het printen.

Dus welke code moet ik in het 2e css-document zetten ?

Om dit te bepalen maak je een lege pagina (of een pagina uit je site) en hang je dit docoment aan. Nu code je net zo lang totdat je het gewenste printresultaat op het scherm ziet. Je zult zeker gebruik willen maken van display:none. Bijvoorbeeld voor navigatie, decoratieve elementen en alle andere niet essentiële elementen. Voor meer advies ga naar : Print Different. Waar ook informatie over andere media, voor welke je een styleheet kunt maken, staat.

5. Image replacement

Het is altijd beter om HTML te gebruiken voor tekst ipv een afbeelding. Dit geeft een veel betere downloadsnelheid en heeft accessebility voordelen. Maar als je echt een bepaald lettertype wilt gebruiken en je gebruikers dat lettertype waarschijnlijk niet heeft, tja dan heb je geen andere keuze dan een afbeelding te gebruiken.

Je wilt bijvoorbeeld ‘Buy widgets’ als de kop van elke pagina. Je verkopt widgets en wilt dat zoekmachines jou pagina vinden. Tevens wil je een lettertype gebruiken die waarschijnlijk alleen jij hebt. Dus gebruik je een afbeelding:


<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

Dit kan wel maar zoekmachines hechten minder warde aan alt-teksten. Dit omdat veel webmasters hierin veel steekwoorden zetten om hun site naar boven te halen in zoekmachines. Dus het alternatief is :


<h1>Buy widgets</h1>

Nu kun je natuurlijk niet je eigen lettertype gebruiken. Dus om dit probleem op te lossen kun je het volgende doen.


h1

{

background: url(widget-image.gif) no-repeat;

height: image height

text-indent: -2000px

}

Vul ipv “image height” de hoogte van je afbeelding in (b.v. 85px)! De afbeelding met je eigen lettertype wordt nu afgebeeld en de eigelijke tekst is netjes aan de kant gezet., 2000px aan de linkerkant van het beeldscherm. Pas op !! deze regel kan wel een voor problemen zorgen bij mensen die vanwege toegankelijkheid het tonen van afbeeldingen hebben uitgeschakelt.

6. CSS box model hack alternative

De box model hack wordt gebruikt om rendering-problemen van pre-IE 6 browsers te verhelpen, waarbij de padding en de border zijn ingevoegd ipv toegevoegd. Bijvoorbeeld : om de dimensies van een box te bepalen gebruik je bijvoorbeeld deze CSS (op #box)


 {

width: 100px;

border: 5px;

padding: 20px

}

… en deze regel zou gelden voor …


<div id="box">...</div>

Dit betekend dat de totale breedte van de box 150px is (100px breedte + twee 5px border + twee 20px paddings) in alle browsers behalve de pre IE 6. Want in deze browsers zou de totale breedte maar 100px zijn waarbij de border en de padding ingevoegd zijn. Je kunt hiervoor de boxmodel-hack gebruiken, maar dit kan erg slordig worden.

Een simpel alternatief is :


#box

{

width: 150px

}

#box div

{

border: 5px;

padding: 20px

}

En de nieuwe HTML zou zijn …


<div id="box"> <div>..</div></div>

Tada .. ongeacht de browser is de box altijd 150px