Bij het schrijven van een CSS stylesheet is het belangrijk dat alles overzichtelijk blijft, het plaatsen van tab’s, om het overzichtelijk te houden zijn daarom erg belangrijk. Maar er is nog een mogelijkheid waarvan velen nog geen gebruik maken, terwijl deze mogelijkheid het aantal regels code drastisch terugdringt. Ik heb het hier over de “shorthand properties”. Als je consequent gebruik maakt van deze ingekorte code’s dring je het aantal regels terug, en dat maakt een stylesheet overzichtelijker, en het scheelt ook nog eens typ-werk.

Achtergrond

Wanneer een bepaald element een achtergrond krijgt kun je daarvoor meerdere regels in beslag nemen:

element {
  background-color: color || #hex || (rgb / % || 0-255);
  background-image: url(URL);
  background-repeat: repeat || repeat-x || repeat-y || no-repeat;
  background-position: X Y || (top||bottom||center) (left||right||center);
  background-attachment: scroll || fixed;
}

Maar zo kan het ook:

element {
  background: #000 url(afbeelding.png) repeat-x 2px 100px fixed;
}

Weglaten
In veel gevallen wordt bijvoorbeeld “background-attachment” niet opgenomen in een stylesheet, deze is ook in een shorthand propertie weg te laten, hou er dan echter wel rekening mee dat deze waarde dan op de standaard waarde wordt gezet, de standaard waarden zijn:

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

Lettertype

Bij een font gaan we op dezelfde manier te werk als bij een achtergrond, bij een font is het belangrijk dat je rekening houd met de waarden, wanneer een bepaalde waarde namelijk niet wordt ingegeven betekent dat, dat de desbetreffende waarde op de standaard waarde wordt gezet.

element {
  font-style: normal || italic || oblique;
  font-variant: normal || small-caps;
  font-weight: normal || bold || bolder || || lighter || (100-900);
  font-size: (getal+eenheid) || (xx-small - xx-large);
  line-height: normal || (getal+eenheid);
  font-family: naam,"meerdere namen";
}

Zoals ik bij de achtergrond al heb vermeld is het mogelijk om bij de shorthand propertie delen weg te laten, zoals ik net al zij is het bij een lettertype belangrijk om rekening te houden met de standaard waarden. De standaard waarden zijn:

element {
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: inherit;
  line-height: normal;
  font-family: inherit;
}

Met deze standaard waarden ziet de shorthand propertie er zo uit:
*inherit houd in dat de waarde wordt geërfd, ook wel inheritance.

element {
  font: normal normal normal inherit/normal inherit;
}

Rand

Bij een border zijn er drie waarden, deze zijn erg makkelijk om te toveren tot een shorthand propertie:
Een relatief onbekende mogelijkheid is de optie “outline” deze optie wordt slecht ondersteund door oudere browsers en wordt daarom weinig gebruikt, mocht je deze wel willen gebruiken, hij werkt precies hetzelfde als de border-shorthand alleen dan wordt “border-” dus vervangen door “outline-”.

element {
  border-width: getal+eenheid;
  border-style: none || hidden || dotted || dashed || solid || double || groove || ridge || inset || outset || inherit;
  border-color: color || #hex || (rgb / % || 0-255);
}

Wanneer hier een shorthand propertie van wordt gemaakt ziet dat er vanzelfsprekend zo uit:

element {
  border: 1px solid #000;
}

Marge en padding

De makkelijkste shorthand propertie’s zijn die van de margin’s en padding’s. Het enige wat je hierbij moet onthouden is dat je altijd met de waarde van de top begint, en vervolgens met de klok meegaat. Dus: boven, rechts, onder, links. Normaal gesproken zou het er zo uitzien:

element {
  margin-top: getal+eenheid;
  margin-right: getal+eenheid;
  margin-bottom: getal+eenheid;
  margin-left: getal+eenheid;
}

Wanneer de vier waarden allemaal verschillend zijn ziet de shorthand propertie er als volgt uit:

element {
  margin: 1px 2px 3px 4px;
}

Wanneer de boven en onderkant hetzelfde zijn, en de rechter en linker kant ook kun je dit beperken tot:

element {
  margin: 1px 2px;
}

Wanneer alle waarden hetzelfde zijn wordt het:

element {
  margin: 1px;
}

Lijst

Ook voor het stijlen van een lijst is een shorthand propertie beschikbaar, de standaard waarden zijn:

element {
  list-style-type: disc;
  list-style-position: outside;
  list-style-image  none;
}

Wanneer deze wordt ingekort ziet hij er als volgt uit:

element {
  list-style: square inside url(afbeelding.png);
}

Succes

Succes met het gebruik maken van deze handige shorthand propertie’s. Mocht ik er nog één vergeten zijn, laat het me dan weten.
Voor de css liefhebbers: het volgende artikel wat in de planning staat is een artikel over “faux columns”.