[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]

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

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]

Tekstin perusmäärittelyt

Elementille BODY laitetaan yleensä fonttityyppi ja sen koko, esim. ([M][S][Pw]):

body
{font-family: Algerian, "Times New Roman",serif;
/* huomaa lainausmerkit, jos fontin nimessä on tyhjää tilaa - ilman niitä selain ei välttämättä osaa etsiä haluttua fonttityyppiä */
font-size:small;}
/* perusfontiksi suositellaan relatiivista fonttikokoa */

Selain etsii tärkeysjärjestyksessä fontit. Kaksi ensimmäistä on tiettyjä asennettuja fonttityyppejä. Kolmas (serif) on ns. yleinen fonttiperhe (generic font family ja yleiset fonttiperheet ovat serif, sans-serif, cursive, fantasy ja monospace. Selaimet voivat päättää tietyin kriteerein, mitä fonttia käyttävät ja saattavat tarjota eri fontteja.

W3C: CSS2: 15 Fonts, 15.2.6 Generic font families[Pw].

Erityisesti otsikoissa voi käyttää hyvinkin monenlaisia ominaisuuksia. Olen seuraavaan esimerkkiin koonnut suuren joukon ominaisuuksia ja mainitsen, mitkä niistä kuuluvat vain CSS2:een ([M][S][Pw]):

h2
{color: #660033;
/* tekstin väri ns. keyword-arvona */
font-family: Algerian, "Times New Roman",serif;
font-weight: bold; /* miten paksua fonttia käytetään - tässä ns. keyword-arvona */
font-size: 18pt; /* absoluuttisella yksiköllä määritelty fonttikoko */
font-style:oblique; /* standardin mukaan tekee normaali fontin tietokoneella viistoksi (slant) - melkein sama kuin italic (oletuksena normal) */
font-variant:small-caps; /* kaikki kirjaimet ovat isoja kirjaimia, mutta pienet kirjaimet näytetään vähän matalampina */
text-transform:capitalize; /* hieman edellisen kaltainen - sanan ensimmäinen kirjain on aina iso kirjain (muut arvot ovat lowercase ja uppercase); huomaa, että lowercase (pienet kirjaimet) kumoaa edellisen määrittelyn */
text-decoration: overline; /* muut mahdolliset arvot: none, underline, line-through, blink; ominaisuus ei automaattisesti periydy */ font-stretch:wider; /* em. arvon pitäisi leventää fonttityyppiä (CSS2) */
text-shadow: 5px 5px red; /* tekstin varjostus (CSS2) */ }

Selainkohtaisia huomautuksia:

  1. font-variant:small-caps toimii MS IE Windows -selaimissa oikein vasta 6.0:ssa.

  2. text-decoration: blink toimii vain Netsape, Mozilla Gecko ja Opera 5.x+ -selaimissa.

  3. font-stretch ja text-shadow ominaisuudet eivät toimi missään testaamassani selaimessa.

Fonttimääreiden kohdalla huomionarvoista on font-weight. Periaatteessa fonttiperheeseen voi kuulua yhdeksän eri fontinpaksuutta ja ne merkitään 100-900 (esim. font-weight:600). Millään tuntemallani fontilla näin ei ole kuitenkaan asianlaita ja mikä arvo puuttuu otetaan lähin sopiva arvo (lisäksi on huomattava, että normal=400 ja bold=700). Väliaikaiseen koon muuttamiseen voi käyttää myös avainsanoja lighter ja bolder, joita en suosittele perusmääreiksi.

Fontin ominaisuudet voidaan määritellä myös ns. pikakirjoitteena, jossa mukana on myös line-height ominaisuus ([M][S][Pw]):

... {font: normal small-caps 120%/120% fantasy;} /* malli fontin pikakirjoitemäärittelystä; ensimmäinen prosenttiluku tarkoittaa fontin korkeutta ja toinen rivikorkeutta (line-height ominaisuus voidaan määrittää muista vastaavan kaltaisista ominaisuuksista poiketen ilman mittayksikköä: 1.2 = 1.2em); erillismäärittelyjä on kuitenkin mielestäni tässä tapauksessa helpompi hallita */

Selainkohtaisia huomautuksia:

  1. Ominaisuuksilla line-height:1.2em ja line-height:120% on Mozilla Gecko -selaimissa ero silloin, kun fonttia skaalataan. Prosenttiarvo skaalautuu, mutta em-arvo ei.

  2. Eräät tekstiin vaikuttavat ominaisuudet eivät toimi juuri millään selaimella. Mielestäni näitä ei kannata käyttää, vaikka uusimmat selaimet hallitsevat ne kaikki: word-spacing, letter-spacing, white-space, word-wrap. Letter-spacing on näistä käyttökelpoisin, sillä sitä tukee monet selaimet ([M][S][Pw]).

[Alku]

Mediatyypit ja -ryhmät sekä tulostus

Aiheet

Mediasääntö ja -tyypit

CSS2 tarjoaa monenlaisia mahdollisuuksia räätälöidä sivusto eri esityslaitteita varten. Yleisimmin tuettuja ovat normaali näyttöesitys ja tulostus. Niille voi antaa @media at-säännön avulla toisistaan poikkeavan esitysasun.

Alla on W3C organisaation spesifikaation pohjalta muokattu esimerkki:

@media print {/* toimii ainakin MS IE 5.x, uusilla Netscape/ Mozilla ja Opera4.+ selaimilla */
body {font-size: 10pt}
}
@media screen {
body {font-size: 12pt }
}
@media screen, print {/* muut mahdolliset mediatyypit: aural, braille, embossed, handheld, projection, tty, tv - huomaa, että laitteen täytyy tunnistaa itsensä eli tietyt laitteet tarvitsevat erityisselaimen eikä toimivuutta voi testata ennen kuin kyseinen selain on valmistettu! */
body {line-height: 1.2}
} /* huomaa, että kaarisulut ympäröivät tavanomaiset määrittelyt */
W3C: CSS2: 7 Media types; 7.2.1 The @media rule[Pw].

Kun mediasääntö liitetään samaan tyylisivuin, sääntöjen merkitystasoja kuvaa jo aiemmin käyttämäni kaavio, johon olen lisännyt yhden tason (mediasääntölohko voi sisältää useita sääntöjä aivan kuten kuvauslohko voi sisältää useita kuvauksia):

mediasääntölohko (media rule block)
sääntö (rule)
kuvauslohko (declaration-block)
kuvaus (declaration)
valitsin (selector) ominaisuus (property) arvo (value)
@media print { body { font-family : Verdana, Arial, sans-serif; } }

Edellä olleessa kaaviossa print on ns. mediatyyppi (media type). Mediatyyppitiedon voi liittää myös STYLE tai LINK-elementteihin (<LINK rel="stylesheet" type="text/css" media="print">) ja @import -sääntöön (esim. @import url(printti.css) print; - tämä tiedosto haetaan vain tulostettaessa).

Selainkohtaisia huomautuksia:

  1. Yleisimmin tuettu arvo on screen, joka toimii ainakin joissakin MS IE 4.x, Netscape 4.x ja Opera 3.51+ versioissa. Opera 3.51-3.6x tukee myös arvoa all ja Opera 4.x+ sen lisäksi arvoa projection. MS IE 4.x+ tukee myös all ja print. Jälkimmäinen toimii myös Netscape 4.x -selaimissa. Vastaavat arvot toimivat monessa selaimessa myös at-säännön @media kanssa. Mediatyyppien käyttämisessä on kuitenkin seuraavia ongelmia:

  2. Attribuutti media toimii oikein STYLE elementin kanssa testaamistani selaimissa vain Mozilla 0.7+:ssa. Muut selaimet lukevat normaalille näyttöesitykselle osan seuraavasta CSS:stä vaikka niiden ei pitäisi niin tehdä:

    <style type="text/css" media="projection">
    <!--
    @import url(../Css/CssSiteProjection.css); /* tämä pitäisi ohittaa */
    body.CssSite div.docSlide p {color:red !important} /* MS IE 5.5+ ja Opera 5.x+ osaavat ohittaa tämän, joten attribuutti media osittain toimii */
    -->

    </style>
  3. Operalla on vastaava ongelma myös LINK elementtiä käytettäessä, mikäli tuontisääntöä ei tarkenneta (esim. @import url(...) screen;) tai käytetä tuoduissa tiedostoissa medialohkoja.

  1. @import url(...) screen; tms. toimii testaamistani selaimista vain Mozilla 0.7+:ssa ja Opera 5.1x+:ssa.

  2. MS IE 4.x Windows ja Opera 3.x lukevat @media print {...} myös näytölle (tosin MS IE:llä jää ensimmäinen sääntö lukematta). @media screen {...} täytyy kirjoittaa viimeiseksi ja on katsottava, että kaikki tarvittava CSS on määritelty uudestaan. Mahdollisesti sama ongelma media attribuuttien kanssa.

  3. Netscape 4.x ei lue LINK ja STYLE elementtejä, mikäli attribuutilla media on useampi arvo, esim. media="screen,print". Netscapella on myös eräs toinen seikka, johon viittaan tällä edempänä.

  4. MS IE 5.0 Mac ja Netscape 4.x eivät lue medialohkojen sisällä olevia sääntöjä. Koska tuontisääntö tuottaa ongelmia Operalle, @media ja @import at-sääntöjä ei tule lainkaan käyttää, mikäli halutaan yleistoimivasti hyödyntää mediatyyppejä.

  1. Operassa on useiden mediatyyppien antamisen kanssa ongelmia (käsittelen niitä tarkemmin sivulla[S]).

  2. Kun Opera 4.x+:ssa käynnistää ns. full screen mode -tilan, Opera on ns. esitysmuodossa (presentation mode), jolloin @media screen (koskee myös @media print) or vastaavat media-attribuutit eivät toimi, mutta on mahdollista käyttää mediatyyppiä @media projection. Olen huomioinut tällä sivulla myös tämän mediatyypin (olen optimoinut sen 800x600 näytölle - käytön ohjeet[S]). Kokeile, jos sinulla on sangen uusi Opera - paina F11 näppäintä!

    Opera Software: XML in Opera.

Mediaryhmät

Normaali näyttöesitysmedia, kuten eräät muutkin mediatyypit ovat ns. jatkuvaa media (continous media). Mediatyypit print ja projection ovat osa CSS2:n sivutettua mediaa (paged media), joka on yksi mediaryhmä (media group).

Sivutetussa tulostus- ja näyttömediassa pyritään hallitsemaan sivutkatkot.

Tavanomainen paperitulostus, normaali näyttöesistys ja projektioesitys ovat kaikki osa visuaalista muotoilumallia (visual formatting model). CSS2:n kuuluu myös ei-visuaalisia muotoilumalleja (formatting models) ja erityismedioita näkövammaisia varten, joita ovat kuulomuotoilumalli (aural rendering model) ja kosketeltava media tactile media).

