CSS brugergrænseflade

CSS brugergrænseflade

I dette kapitel vil du lære følgende CSS brugergrænsefladeegenskaber:

  • resize
  • outline-offset

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Egenskab Chrome IE Firefox Safari Opera
resize 4.0 Ikke understøttet 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Justering

resize Egenskaben definerer, om elementet skal (og hvordan) justeres i størrelse af brugeren.

Dette div-element kan justeres i størrelse af brugeren!

Justering af størrelse: Klik og træk i højre nederste hjørne af denne div-element.

Bemærk:Internet Explorer understøtter ikke resize-egenskaben.

Følgende eksempel tillader kun brugeren at justere bredden på <div>-elementet:

Eksempel

div {
  resize: horizontal;
  overflow: auto;
}

Prøv det selv

Følgende eksempel tillader kun brugeren at justere højden på <div>-elementet:

Eksempel

div {
  resize: vertical;
  overflow: auto;
}

Prøv det selv

Følgende eksempel tillader brugeren at justere højden og bredden af <div>-elementet:

Eksempel

div {
  resize: both;
  overflow: auto;
}

Prøv det selv

I mange browsere er <textarea> som standard justerbar. Her bruger vi resize-egenskaben til at deaktivere denne justerbarhed:

Eksempel

textarea {
  resize: none;
}

Prøv det selv

CSS konturafvigelse

outline-offset Egenskaben tilføjer plads mellem kantlinjen og elementets kantkant.

Denne div har en kantlinje på 15px uden for kantkanten.

Bemærk:Kantlinjen er forskellig fra rammen! I modsætning til rammen tegnes kantlinjen uden for elementets kant, og den kan overlægges andet indhold. Samtidig er kantlinjen ikke en del af elementets størrelse: elementets samlede bredde og højde påvirkes ikke af kantlinjens bredde.

Følgende eksempel bruger outline-offset-egenskaben til at tilføje plads mellem kantlinjen og rammen:

Eksempel

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;
}

Prøv det selv

CSS brugergrænsefladeegenskaber

Følgende tabel viser alle brugergrænsefladeegenskaber:

Egenskab Beskrivelse
outline-offset Tilføjer plads mellem konturen og elementets kant.
resize Bestemmer, om et element kan justeres i størrelse af brugeren.