CSS codes ingekort (shorthand properties)

laadtijd verkorten door shorthandproperties te gebruiken
Je kunt er voor kiezen om al je css code helemaal uit te schrijven, maar er zijn verschillende korte
notaties mogelijk, waarmee je toch hetzelfde resultaat bereikt. De zogenaamde shorthand properties.
We zetten ze op een rij, zodat je website weer een beetje sneller wordt.

We gaan in op shorthandproperties voor de border, font, lijsten, background, margin en padding.

Shorthand properties voor border

Gebruik:

border: 1px solid black;

in plaats van

border-width: 1px;
border-style: solid;
border-color: black;

Gebruik:

border-right: 1px solid black;

in plaats van

border-right-width: 1px;
border-right-style: solid;
border-right-color: black;

Hierbij kun je ‘right’ vervangen voor left, top en bottom.

Shorthand properties voor font

Gebruik:

font: 1em/1.5em bold italic serif;

in plaats van

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif;

Overigens werkt deze methode alleen maar als je font-size en font-family ook gebruikt hebt.
Wanneer je deze twee vergeet werkt de regel niet. Wanneer je font-weight, font-style of font-variant niet
gebruikt, dan wordt automatisch de standaardwaarde overgenomen.

Shorthand properties voor lijsten

Gebruik:

list-style: disc inside url(plaatje.gif);

in plaats van

list-style-type: disc;
list-style-position: inside;
list-style-image: url(plaatje.gif);

Wanneer een onderdeel wordt weggehaald dan zal de standaardwaarde worden overgenomen.

Shorthand properties voor background

Gebruik:

background: #fff url(plaatje.gif) no-repeat top left;

in plaats van

background-color: #fff;
background-image: url(plaatje.gif);
background-repeat: no-repeat;
background-position: top left;

Ook hier worden weer de standaardwaarden gebruikt als er een onderdeel niet wordt benoemt.

Shorthand properties voor margin en padding

Er zijn een aantal verkorte manieren voor margin en padding. In het voorbeeld wordt margin gebruikt,
maar alle voorbeelden gelden ook voor padding.

Gebruik:

margin: 2px 3px 4px 5px /* boven, rechts, onder, links */
margin: 2px 3px 4px  /* boven, rechts en links, onder */
margin: 2px 3px /* boven en onder, rechts en links */
margin: 2px /* boven, onder, rechts en links tegelijk */

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.