Lisäksi on otettava huomioon esityslaitteen ominaisuudet, joihin kuuluu mm. se, voiko käyttää lainkaan grafiikkaa. tai voiko käyttäjä vaikuttaa esityksen lopputulokseen vai ei.

Seuraava lista esittelee mediaryhmät, muotoilumallit sekä niihin liittyvät mediatyypit, mikäli niitä on vain yksi tai kaksi:

  • Visuaalinen muotoilumalli
  • Kuulomuotoilumalli - mediatyyppi aural
  • Kosketeltava media - mediatyypit braille ja emboss
  • Sivutettu media - jatkuva media (kyse on siitä, että käytetäänkö sivunkatkosääntöjä vai ei)
  • Interaktiivinen media - staattinen media (interactive - static; voiko käyttäjä muuttaa sivun esitysasua vai ei)
  • Kehikko - rasteri (grid - bitmap; edellisessä näyttö käyttää ns. kiinteävälistä kirjasinkehikkoa (fixed-pitch character grid), joka ei tue grafiikkaa; jälkimmäisessä näyttö toimii rasterina, jolloin voidaan käyttää myös suhteutettuja merkkejä ja esittää grafiikkaa)

Muotoilumallien, mediatyyppien ja -ryhmien välistä suhdetta kuvaa W3C spesifikaatiosta lainattu taulukko (kohta ei sovellu, merkitään englanniksi N/A (= not applicable), joka merkitsee sitä, että kyseistä vaihtoehtoa ei voi soveltaa tiettyyn tilanteeseen; ks. mediatyyppien suomennosehdotuksia[S][Pw]:

Mediatyypit Mediaryhmät
jatkuva/ sivutettu visuaalinen/ kuulo/ kosketeltava kehikko/ rasteri interaktiivinen/ staattinen
aural jatkuva kuulo ei sovellu molemmat
braille jatkuva kosketeltava kehikko molemmat
emboss sivutettu kosketeltava kehikko molemmat
handheld molemmat visuaalinen molemmat molemmat
print sivutettu visuaalinen rasteri staattinen
projection sivutettu visuaalinen rasteri staattinen
screen jatkuva visuaalinen rasteri molemmat
tty jatkuva visuaalinen kehikko molemmat
tv molemmat visuaalinen, kuulo rasteri molemmat
Media

Yleisiä huomautuksia:

  1. Eräät ryhmittelyt ovat lähinnä suosituksia. Mediatyyppi projection voi olla myös interarktiivinen. Mediatyypin aural voidaan pause-toiminnoilla luoda tavallaan sivutettua mediaa.

  2. Taulukon ongelmallinen kohta on mediatyyppi handheld. Ryhmä tarkoittaa käsipuhelimia ja kämmenmikroja (kuten esim. palm pilot -laitteet). Niiden grafiikan käsittelykyky vaihtelee. WAP-puhelimet ovat vasta tulossa markkinoille ja niissä voi käyttää jonkin tason grafiikkaa käsittely, mutta ei kuitenkaan kämmenmikrojen tasoa. Kummat tulisi huomioida ensisijaisesti? Ryhmä tty tarkoittaa vain tekstiä näyttäviä laitteita, joten se ei tule kysymykseen. Pitäisikö olla oma ryhmä mobile_phones? Tein WAP-ongelmista liitesivun[S][Pw].

Fonttityyppien at-sääntö

Eri visuaalisten esitystapojen tueksi on myös mahdollista ladata fontteja @font-face säännön avulla. Seuraavassa kuitenkin yksi W3C sivuilta ottamani esimerkki:

@font-face {
src: local("Helvetica Medium"), /* selain yrittää ensin etsiä asennetun fontin */
url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); /* mikä selain ei löydä sellaista, se lataa fontin; mikäli ladattua fonttia ei löydy käytetään vaihtoehtoista fonttia */
font-family: "Helvetica";
font-style: normal}
h3 {font-family: "Helvetica Medium", sans-serif }

