CSS användargränssnitt

CSS användargränssnitt

I denna kapitel kommer du att lära dig följande CSS användargränssnittsegenskaper:

  • resize
  • outline-offset

Webbläsarstöd

Tal i tabellen anger den första webbläsarversion som fullständigt stöder detta attribut.

Egenskap Chrome IE Firefox Safari Opera
resize 4.0 Ej stödd 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Justering

resize Egenskapen specificerar om och hur ett element ska kunna justeras i storlek av användaren.

Denna div-element kan justeras i storlek av användaren!

Justera storlek: Klicka och dra i högra nedre hörnet av denna div-element.

Observera:Internet Explorer stöder inte resize-attributet.

I följande exempel tillåter vi endast användaren att justera bredden på <div>-elementet:

Exempel

div {
  resize: horizontal;
  overflow: auto;
}

Prova själv

I följande exempel tillåter vi endast användaren att justera höjden på <div>-elementet:

Exempel

div {
  resize: vertical;
  overflow: auto;
}

Prova själv

I följande exempel tillåter vi användaren att justera höjden och bredden på <div>-elementet:

Exempel

div {
  resize: both;
  overflow: auto;
}

Prova själv

I många webbläsare är <textarea> som standard justerbar i storlek. Här använder vi resize-attributet för att inaktivera denna skalbarhet:

Exempel

textarea {
  resize: none;
}

Prova själv

CSS konturflyttning

outline-offset Egenskapen lägger till utrymme mellan konturen och elementets kantram.

Denna div har en kontur på 15px utanför ramkanten.

Observera:Kontur är annorlunda än ram! Till skillnad från ramen ritas konturlinjen utanför elementets ram och kan överlappa annat innehåll. Dessutom är konturen inte en del av elementets storlek: elementets totala bredd och höjd påverkas inte av konturlinjens bredd.

I följande exempel används outline-offset-attributet för att lägga till utrymme mellan ramen och konturen:

Exempel

div.ex1 {
  margin: 20px;
  border: 1px solid svart;
  outline: 4px solid röd;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid svart;
  outline: 5px streckad blå;
  outline-offset: 5px;
}

Prova själv

CSS användargränssnittsegenskaper

Följande tabell visar alla användargränssnittsegenskaper:

Egenskap Beskrivning
outline-offset Lägg utrymme mellan konturen och elementets kant.
resize Definiera om element kan justeras i storlek av användaren.