[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille (introjakso)

6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille

Aiheet

Tämä sivu on jaettu jaksoihin, jotka sisältävät seuraavia aiheita:

Sisältö yhtenä isona sivuna

Yleistä

Kuten sivulla Mikä on HTML ja XML asiakirjojen perusrakenne tuli esille, fontin määrittely on CSS:n kanssa yhteensopivuuden näkökulmasta ongelmallinen. Perusnäkökulma on se, että mitä enemmän halutaan helposti ja joustavasti toteutettavia CSS-määrittelyjä, sitä vähemmän dokumentit ovat ulkonäön suhteen HTML 3.2 yhteensopivia.

Elementti FONT vai CSS?

Mikäli halutaan mahdollisimman suuri alaspäin yhteensopivuus, tulee käyttää elementtiä FONT, vaikka CSS spesifikaatio ei sitä mainitse kuin ohimennen. Kun annat kuvauksen luokalle font-style1, voit jälkikäteen määritellä fontin ominaisuudet uusiksi, mutta vanhemmat selaimet näyttävät HTML 3.2 tasoiset vaihtoehtoiset attribuutit. Tee seuraavan tapainen määrittely dokumentin runko-osaan ([M][S][Pw] - mallisivulla on kaikki tämän jakson mallit):

<FONT class="font-style1" face="Arial" color="#3f3f3f">

Tällainen on kuitenkin aika vaivalloista ja HTML 3.2 attribuutit ovat aika vaatimattomia verrattuna CSS-ominaisuuksiin. Et koskaan saavuta kovin suurta alaspäin yhteensopivuutta. Tavallaan jonkinasteinen alaspäin yhteensopivuus toteuttaa CSS-mediapäämääriä - eri laitteille voidaan tarjota yksilöllisiä sivuja.

Tosin attribuuttivalitsimia käyttäen CSS luokka- tai id-valitsimia ei tarvita lainkaan vaan ominaisuuksien sovitussäännöissä voidaan hyödyntää olemassa olevia attribuutteja. Alla on kaksi esimerkkiä elementin FONT värin muutostavoista attribuuttivalitsinten avulla ([M][S][Pw]):

font[color="#660033"]{color:blue} /* elementti FONT, jolla on attribuuttina color="#660033", saavat värin blue - muista välilyöntisääntö; jos laitat välilyönnin elementtityypin perään, säännössä sanotaan: fontti-elementti, jonka perässä on elementti, jolla on attribuutti color="#660033" saavat värin blue */
*[color="#660033"]{color:blue} /* värin muutoksen voi esittää myös yleisesti; tässä sanotaan vain, että mikä tahansa elementti, jolla on attribuuttina color="#660033", saavat värin blue */

Selainkohtaisia huomautuksia:

  1. älä määrittele fonttikokoa HTML 3.2 tyyliin, esim.:

    <FONT class="font-style1" face="Arial" size="3" color="#3f3f3f">

    MS IE osaa CSS:n avulla ohittaa font-size attribuutin, mutta Opera 3.x ja Netscape 4.x eivät. Koska koon ohittaminen ei toimi kaikissa CSS:ää tukevissa selaimissa, suosittelen välttämään fonttikoon määrittävän attribuutin käyttämistä. Mikäli haluat muuttaa fontin kokoa, laita mieluummin ympärille elementti BIG (voit määritellä CSS:llä myös sen) seuraavan esimerkin tapaan ([M][S][Pw]):

    <BIG><FONT class="font-style1" face="Arial" color="#3f3f3f"></FONT></BIG>

  2. Attribuuttivalitsinten käyttö FONT elementin kanssa toimii täysin vain uusissa Mozilla Gecko ja Opera 7.x+ -selaimissa. Opera 5.x-6.x selaimissa color attribuutin arvoa ei voi tällä tavoin muuttaa, vaikka ne yleisesti ottaen tukevat attribuuttivalitsimia.

HTML 3.2 -tyypisen ajattelun perusongelma on kuitenkin se, että siinä ulkoasu on kaikissa tilanteissa sama eikä sitä voi tilannekohtaisesti kohdistaa. Elementti FONT (mikäli sitä ei CSS:llä varta vasten muuteta) tuo kokoeroa lukuun ottamatta kaikissa tilanteissa saman lopputuloksen. CSS2:n perusideoita on CSS:n kohdennettavuus käyttötarkoitusten ja -kohteiden mukaan.

Ennen kaikkea tämä koskee sitä, miltä asiakirja näyttää sitä näytöltä katsottaessa ja miltä se näyttää tulostettaessa. Mutta yhä enemmän on kyse myös erityyppisistä näyttölaitteista ja niille suunnatusta CSS:stä. Myös käyttäjän kieli ja omat mieltymykset voidaan ottaa huomioon.

Tekstin koko ja valittu fonttityyppi tulisi optimoida käyttökohteen mukaan. Jotta näin voidaan tehdä, käsittelen ensin tekstin ulkoasuun liittyviä ominaisuuksia ja sitten keinoja, millä CSS:n kohdennetaan eri käyttäjille.

[Alku]