CSS brugergrænseflade

Indholdsfortegnelse

CSS brugergrænseflade

I dette kapitel lærer du om følgende egenskaber for CSS-brugergrænsefladen:

resize
outline-offset

Browser support

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

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 Ændring af størrelse

Egenskaben resize angiver, om (og hvordan) et element skal kunne ændres af brugeren.

This div element is resizable by the user!

To resize: Click and drag the bottom right corner of this div element.

Følgende eksempel lader brugeren ændre størrelsen på kun bredden af et <div>-element:

Eksempel

div
{
   
resize: horizontal;
   
overflow: auto;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

Følgende eksempel lader brugeren kun ændre størrelsen på et <div>-element:

Eksempel

div
{
   
resize: vertical;
  overflow: auto;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: vertical;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the height of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

Følgende eksempel lader brugeren ændre størrelsen på både højden og bredden af et <div>-element:

Eksempel

div
{
   
resize: both;
   
overflow: auto;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

I mange browsere kan <textarea> som standard ændres størrelse. Her har vi brugt egenskaben resize til at deaktivere størrelsesændringen:

Eksempel

textarea {
  resize: none;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style> 
textarea#test {
   resize: none;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>

&lt;textarea id="test">Textarea - Not resizable&lt;/textarea>
<br><br>

&lt;textarea>Textarea - Resizable (default)&lt;/textarea>

</body>
</html>

CSS Outline Offset

Egenskaben outline-offset tilføjer mellemrum mellem en disposition og kanten eller kanten af et element.

This div has an outline 15px outside the border edge.

Bemærk: Omrids adskiller sig fra grænser! I modsætning til grænsen er omridset tegnet uden for elementets grænse og kan overlappe andet indhold. Det er også omridset IKKE en del af elementets dimensioner; elementets samlede bredde og højde påvirkes ikke af omridsets bredde.

Det følgende eksempel bruger egenskaben outline-offset til at tilføje plads mellem grænsen og omridset:

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 →

<!DOCTYPE html>
<html>
<head>
<style> 
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;
} 
</style>
</head>
<body>
<h1>The outline-offset Property</h1>

<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>

<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>

</body>
</html>

Egenskaber for CSS-brugergrænseflade

Følgende tabel viser alle egenskaber for brugergrænsefladen:

outline-offset: Tilføjer mellemrum mellem en kontur og kanten eller kanten af et element
resize: Angiver, om et element kan ændres størrelse af brugeren