CSS-kikat, tilastointi ja kertaus

Luentotaltiointi
CSS-kikkoja
CSS3
- CSS3:n uutuudet
- Muutamia CSS3-esimerkkejä
WWW-palvelimen tilastot
Kertaus

Luennolla käydään läpi niitä asioita mitkä ovat jääneet vähemmälle huomiolle kurssin aikana.

Luentotaltiointi

CSS-kikkoja

Jos haluat jonkin CSS-ominaisuuden toimivan vain muilla selaimilla kuin IE:llä, käytä valitsinta >, joka valitsee tietyn elementin lapsielementin. Valitsin ei toimi IE:ssä ja tekstin yhteenkirjoittamalla IE jättää nämä määrittelyt varmasti huomiotta. Merkitse tyylitiedostoon esimerkiksi seuraavasti:

html>body>.notforie {
/* Tänne määritykset, joita käytetään välittömästi body-elementin sisällä
olevassa elementissä, jonka luokka on notforie */
}
p>strong {
/* Tänne määritykset välittömästi tavallisen kappaleen sisällä olevalle
strong-elementille, jota ei haluta näyttää IE:ssä */
}

Lisätietoa

CSS3

CSS3 on tekeillä oleva uusin versio CSS-suosituksesta. CSS3:ssa ominaisuudet jaetaan moduuleihin joista ohjelmat voivat valita mitä moduuleja haluavat tukea. Moduuleja on yli 30 kappaletta.

CSS3:n uutuudet

Tärkeimmät uutuudet mitä CSS3 tulee ehkä tuomaan mukanaan ovat:

Ominaisuuksien jakaminen moduuleihin
Pyöreät kulmat, varjostus ja kuvista muodostetut rajat
Esitystasot joilla voi määrätä näytetäänkö enemmän vai vähemmän tietoja riippuen halutusta esitystasosta (Tavallinen WWW-sivu vs. kalvo)
SVG yhdistyy tiukemmin CSS:ään
Matemaattisten merkintöjen muotoilu
Uusia valitsimia mm. mahdollisuus valita elementti sen sisältämän tekstin perusteella
Lisäominaisuuksia tekstin muotoilemiseen
Tapahtumankäsittely
Nimiavaruuslaajennukset
Sarakelayout
Lisää ominaisuuksia kirjasinten ulkoasun muotoiluun
Ääniefektit
Speech-mediatyyppi

Muutamia CSS3-esimerkkejä

/* Merkitään aktiivinen lomake-elementti */
input[type="text"]:focus, textarea:focus { border-color: #FC0; }

/* Merkitään sisäisen linkin kohde */
body *:target { border-bottom: 1px dotted; }

/* Muotoillaan sisäiset linkit poikkeavasti. Riittääkö pelkkä alleviivaus? */
a:link[href^="#"] {
        color: black;
}


a:link[href^="mailto:"] {
        text-decoration: none;
}

print-mediassa:

a:link:after {
        content: " <" attr(href) "> ";
        color: silver;
        font-family: "Courier New", Courier, monospace;
        font-size: smaller;
}

a:link[href^="/"]:after {
        content: " <http://appro.mit.jyu.fi" attr(href) "> ";
}

a:link[href^="#"] {
        text-decoration: none;
}

a:link[href^="#"]:after {
        content: "";
}