CSS-kikat, CSS3, sivuston testaaminen ja kertaus

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

Luentotaltiointi

www12.mp3 16M
www12.wmv 46M

CSS-kikkoja

Seuraavilla toimenpiteillä voidaan kiertää eri selainten css-ongelmia ja luoda toiminnallisuutta sivustolle.

Netscapen CSS-ongelmat

Jossain vanhoissa koneissa saattaa olla vielä selaimena Netscape 4 Communicator. Netscape 4.X:n CSS-tuki on ikävän buginen. CSS-koodi saattaa Netscapessa aiheuttaa sivun muuttumisen käyttökelvottomaksi. Helpoiten ongelmat voidaan kiertää määrittelemällä Netscapella haitallisiksi huomatut CSS-määritykset erilliseen CSS-tiedostoon ja liittämällä se import-komennolla varsinaiseen CSS-tiedostoon. Netscape 4.X ei ymmärrä import-komentoa joten ongelmalliset CSS-määritykset jäävät siltä näkemättä. Sivun ulkoasu tietysti vähän kärsii Netscape 4.X:n käyttäjillä mutta pääasiahan on kuitenkin sivun sisältö. Esimerkki CSS-koodin piilottamisesta Netscape 4.X:ltä:

HTML-tiedosto

<head>
<link rel="StyleSheet" href="netscape.css" type="text/css" media="screen" />
<link rel="StyleSheet" href="main.css" type="text/css" media="screen" />
/* muut head-elementtiin sijoittavat määritykset */
</head>

Netscapen CSS-määritykset (netscape.css)

/*
Tänne Netscapelle sopivat CSS-määritykset
*/

Toimivat CSS-määritykset (main.css)
```
@import url("notfornetscape.css");
```

CSS-määritykset joita ei anneta Netscapelle (notfornetscape.css)

/*
Tänne kaikki ne CSS-määritykset, jotka aiheuttavat
ongelmia Netscape 4.X:ssä
/*

IE:n CSS-ongelmat

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ä */
}

Yksinkertaistettu versio Eric Meyerin CSS/edge sivujen menudemosta:

Lisätietoa

CSS-vinkkejä

Jatkuva tausta navigointipalkille

3 column complex layout demo

IE ja lohkojen koko

Entiteetit ja URL-koodaus

Kaikki merkit voidaan XHTML:ssä esittää entiteetteinä. Tärkeimmät entiteetit, joita on joskus pakko käyttää:

& &
< <
> >

Entiteettien lisäksi URL-osoitteissa täytyy käyttää omaa koodaustapaansa. Erikoismerkit pitää koodata heksadesimaalimuotoon. Tärkeimmät:

välilyönti %20
& %26
+ %2b
/ %2f
= %3d
? %3f

URL Encoding (or: 'What are those "%20" codes in URLs?')

Entiteettien ja URL-koodauksen avulla voi huijata tyhmimpiä spamrobotteja Spam-protect your email -työkalun avulla

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

CR-vaiheessa olevat CSS3-moduulit

Osa moduuleista on vielä täysin kesken ja osa on Candidate Recommendation -vaiheessa. Suurin osa moduuleista muuttunee suosituksiksi vuoden 2005 aikana.

Values and Units

Values and Units -moduuli tuo mukanaan seuraavia:

attr(attribuutin_nimi)

Selectors

CSS3 tuo mukanaan seuraavia uusia selektoreja:

Text

CSS3 tuo mukanaan seuraavia uusia tekstiominaisuuksia:

direction: Määrää tekstin suunnan (vasemmalta oikealle tai oikealta vasemmalle)
block-progression
writing-mode
glyph-orientation-vertical
glyph-orientation-vertical
unicode-bidi
text-script
text-justify
text-align-last
min-font-size
max-font-size
text-justify-trim
text-kashide-space
text-indent
line-break
word-break-cjk
word-break-inside
word-break
wrap-option
linefeed-treatment
white-space-treatment
all-space-treatment
text-overflow-mode
text-overflow-ellipsis
text-overflow
punctuation-trim
text-autospace
kerning-mode
kerning-pair-threshold
text-underline-style
text-line-though-style
text-overline-style
text-underline-width
text-line-though-width
text-overline-width
text-underline-color
text-line-though-color
text-overline-color
text-underline-mode
text-line-though-mode
text-overline-mode
text-overline-position
text-blink
text-underline
text-line-through
text-overline
text-shadow
line-grid-mode
line-grid-progressio
line-grid
hanging-punctuation
text-combine

Color

CSS3 tuo mukanaan seuraavia uutuuksia värien määrittelyyn:

currentColor: Vakio jolla voidaan viitata kulloinkin käytössä olevaan tekstin väriin
opacity: Määrittelee elementin läpinäkyvyyden tason
color-profile: Määrittelee käytetyn väriprofiilin
rendering-intent
@color-profile
rgba(red,green,blue,alpha): Määrää värin + alphan
hsl(hue,saturation, lightness): Toinen tapa määritellä väri
CSS2 järjestelmävärit: Poistettu (deprecated)
flavor: Vakio, joka käyttää käyttäjän suosiman tyyppistä väriä

Paged

@page
@top
@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom
@bottom-left-corner
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@right-bottom
@right-top
@right-middle
@right-bottom
page-policy
pages laskuri
@page-float
image-orientation

UI

UI-moduuli tuo mukanaan suuren määrän ominaisuuksia joilla voi paremmin muokata esim. lomake-elementtejä. Uusia pseudovalitsimia:

:enabled
:disabled
:checked
:indeterminate
:default
:valid
:invalid
:in-range
:out-of-range
:required
:optional
:read-only
:read-write