W3C: CSS2: 15 Fonts, 15.3.1 Font Descriptions and @font-face[Pw].

Koska nimelliskooltaan samankokoinen fontti saattaa näyttää kovinkin erikokoiselta, CSS2 tuo laskentakaavoja (font matching algorithm), joilla korvaavien fonttien koko tuottaisi mahdollisimman samankaltaisen lopputuloksen (font-size-adjust).

W3C: CSS2: 15 Fonts[Pw], 15.2.4 Font size[Pw], 15.5 Font matching algorithm[Pw].
Microsoft: @font-face Rule; Netscape: Dynamic HTML in Netscape Communicator Part 3. Downloadable Fonts.

Selainkohtaisia huomautuksia:

  1. font-size-adjust sekä eräät muut fonttien käsittelyyn liittyvät erityispiirteet eivät ole toimineet testaamissani selaimissa.

  2. Microsoftin ilmoituksen @font-face at-rule toimii MS IE -selaimissa alkaen MS IE 4.0 Windowsista (todensin versiolla 6.0), mutta viitatun fonttitiedoston tiedostomuoto täytyy olla joko .eot tai .ote, ei tavanomainen fonttitiedosto (esim. TT028M_.TTF). Koska @font-face toimii MS IE -selaimissa vain tietyillä tiedostomuodoilla, toteutus on tavallaan selainkohtainen.

  3. Netscape 4.x tukee epästandardia @fontdef at-sääntöä, joka tukee .pfr-tiedostoja (esim. @fontdef url("http://www.example.com/sample.pfr");). Ladattavat fontit toimivat myös epästandardin linkkisuhteen avulla (<LINK rel="fontdef"...). Mozilla org. saamani erittäin luotettavan s-postin (21.07.200) mukaan @font-face ei ole vielä tuettu.

