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 säätäminen

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

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

Säädä kokoa: napsauta ja vedä tämän div-elementin oikean reunan oikea yläkulma.

Huomioitavaa:Internet Explorer ei tue resize-ominaisuutta.

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

Esimerkki

div {
  resize: horizontal;
  overflow: auto;
}

Kokeile itse

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

Esimerkki

div {
  resize: vertical;
  overflow: auto;
}

Kokeile itse

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

Esimerkki

div {
  resize: both;
  overflow: auto;
}

Kokeile itse

Monissa selaimissa <textarea>-elementti on oletusarvoisesti säädettävissä. Tässä käytämme resize-ominaisuutta estääksemme tämän säädettävyyden:

Esimerkki

textarea {
  resize: none;
}

Kokeile itse

CSS-reunaviivan siirtymä

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

Tässä div-elementissä on 15px reunaviivaa reunaviivan ulkopuolella.

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

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 muokata.