Media

Media-moduuli lisää tuen mediakyselyille joilla voi tarkemmin rajoittaa millaisilla ominaisuuksilla varustetulle laitteelle tietty css-tiedosto on tarkoitettu.

CSS Mobile profile

CSS Mobile profile on CSS2:en osajoukko, joka on tarkoitettu erityisesti mobiililaitteisiin. Kännykkävalmistajat voivat ilmoittaa kännykkänsä tukevan CSS Mobile profilea eikä suoraan koko CSS2:sta. Tärkeimmät ominaisuudet mitä CSS Mobile profilesta puuttuvat ovat:

E:hover
E + F
E[foo]
border-collapse
border-spacing
empty-cells
line-height
max-height
max-width
min-height
min-width
overflow
position
z-index

CSS TV Profile

CSS TV Profile on CSS:n osajoukko, joka on tarkoitettu erityisesti television tyyppisille päätelaitteille. Tärkeimmät ominaisuudet joita CSS TV Profilen mukaisen ohjelman pitää tukea ovat:

Selektorit
- *
- E
- E F
- E> F
- E:first-child
- E:link
- E:visited
- E:active
- E:focus
- E:first-line
- E:first-letter
- E.bar
- E#bar
@
- @import
- @charset
- @media
Ominaisuudet
- background-color
- background
- background-image
- background-position
- background-repeat
- border
- border-color
- border-style
- border-top, border-right, border-bottom, border-left
- border-top-color, border-right-color, border-bottom-color, border-left-color
- border-top-style, border-right-style, border-bottom-style, border-left-style
- border-top-width, border-right-width, border-bottom-width, border-left-width
- border-width
- bottom
- caption-side
- clear
- clip
- color
- display
- float
- font
- font-family
- font-size
- font-style
- font-variant
- font-weight
- height
- left
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-top, margin-right, margin-bottom, margin-left
- page
- page-break-after
- page-break-before
- page-break-inside
- outline
- outline-color
- outline-style
- outline-width
- padding
- padding-top, padding-right, padding-bottom, padding-left
- position
- right
- text-align
- text-decoration
- text-indent
- text-transform
- top
- vertical-align
- visibility
- white-space
- width
- z-index

CSS Print Profile

CSS Print Profile on CSS:n osajoukko, joka on tarkoitettu erityisesti tulostukseen. Tärkeimmät ominaisuudet joita CSS Print Profilen mukaisen ohjelman pitää tukea ovat:

Selektorit
- *
- E
- E F
- E> F
@
- @media
- @page
- @bottom-left-corner, @bottom-left, @bottom-center, @bottom-right, @bottom-right-corner
- @top-left-corner, @top-left, @top-center, @top-right, @top-right-corner
Ominaisuudet
- background-color
- background
- color
- content
- counter-increment
- counter-reset
- font
- font-family
- font-size
- font-style
- font-weight
- height
- line-height
- list-style-position
- list-style-type
- margin
- margin-top, margin-right, margin-bottom, margin-left
- page
- page-break-after
- page-break-before
- page-break-inside
- size
- text-align
- text-decoration
- text-indent
- white-space
- width

Hyödyllisiä linkkejä CSS-kikkoihin

Sivuston testaaminen

Käydään läpi ja kertaillaan vähemmälle huomiolle jääneitä työvälineitä:

DOM Inspector

Vasemmassa ylälaidassa sivun puurakenne.
Oikeassa ylälaidassa näkyvät valitun elementin ominaisuudet.
Alhaalla näkyy graafisessa muodossa miten elementti sijoittuu ja millaisen tilan se varaa sivulta (ks. luento 2 laatikkomalli).

Erikoisemmat selaimet

Sivuston toimintaa kannattaa testata myös mikrotietokoneilla pyörivien graafisten selainten lisäksi harvinaisemmilla selaimilla. Kokeillaan seuraavia selaimia:

Mobiiliselaimet: Nokia Mobile Browser Simulator 4.0
Ääniselaimet: Home Page Reader
Merkkiselaimet: Lynx Viewer

W3C:n LinkChecker

Sivujen linkkien toimintaa voi testata W3C:n LinkChecker -ohjelmalla. Valitse rekursiivinen haku ja vähintään 3 tasoa.

Bobby

Bobby tarkistaa esteettömyyden Web Accessibility Guidelines 1.0:n mukaan. Osan Bobby osaa tarkistaa koneellisesti, osassa kohdista Bobby kehoittaa käyttäjää tarkistamaan asian itse. Esteettömyyssuositus on jaoiteltu kolmeen tasoon, joista tärkeimmät perussuositukset ovat ensimmäisellä tasolla ja vaikeimmin toteuttavissa olevat viimeisellä tasolla.

Kertausta

Harjoitustyö

Käytettävyys ja esteettömyys

Tyypillisiä virheitä
- Top Ten Web-Design Mistakes of 2002 - Jakob Nielsenin Alertbox-kolumni
- Top Ten Web-Design Mistakes of 2003
Skaalautuvuus. Suositaan suhteellisia arvoja (px, em) CSS:ssä ja vältellään kiinteitä määreitä (px). Mitään kokomääreitä ei saa sijoittaa XHTML:ään.

Kurssin anti

XHTML-sivuston tekeminen
Navigointi ja hakemistorakenne
Ulkoasun muokkaaminen CSS:llä
Lomakkeiden teko ja peruskäsittely
Käytettävyys, esteettömyys ja mediatuki
Apache-palvelimen perustoimintoja

Käyttäjien kommentit

Tilastot, esiprosessointi