[Alku]

Erityinen at-sääntö tulostukselle ja tulostuksen erityispiirteet

Lisäksi ainakin mediatyypille print on mahdollista määrittää mm. sivukoko, tulostusmarginaalit ja sivun suunta (orientation) käyttämällä sivusääntöä (@page). Alla esimerkki niiden käyttämisestä:

@page {size: 210mm 297mm;}

@page :first {size: 210mm 210mm; margin-left: 4cm; margin-right: 4cm;}

@page :right {margin-left: 3cm; margin-right: 4cm;}

@page :left {margin-left: 4cm; margin-right: 3cm;} /* Sivumarginaalien laskeminen ei ala aivan paperin reunasta, sillä tulostin jättää hieman pelivaraa (yleensä vajaa puoli senttiä). Lisäksi margin-ominaisuus BODY tai juurielementille lisätään sivumarginaalien päälle.

@media print {
blockquote, table {page-break-inside:avoid} /* vältä lohkositaatin jakaminen eri sivuille; myös alle sivun mittaisten taulukoiden katkeamisen kahdelle sivulle voidaan estää tällä tavoin */
...
}

Alla on taulukko, joka kuvastaa mielestäni olennaisimpia selainten tulostuksessa hyödyllisiä piirteitä (käsittelen ominaisuutta content sivulla Listat[S]):

