CSS gebruikersinterface

CSS gebruikersinterface

In dit hoofdstuk zult u de volgende CSS gebruikersinterface-eigenschappen leren:

  • resize
  • outline-offset

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Eigenschap Chrome IE Firefox Safari Opera
resize 4.0 Niet ondersteund 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Aanpassen

resize De eigenschap bepaalt of en hoe een element door de gebruiker kan worden aangepast.

Dit div-element kan door de gebruiker worden aangepast!

Aanpassen van de grootte: klik en sleep de rechterbenedenhoek van dit div-element.

Let op:Internet Explorer ondersteunt de resize-eigenschap niet.

Het volgende voorbeeld laat de gebruiker alleen toe om de breedte van het <div>-element aan te passen:

Voorbeeld

div {
  resize: horizontal;
  overflow: auto;
}

Probeer het zelf

Het volgende voorbeeld laat de gebruiker alleen toe om de hoogte van het <div>-element aan te passen:

Voorbeeld

div {
  resize: vertical;
  overflow: auto;
}

Probeer het zelf

Het volgende voorbeeld laat de gebruiker toe om de hoogte en breedte van het <div>-element aan te passen:

Voorbeeld

div {
  resize: both;
  overflow: auto;
}

Probeer het zelf

In veel browsers is <textarea> standaard aanpasbaar in grootte. Hier gebruiken we de resize-eigenschap om deze aanpasbaarheid uit te schakelen:

Voorbeeld

textarea {
  resize: none;
}

Probeer het zelf

CSS Outline Offset

outline-offset De eigenschap voegt ruimte toe tussen de contouren en de rand van het element.

Deze div heeft een contouren van 15px buiten de rand.

Let op:De contouren zijn verschillend van de rand! In tegenstelling tot de rand, worden de contouren buiten de rand van het element getekend en kunnen ze mogelijk over andere inhoud lopen. Bovendien is de contouren geen deel van de afmetingen van het element: de totale breedte en hoogte van het element worden niet beïnvloed door de breedte van de contouren.

De volgende voorbeeld gebruikt de outline-offset-eigenschap om ruimte tussen de rand en de contouren toe te voegen:

Voorbeeld

div.ex1 {
  margin: 20px;
  border: 1px solide zwart;
  outline: 4px solide rood;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solide zwart;
  outline: 5px gestippeld blauw;
  outline-offset: 5px;
}

Probeer het zelf

CSS gebruikersinterface-eigenschappen

De tabel hieronder geeft alle gebruikersinterface-eigenschappen weer:

Eigenschap Beschrijving
outline-offset Voegt ruimte toe tussen de outline en de rand van het element.
resize Bepaalt of een element van de gebruiker kan worden aangepast in grootte.