CSS -gebruikersinterface
CSS-gebruikersinterface
In dit hoofdstuk leert u over de volgende CSS-gebruikersinterface-eigenschappen:
resizeoutline-offset
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
| Property | |||||
|---|---|---|---|---|---|
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |
CSS formaat wijzigen
De resizeeigenschap specificeert of (en hoe) een element door de gebruiker moet worden vergroot/verkleind.
Dit div-element kan door de gebruiker worden vergroot of verkleind!
Formaat wijzigen: Klik en sleep de rechterbenedenhoek van dit div-element.
In het volgende voorbeeld kan de gebruiker alleen de breedte van een <div>-element aanpassen:
Voorbeeld
div
{
resize: horizontal;
overflow: auto;
}
In het volgende voorbeeld kan de gebruiker alleen de hoogte van een <div>-element wijzigen:
Voorbeeld
div
{
resize: vertical;
overflow: auto;
}
In het volgende voorbeeld kan de gebruiker zowel de hoogte als de breedte van een <div>-element aanpassen:
Voorbeeld
div
{
resize: both;
overflow: auto;
}
In veel browsers is <textarea> standaard aanpasbaar. Hier hebben we de eigenschap resize gebruikt om de aanpasbaarheid uit te schakelen:
Voorbeeld
textarea {
resize: none;
}
CSS-overzichtsverschuiving
De outline-offseteigenschap voegt ruimte toe tussen een omtrek en de rand of rand van een element.
Let op: Omtrek wijkt af van randen! In tegenstelling tot de rand wordt de omtreklijn buiten de rand van het element getekend en kan deze andere inhoud overlappen. Ook maakt de omtrek GEEN deel uit van de afmetingen van het element; de totale breedte en hoogte van het element wordt niet beïnvloed door de breedte van de omtrek.
In het volgende voorbeeld wordt de outline-offseteigenschap gebruikt om ruimte tussen de rand en de omtrek toe te voegen:
Voorbeeld
div.ex1 {
margin: 20px;
border:
1px solid black;
outline: 4px solid red;
outline-offset: 15px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
}
Eigenschappen CSS-gebruikersinterface
De volgende tabel bevat alle eigenschappen van de gebruikersinterface:
| Property | Description |
|---|---|
| outline-offset | Adds space between an outline and the edge or border of an element |
| resize | Specifies whether or not an element is resizable by the user |