CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

CSS laajennukset

Gecko-laajennukset (Firefox, Mozilla)

Nk. Gecko-renderointimoottoriin perustuvilla selaimilla (Firefox, Mozilla, Netscape) on Internet Explorin tavoin oma CSS-laajennuksensa, nk. Mozilla CSS Extensions. Mozilla CSS-laajennukset tunnistaa "-moz-"-alkuisesta ominaisuuden nimestä.

Useimmat Mozilla-laajennuksista jäljittelevät CSS 3:n tulevia piirteitä. Sitä mukaa kun Gecko-pohjaisten selainten tuki (työn alla olevalle) CSS 3 määrittelylle etenee, kehittäjiä rohkaistaan siirtymään Mozilla-laajennuksista CSS 3 ominaisuuksien käyttöön. Tässä täytyy kuitenkin ottaa huomioon, että CSS 3 määrittely on vasta luonnos asteella ja moni asia voi muuttua ennen CSS3:n standardisointia.

Pyöristetyt kulmat

Pyöristettyjen kulmien toteuttamiseen HTML/ XHTML-dokumenteissa on olemassa useita eri ratkaisuja, joista jokainen perustuu enemmän tai vähemmän kuvien hyödyntämiseen. CSS 3:n esittämä ominaisuus border-radius, ja sitä vastaavan Mozilla-laajennuksen -moz-border-radius avulla asia kuitenkin voi muuttua huomattavasti:

div#boksi {
  -moz-border-radius: 2em;
  border-radius: 2em; 
}

Läpinäkyvyys

Läpinäkyvyyden toteuttaminen Gecko-pohjaisissa selaimissa voidaan toteuttaa ominaisuudella -moz-opacity, tai sitä vastaavalla CSS 3 ominaisuudella opacity. Ominaisuuden arvo on luku välillä 0 (täysin läpinäkyvä) ja 1 (ei läpinäkyvyyttä). Esim. edellisellä sivulla toteutun Internet Explorerin filter-ominaisuuden voi toteuttaa Gecko-alustalla seuraavasti:

body {
  background-image:url(/kuvat/tausta.jpg);
  background-repeat:repeat;
}

input.lahetaButton {
  -moz-opacity: 0.5;
  opacity = 0.5;
}

Tutustu artikkelin muihin osiin:
»»» CSS »»»Internet Explorer-selainten CSS-laajennukset
»»» CSS »»»Mozilla / Gecko-selainten CSS-laajennukset

CSS-opas

CSS laajennukset

Gecko-laajennukset (Firefox, Mozilla)

Pyöristetyt kulmat

Läpinäkyvyys

Tallenna tämä sivu kirjanmerkkeihin!