CSS käyttöliittymä

CSS käyttöliittymä

Tässä luvussa opit seuraavat CSS-käyttöliittymäominaisuudet:

  • resize
  • outline-offset

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tämän ominaisuuden täysin.

Ominaisuus Chrome IE Firefox Safari Opera
resize 4.0 Ei tuettu 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS-sovitteleminen

resize Ominaisuus määrittää, tulisiko elementti soviteltavaksi käyttäjän toimesta (ja miten).

Tämä div-elementti voidaan sovitella käyttäjän toimesta!

Sovittele kokoa: napsauta ja vedä tämän div-elementin oikea alakulma.

Huomioitavaa:Internet Explorer ei tue resize-ominaisuutta.

Tässä esimerkissä käyttäjä voi sovitella vain <div>-elementin leveyttä:

Esimerkki

div {
  resize: horizontal;
  overflow: auto;
}

Kokeile itse

Tässä esimerkissä käyttäjä voi sovitella vain <div>-elementin korkeutta:

Esimerkki

div {
  resize: vertical;
  overflow: auto;
}

Kokeile itse

Tässä esimerkissä käyttäjä voi sovitella <div>-elementin korkeutta ja leveyttä:

Esimerkki

div {
  resize: both;
  overflow: auto;
}

Kokeile itse

Monissa selaimissa <textarea>-elementti on oletusarvoisesti sovitettavissa. Tässä käytämme resize-ominaisuutta poistamaan tämän sovitettavuuden:

Esimerkki

textarea {
  resize: none;
}

Kokeile itse

CSS reunanvarjon siirtymä

outline-offset Ominaisuus lisää tilaa reunaviivan ja elementin reunaviivan välille.

Tämä div:llä on 15px reunaviiva reunaviivan ulkopuolella.

Huomioitavaa:Reunaviiva ei ole sama kuin reunaviiva! Reunaviivat piirretään elementin reunaviivan ulkopuolelle ja ne voivat ristiriidassa muiden sisällön kanssa. Lisäksi reunaviiva ei ole osa elementin mittoja: elementin kokonaisleveys ja korkeus eivät ole vaikuttamatta reunaviivan leveyteen.

Tässä esimerkissä outline-offset-ominaisuutta käytetään lisäämään tilaa reunaviivan ja reunaviivan välille:

Esimerkki

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

Kokeile itse

CSS käyttöliittymäominaisuudet

Seuraavassa taulukossa luetellaan kaikki käyttöliittymäominaisuudet:

Ominaisuus Kuvaus
outline-offset Lisää tilaa ääriviivojen ja elementin reunaviivan välille.
resize Määrittää, voidaanko elementtiä käyttäjän toimesta muuttaa kokoa.