CSS användargränssnitt

CSS användargränssnitt

I detta kapitel kommer du att lära dig följande CSS-användargränssnittsattribut:

  • resize
  • outline-offset

Webbläsarstöd

Numrerna i tabellen anger den första webbläsarens version som fullständigt stöder detta attribut.

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

CSS Justering

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

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

Justera storlek: Klicka och dra ner på nederkanten av detta 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 konturavstånd

outline-offset Attributet lägger utrymme mellan konturlinjen och elementets kantram.

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

Observera:Konturlinjen skiljer sig från ramen! I motsats till ramen ritas konturlinjen utanför elementets kantram och kan överlappa annat innehåll. Dessutom är konturlinjen inte en del av elementets storlek: elementets totala bredd och höjd påverkas inte av konturlinjens bredd.

I följande exempel läggs det utrymme mellan kantlinjen och ramen genom att använda outline-offset-attributet:

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.