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

Internet Explorer laajennukset

"Microsoft Cascading Style Sheets (CSS) extensions" on Microsoftin luoma CSS-laajennus Internet Explorer-selainta varten. Ominaisuudet toimivat Internet Explorerin versiossa 5.5 ja uudemmissa, sekä osa Opera-selaimen versioissa 6 ja uudemmat. Alla esitellään muutama keskeisin / yleisimmin käytetty laajennus

Ominaisuuden behaviour käyttöä on tarkasteltu CSS ja JavaScript -artikkelissa.

IE-spesifisten laajennusten upottamisessa HTML / XHTML-dokumenttiin kannattaa hyödyntää nk. ehdollisia kommentteja.

Vierityspalkin värin hallinta

Vierityspalkin värin hallintaan on tarjolla 8 eri ominaisuutta, jotka IE:n lisäksi toimivat myös Opera-selaimessa.

body {
  scrollbar-face-color:#EBF5FF;
  scrollbar-base-color:#EBF5FF;
  scrollbar-arrow-color:#666666;
  scrollbar-track-color:#F3F3F3;
  scrollbar-shadow-color:#EBF5FF;
  scrollbar-highlight-color:#EBF5FF;
  scrollbar-3dlight-color:#78AAFF;
  scrollbar-darkshadow-Color:#78AAFF;
}

Elementin zoomaus

Ominaisuuden zoom avulla on mahdollista suorittaa sisällön zoomaus haluttuun tarkastelukokoon. Esim. kuvan tarkasteleminen 20% koossa tapahtuu yksinkertaisesti komennolla

img.pikkukuva {zoom: 20%}

Tehosteet

Moni MS FrontPagella työskennellyt tunnistaa termin siirtymätehosteet. Kyseessä on joukko tehoste-efektejä, joiden avulla voidaan hallita mm. elementin esittämistapaa (mm. wipe-in,wipe-out,zigzag), läpinäkyvyyttä ja useita muita piirteitä.

CSS-laajennuksessa näitä hallitaan ominaisuudella filter, jolle annetaan arvoksi nk. :progid:DXImageTransform.Microsoft -kokoelman ominaisuuksia. Kaikkiaan erilaisia arvo-yhdistelmiä on useita kymmeniä, mutta alla esimerkkinä eräs helpoimmista eli läpinäkyvyys.

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

input.lahetaButton {
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

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