Oftewel, hoe schrijf ik evenveel CSS met minder.
Het gaat erom dat je eenvoudiger CSS kan schrijven door de in CSS toegelaten verkortingen te gebruiken.

Dat je met CSS de downloadtijd van je website aanzienlijk verkort is algemeen geweten, maar dat je nu zelf nog de Css kunt verkorten door gebruik te maken van de CSS shorthand properties schijnt niet zo een algemene wetenswaardigheid te zijn.

Fonts

Gebruik dit:

font: 1em/1.5em bold italic serif

in plaats van dit:

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

Deze werkwijze zal alleen dan werken als je font-size & font-family gebruikt, anders zal de regel geen nut hebben en niet worden gebruikt. Wens je geen gebruik te maken van font-weight font-style of font-varient, zullen deze waarden altijd naar normaal worden gezet, misschien iets om rekening mee te houden.

Background

Gebruik dit:

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

In plaats van dit:

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

Als je ook maar een van deze waarden niet meegeeft zal elke browser dezelfde standaard waarden toekennen, dat zou dan altijd achtergrondkleur wit, een eventuele afbeelding zal zichzelf herhalen horizontaal en vertikaal, positie van de afbeelding zal altijd top left zijn.

Lists

Gebruik dit:

list-style: disc outside url(image.gif)

In plaats van dit:

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Ook hier zullen bij uitblijven van declaratie van een of meerder waarden de standaard waarden worden gebruikt.

Margin & padding

Hierbij zijn verschillende mogelijkheden, naargelang het aantal dezelfde waarden die worden gebruikt bij margin & padding.

Gebruik dit voor 4 verschillende waarden:

margin: 2px 1px 3px 4px; /*top, right, bottom, left*/

In plaats van dit:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Gebruik dit voor 3 verschillende waarden:

margin: 5em 1em 3em; /*top, right & left, bottom*/

In plaats van dit:

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Gebruik dit voor 2 verschillende waarden:

margin: 5% 1%; /*top & bottom, right & left*/

In plaats van dit:

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

Gebruik dit voor 1 waarde:

margin: 0; /*top & bottom & right & left*/

In plaats van dit:

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

Dezelfde regel geldt ook voor padding en border.

Borders

Gebruik dit:

border: 1px black solid

In plaats van dit:

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

of….

Gebruik dit:

border-right: 1px black solid

In plaats van dit:

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

Natuurlijk geldt dezelfde regel ook voor border-bottom, border-top en border-left

Color

Gebruik dit:

color: #FFF
color: #69F
color: #900

In plaats van dit:

color: #FFFFFF
color: #6699FF
color: #990000

Als er telkens een paar van twee gelijke waarden is 6699EE dan kan deze waarde worden ingekort door telkens de tweede waarde weg te laten 69E.

Voorbeelden

#FFFFFF wordt #FFF
#990000 wordt #900
#6633FF wordt #63F
#00FF99 wordt #0F9

etc….