Kaikki käytt./ Windows (MS IE): media="print" @media print @import url() print; @page page-break-after/before page-break-inside content
Opera 5.1x+ [OK!] [OK!] [OK!] [OK!] [OK!] [OK!] [OK!]
Opera 4.x-5.0x [OK!] [OK!]   [OK!] [OK!] [OK!] [OK!]
Mozilla 1.0+, Netscape 7.x [OK!] [OK!] [OK!]   [OK!]   [OK!]
MS IE 5.5+ [OK!] [OK!]     [OK!]    
Mozilla 0.7-0.9x, Netscape 6.1-6.2x [OK!] [OK!] [OK!]       [OK!]
Mozilla 0.6, Netscape 6.0x [OK!] [OK!]         [OK!]
MS IE 5.0 [OK!] [OK!]          
Netscape 4.x, MS IE 4.0 [OK!]            
Mac:
MS IE 5.0 [OK!]            

Selainkohtaisia huomautuksia:

  1. Tulostuspiirteet toimivat parhaiten Opera 6.x -sarjan selaimilla. Opera 7.0x -sarjan selaimet tulostavat toisinaan erittäin virheellisesti (7.10 hieman virheettömämmin, mutta ei 6.x sarjan tasoisesti).

  2. Vaikka @page ei ole varsinaisesti tuettu MS IE selaimissa Microsoft ilmoittaa, että sitä voidaan käyttää tulostuspohjissa ohjelmissa, jotka isännöivät MSHTML:ää, jossa on lisäksi joitakin tulostukseen liittyviä epstandardeja CSS-ominaisuuksia (MSHTML[S]:ää ymmrtää MS Office 2000+). En laske tätä todelliseksi toteutukseksi, koska selain itsessään ei tätä at-sääntöä tue.


W3C: CSS2: 13 Paged media[Pw].
Muita sivustoja: Keijo Kortelainen: Mediakohtaisuus, Sivutettu media; Microsoft: @page Rule.

[Alku]

At-sääntölista

Yleisesti ottaen at-säännöt ovat yleisemmän tason sääntöjä kuin tavanomaiset säännöt. Siksi tiettyjä asioita ei voi ilmaista vain tavanomaisilla säännöillä. Useimmat at-säännöt liittyvät CSS:n kohdentamiseen erityistilanteisiin. Aiemmin mainittujen at-sääntöjen lisäksi myös kirjaimiston voi vaihtaa kirjaimistosäännöllä (@charset). Sääntöä voi käyttää vain ulkopuolisissa tyylisivuissa. Sen käyttö näyttää vaikka tältä:

