CSS användargränssnitt
- Föregående sida CSS flerkolonner
- Nästa sida CSS variabler
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; }
I följande exempel tillåter vi endast användaren att justera höjden på <div>-elementet:
Exempel
div { resize: vertical; overflow: auto; }
I följande exempel tillåter vi användaren att justera höjden och bredden på <div>-elementet:
Exempel
div { resize: both; overflow: auto; }
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; }
CSS konturavstånd
outline-offset
Attributet lägger utrymme mellan konturlinjen och elementets kantram.
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; }
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. |
- Föregående sida CSS flerkolonner
- Nästa sida CSS variabler