Short properties is een methode om je css code in te korten. Wat weer regels bespaart. Dus ook load waar je website uiteindelijk weer wat sneller mee word.
Er zijn een aantal korte notaties mogelijk waar je precies hetzelfde mee bereikt. Ik zal een paar simpele voorbeelden noemen en uitleggen.
Ik ga in op shorthandproperties voor de border, font, lijsten, background, margin en padding.

Shorthand properties voor border
Voorbeeld:

	Code | Selecteer Alles

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

Ipv bovenstaande code kan je ook de volgende kiezen:

	Code | Selecteer Alles

1 border: 1px solid black;

Hier komen nog een aantal mooie voorbeelden.
Eerst de uitgebreidde methode, daarna de shorthand methode.

	Code | Selecteer Alles

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

	Code | Selecteer Alles

1 border-right: 1px solid black;

Shorthand properties voor font

	Code | Selecteer Alles

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

	Code | Selecteer Alles

1 font: 1em/1.5em bold italic 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

	Code | Selecteer Alles

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

	Code | Selecteer Alles

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

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

Shorthand properties voor background

	Code | Selecteer Alles

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

	Code | Selecteer Alles

1 background: #fff url(plaatje.gif) no-repeat 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.

	Code | Selecteer Alles

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

	Code | Selecteer Alles

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

	Code | Selecteer Alles

1 margin: 2px 3px /* boven en onder, rechts en links */

	Code | Selecteer Alles

1 margin: 2px /* boven, onder, rechts en links tegelijk */

Er werd nog geen reactie geplaatst.