@charset "ISO-8859-1";

Selainkohtaisia huomautuksia:

  1. DevGuru CSS2 mukaan Mozilla Gecko ja MS IE 5.x+ -selaimet tukevat @charset at-sääntöä. Erään hyvin luotettavan Mozilla org. saamani s-postiviestin mukaan se toimii Netscape/Mozilla -selaimissa 4/2000 lähtien. Koska en tiedä, miten testaisin asian, en voi varmistaa tätä asiaa MS IE:n suhten.

    DevGuru CSS2: @rules: charset; Microsoft @charset Rule.
  2. Opera Software ei ilmoita, että Opera 7.x ei @charset tukisi, joten Opera saattaa tukea sitä.

CSS3:een on ehdotettu lisättäväksi uusia at-sääntöjä, kuten @namespace. Selostan @namespace käyttöä sivuilla CSS notes 1[S] ja Valitsimet[S]. Se on sääntö, joka tulee sijoittaa tyylisivun alkuun kuten @charset at-sääntökin.

W3C: CSS2-CSS3: 4 CSS2 syntax and basic data types, 4.4 CSS document representation[Pw], CSS Namespace Enhancements (CSS3:een tehty ehdotus).
Muita sivustoja: John Allsop: Basic concepts.

At-säännöt (sanan selitys[S][Pw]) ovat kahdenlaisia käskyjä (statements; sanan selitys[S][Pw]). Ensiksi yksinkertaisia rivikäskyjä, jotka päättyvät ;-merkkiin. Toiseksi on käskyjä, joita voimme nimittää lohkokäskyiksi (tai käskylohkoiksi), sillä niissä rajoittimina toimivat kaarisulut ({}). Tällä sivulla käsitelly at-säännöt ovat seuraavat:

  • Yksinkertaiset rivikäskyt (ne tulee sijoittaa tyylisivuen alkuun):
    • @charset (CSS2)
    • @namespace (CSS3)
    • @import (CSS1)
    • @import () [mediatyypinNimi]; (CSS2) (mediatyyppien mukaan kohdistettu CSS)
    • @fontdef (epästandardi)
  • Käskylohkot:
    • @page (CSS2)
    • @font-face (CSS2)
    • @media (CSS2)

Alla on taulukko tällä sivulla mainitsemieni at-sääntöjen tukemisesta:

Kaikki käytt./ Windows (MS IE): @import @import url() ...; @media @page @charset @namespace @font-face @fontdef
Opera 7.x+ [OK!] [OK!] [OK!] [OK!] [OK!] (?) [OK!]    
Opera 5.1x-6.x [OK!] [OK!] [OK!] [OK!]        
Opera 4.x-5.0x [OK!]   [OK!] [OK!]        
Mozilla 0.7+, Netscape 6.1+ [OK!] [OK!] [OK!]   [OK!] [OK!]    
Mozilla 0.6, Netscape 6.0x [OK!]   [OK!]   [OK!] [OK!]    
MS IE 5.5+ [OK!]   [OK!]   [OK!](?)   [OK!]  
MS IE 5.0 [OK!]   [OK!]   [OK!](?)   [OK!]  
MS IE 4.0 [OK!]           [OK!]  
Opera 3.51-3.6x [OK!]              
Netscape 4.x               [OK!]
Mac:
MS IE 5.0 [OK!]       ?   [OK!]  

[Alku]

Erityiskohdistuskeinot

Aiheet

Käyttöliittymä

Mediatyyppeihin verrattava asia on käyttäjän omien asetusten huomioiminen fontin väreissä jne. Tämän kappaleen tulisi näkyä käyttöjärjestelmän työpöydän teksti- ja taustavärillä. CSS2 (ei CSS1) tarjoaa mahdollisuuden käyttää systeemifontteja (caption, icon, menu, message-box, small-caption, status-bar) pikakirjoitteen osana (esim. p {font: status-bar ...}). En pidä niiden käyttämistä kovin mielekkäänä muuten kuin erikoiskäytössä, esim. tulevaisuudessa käsipuhelimille suunnitelluilla sivuilla. Esimerkin vuoksi tässä lauseessa on käyttöjärjestelmän fontti.

Käyttöliittymäominaisuuksiin kuuluvat myös outline ja cursor (tässä kappaleessa cursor:wait).

Selainkohtaisia huomautuksia:

  1. Systeemivärit toimivat ainakin Mozilla Gecko, MS IE 4.x+ ja Opera 5.1+ -selaimissa.

  2. ääriviiva eli ominaisuus outline on toiminut joissakin Netspace 6.0:n esiversioissa (viimeksi testaamissani Mozilla Gecko -selaimissa siitä on kätössä selaimen tyylisivuissa[S] epästandardi muunnelma -moz-outline, jota käsittelen englanninkielisissä CSS-kommenteissa[S]) ja se toimii moderneista selaimista vain Opera 7.x+:ssa, joskin ainakin Beta1:ssä hieman virheellisesti.

  3. Mozilla Gecko, MS MS IE:ssä ja Opera 7.x -selaimissa toimii osittain myös ominaisuus cursor (kaikki arvot eivät toimi paitsi Opera 7.x:ssä).

  4. Uudet Mozilla Gecko -selaimet tukevat myös epästandardeja systeemifontteja ja -värejä.


W3C: CSS2: 18 User interface[Pw].
Muita sivustoja: Opera Software: What's new in Opera 5.10.

[Alku]

Kansainvälisyys

Käyttäjän huomioimista on myös hänen kielensä mukaisesti tehdyt sivut. Tätä pyrkimystä kutsutaan W3C piirissä termillä internationalization (se lyhennetään usein muotoon i18n). On mahdollista luoda samaan dokumenttiin oikealta ja vasemmalta kirjoitettavaa tekstiä (kuten esim. hepreaa) käyttämällä ominaisuutta direction, jota käsitellään spesifikaation luvussa 9. Tämä on kuitenkin itselleni äärimmäisen harvoin tarvittava piirre enkä ole sitä testannut.

Muut i18n piirteet käsitellään CSS2 spesifikaation luvussa 12. Siinä tuodaan esille, että on mahdollista tehdä kielikohtaisia sitaatteja käyttäen elementtiä Q (= quote = sitaatti. Myös erityisten listatyyppien käyttö on mahdollista (käsittelen listoja omalla sivulla[S]).

W3C: CSS2: 9 Visual formatting model, 9.10 Text direction: the 'direction' and 'unicode-bidi' properties[Pw], 12 Generated content, automatic numbering, and lists [Pw].

CSS3:n uudet kohdistuspiirteet

CSS3 menee pidemmälle kansainvälisyysperiaatteen suhteen. Siinä on mm. ominaisuus layout-grid.

Viittasin aiemmin yhteen uuteen at-sääntöön. CSS3:een on lisätty myös käyttöliittymäominaisuuksia. Merkittävimmät uudistukset koskeva sivutettua mediaa. Myös Håkon Wium Lien ehdotus tekstin palstoituksesta (multi-column layout) olisi hyödyllinen. Käsitteleen viimeisellä sivulla[S] joitakin CSS3:een liittyviä piirteitä. Seuraavaksi tutkimme kuitenkin hieman ankkureita ja linkkejä.

Selainkohtaisia huomautuksia:

  1. Erityissitaatit toimivat Mozilla Gecko ja Opera 4.x+ -selaimissa - katso erästä mallia[S][Pw]).

  2. CSS3:een lisätyt listatyypit toimivat Mozilla Gecko -selaimissa.

  3. MS IE 5.5+ Windows tukee eräitä CSS3:een ehdotettuja i18n-piirteitä, joita käsittelen englanninkielisissä CSS-kommenteissa[S].


W3C: CSS3:n working draft -sivut: CSS Namespace Enhancements (W3C Working Draft 25 June 1999), International Layout (W3C Working Draft 10-September-1999), Multi-column layout in CSS (W3C Working Draft 22 June 1999), Paged Media Properties for CSS3 (W3C Working Draft 28 September 1999), User Interface for CSS3 (W3C Working Draft 16 Feb 2000).

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004