Datatekniikka ja viestintä - Web:

Käyttäjän tyylisäännöstö Internet Explorerissa

Internet Explorerin käyttäjä voi ohjata selaimen toimintaa esimerkiksi sen suhteen, millainen kirjasinlaji on käytössä, mikä on taustaväri, mikä on kappaleiden esitystyyli jne. Pieni osa tällaisista asioista on hoidettavissa suoraan selaimen asetuksista valikkojen kautta. Paljon monipuolisempia mahdollisuuksia tarjoaa käyttäjän tyylisäännöstön (user style sheet) kirjoittaminen. Tässä annetaan joitakin vinkkejä, joita pystyy soveltamaan, vaikka ei osaisi tyylisäännöstökieltä (CSS:ää).

Sisällys:

Johdanto

Ohjeessa Internet Explorer 4.0:n asetuksista kerrotaan eräistä peruskonfiguroinneista. (Englanninkielisessä versiossa samoin kuin 5.x-versioissa menettelyt ovat osittain toisenlaiset, mutta erot eivät ole kovin mullistavia.) Erityisesti taustan värin ja tekstin värin sekä kirjasinlajin eli fontin muuttaminen on melko helppo tehdä, samoin kuin sen määrääminen, että selaimen ei pidä välittää sivuilla itsellään ehdotetusta fontin nimestä, koosta tai väristä. Samassa yhteydessä voidaan selainta käskeä soveltamaan (kaikkien dokumenttien esityksessä) käyttäjän tyylisäännöstöä sekä ilmoittaa, missä tiedostossa se on (omassa koneessa).

Tämä ohje on kirjoitettu alun perin IE 4:n englanninkieliselle versiolle. IE 5:ssä suurin ero tässä esitettyyn lienee se, että (sinänsä loogisesti!) asetusten muuttaminen ei ole View-valikossa (Näytä-valikossa) vaan Tools-valikossa (Työkalut-valikossa). Toivottavasti suomenkieliset vastineet ovat pääteltävissä tai arvattavissa tarpeeksi hyvin.

Olen testannut tässä esitettyjä asioita vain Windows-ympäristössä. Otan mielihyvin vastaan raportteja siitä, miten nämä asiat toimivat tai eivät toimi esim. IE:n Mac-versiossa.

Tyylisäännöstö voi olla simppelikin

Tyylisäännöstö voi olla hyvinkin laaja ja mutkikas, tai sitten se voi olla äärimmäisen yksinkertainen. Esimerkiksi tyylisäännöstö
body { font-size: 13pt; }
asettaisi fonttikooksi 13 pistettä. Huomaa, että IE:n valikoista ei voi tehdä vastaavaa. Sen sijaan voi asettaa fonttilajin, ja eri fonttien peruskoot ovat toki hiukan erilaiset, ja valinnan View > Fonts kautta voi valita muutaman eri kokovaihtoehdon välillä. Mutta jos haluat yksinkertaisesti vaikkapa vain valita fontiksi kiinteästi 13 pisteen Times New Romanin tai 12 pisteen Arialin tms., niin joudut asettamaan fonttikoon tyylisäännöstössä. Fonttilajin valinnan voi tehdä valikon kautta, mutta toki sekin onnistuu ja on ehkä parempikin tehdä tyylisäännöstössä:
body { font-size: 11pt; font-family: "Arial"; }

Jos esimerkiksi haluat vain asettaa fonttikoon, ei sinun välttämättä tarvitsisi muuta kuin selvittää, minkä koon haluat asettaa, ja sitten toimia seuraavassa kohdassa kuvattavalla tavalla. Mahdollisia yksiköitä on paljonkin, mutta käyttäjän tyylisäännöstössä on yleensä parasta käyttää yksikkönä pistettä (point), jonka lyhenne on pt. Huomaa, että tyylisäännöissä lukuarvo ja yksikkö kirjoitetaan suoraan peräkkäin, ilman välilyöntiä, esim. 11pt.

Edellä esitetyt tyylisäännöstöt eivät aseta kaiken tekstin fonttikokoa vaan ainoastaan dokumentin perusfonttikoon. Jos todella haluaisit kaiken tekstin samankokoisena, pitäisi tyylisäännöstössä luetella kaikki selaimen tunnistamat elementit. Tosin IE 5:ssä voi käyttää CSS2:n mukaista valitsinta *, joka viittaa kaikkiin elementteihin. IE 5:tä käytettäessä voi siis asettaa ensin vaikkapa * {font-size:11pt} ja sitten muita kokoja niille elementeille, joiden haluaa olevan isompia tai pienempiä, esim. otsikoille. Tällöin on kuitenkin syytä olla tarkkana, sillä ilman lisäsääntöjä tuo sääntö tekisi muun muassa yläindeksit normaalitekstin kokoisiksi.

Miten tyylisäännöstö otetaan käyttöön

Jos haluat poistaa oman tyylisäännöstösi käytöstä ja ehkä ottaa sen sitten takaisin käyttöön, se onnistuu kyllä ilman, että IE:stä poistutaan välillä. Toistetaan vain ylläkuvattu, paitsi että otetaan rasti pois, jos sitä halutaan. Huomaa, että tämän oppii tekemään suhteellisen joutuisasti, jos tekee valinnat näppäimistöltä, käyttäen valikon teksteissä alleviivattuja kirjaimia. Siis esim. englanninkielisessä IE 4:ssä näin: painetaan Alt-näppäin alas, ja sitä alhaalla pitäen näppäillään voed ja sitten päästetään Alt ylös ja painetaan kahdesti Enter-näppäintä. (Muissa IE:n versioissa eri tavalla, mutta ideana siis opetella tuollainen pikanäppäily.)

Vähän vaativampaa virittelyä

Edellä kuvatuista Accessibility-asetuksista pitää ruksia kaikki vaihtoehdot, jos haluaa todella kontrolloida dokumenttien esitysmuotoa. Muutoin käy helposti niin, että dokumentissa (HTML:llä tai CSS:llä) ehdotetut piirteet kuten taustavärit "lyövät läpi".

Jos asettaa tyylisäännöstössään body-elementille (eli koko dokumentille) ominaisuuden font-family tai font-size tai molemmat, kannattanee lisäksi asettaa kyseiset ominaisuudet vähän toisella tavalla sellaisille elementeille, jotka selaimet näyttävät oletusarvoisesti tasalevyisellä fontilla. Muuten käy helposti niin, että sellainen teksti ja normaali teksti ovat häiritsevästi erikokoisia. Esimerkki:
pre, code, samp, kbd, tt, textarea, input, listing, plaintext, xmp {
font-size: 12pt; font-family: Courier; }

Tässä on listattu ne elementit, jotka selain yleensä esittää tasalevyistä fonttia käyttäen. Yllä oleva asetus sopii mielestäni aika hyvin yhteen sen asetuksen kanssa, jossa normaalin tekstin fontti on 13 pisteen Times New Roman.

Usein haluttaisiin, että selaimet näyttäisivät kappaleet enemmän "kirjallista tyyliä" muistuttavalla tavalla: ei ylimääräistä väliä kappaleiden välissä, tai ei ainakaan paljoa, mutta kappaleen ensimmäinen rivi jonkin verran sisennettynä. Sentapainen saadaan aikaan näin:
p { text-indent:1em; margin-top:0.2em; margin-bottom:0.2em; }
Tällöin sisennys on em-yksikön suuruinen (em tarkoittaa periaatteessa fontin kokoa ja on käytännössä suunnilleen ison M-kirjaimen leveys). Kappaleiden välistä ylimääräistä (siis normaalin rivivälin ylittävää) tilaa ei ihan nollaksi tässä aseteta vaan 0.2em:ksi. Tällöinkin esitysmuoto on huomattavasti tiiviimpi kuin selainten yleensä kappaleille käyttämä.

Pari lisäniksiä:

Olen laatinut "keskiraskaan" tyylisäännöstön, joka ehkä havainnollistaa sitä, millaisia muitakin asioita voi tehdä. Joskus ehkä laadin tarkemman selostuksen siitä. Lisäksi olen tehnyt testidokumentin, jossa on erilaisia HTML-elementtejä, jotta tyylisäännöstöjen vaikutus olisi helpommin kokeiltavissa. Jos haluat nähdä, mitä "keskiraskas" tyylisäännöstöni, joka mielestäni korjaa joitakin IE:n puutteita, oikein vaikuttaa, voit tallentaa sen omaan koneeseesi (IE:llä voit käyttää hiiren oikeanpuoleista nappia klikatessasi linkkiä valita vaihtoehdon "Save Target As..." tai vastaavan) ja asettaa käyttäjän tyylisäännöstöksesi ja sitten kokeilla, miltä eri sivut (kuten tuo testidokumentti) näyttävät. On syytä varautua siihen, että kummallisesti tehdyt sivut voivat näyttää hiukan kummallisilta. Ja toisaalta siihen, että minun makuni mukaiset korostukset, esimerkiksi vaaleankeltaiset taustat erilaisille tärkeille elementeille, ovat monen muun makuun liiankin korostavia ja tekevät levottoman vaikutelman.

Jos teet jotain vaativaa, niin kannattaa ehkä ensin kokeilla, miten säännöstö toimii sivuntekijän tyylisäännöstönä (johon esim. viittaat testidokumentissasi link-elementillä). Silloin on helpompi joustavasti kokeilla eri muunnelmia, koska ei tarvitse koko ajan käynnistellä IE:tä uudestaan. Tosin silloin ei voi testailla vaikutusta erilaisiin dokumentteihin Webissä, vaan ainoastaan sellaisiin omiin dokumentteihinsa, joihin tyylisäännöstön liittää. Joten kun homma tuntuu pelaavan, voi sitten seuraavaksi ottaa tiedoston käyttöön käyttäjän tyylisäännöstönä ja lähteä surffailemaan.

Paperitulostukseen eri säännöt?

Tyylisäännöstöön voidaan kirjoittaa osia, jotka selaimen tulisi ottaa huomioon vain paperitulostuksessa. Tämä tehdään kirjoittama osa rakenteiden @media print { ja } väliin. Esimerkki:
@media print { body { font-family: "Times New Roman"; }}

Usein kannattaa asettaa paperitulostuksen fonttikoko hiukan pienemmäksi kuin kuvaruutuesityksen, koska paperilta yleensä pystyy mukavasti lukemaan jonkin verran pienempää tekstiä.

Tällaisilla keinoilla voi siis saada aikaan, että sivun esityksessä ruudulla on haluttu fonttilaji ja -koko, paperiesityksessä jokin toinen. Tällaiset asetukset kannattaa tietysti sovittaa yhteen oman järjestelmän tulostusasetusten kanssa. Jos esimerkiksi haluat paperitulosteisiin 30 mm:n vasemman reunuksen, niin voit joko etsiä tulostusasetuksista marginaalin asettamisen ja käyttää sitä tai kirjoittaa tyylisäännöstöösi
@media print { body { margin-left: 30mm !important; }}
Mutta molempia ei kannata tehdä, koska tuloksena olisikin 60 mm:n marginaali!

Jos haluat estää linkkejä tulostumasta paperille alleviivattuina, voit kirjoittaa yksinkertaisesti
@media print { a { text-decoration: none !important; }}

Vinkki: IE:ssä on mahdollisuus paperitulostuksen esikatseluun ruudulla. Toiminto löytyy Tiedosto- tai File-valikosta. Tulos ei ole tarkasti sama kuin todellinen paperitulostus, mutta tämä toiminto auttaa välttämään paperintuhlausta varsinkin erilaisten kokeilujen yhteydessä.

Lisätietojen lähteitä

Web-julkaisemisen oppaassa on erillinen luku Värikkyyttä: tyylisäännöstöt (style sheets, CSS). Se, kuten suurin osa CSS:ää käsittelevästä aineistosta, on tosin tarkoitettu ennen muuta sivuntekijän tyylisäännöstöjen (author style sheets) laatijoille. Itse CSS-kieli on kuitenkin sama molemmissa. Huomaa erityisesti, että jos käytät CSSCheckiä tyylisäännöstösi tarkistamiseen (mikä on erittäin suositeltavaa), kannattaa ehkä jättää valitsematta kohta "Include warnings". Syynä on se, että tarkistusohjelman varoitukset koskevat ennen muuta sivuntekijän tyylisäännöstöjä. (Niissä ei käytännöllisesti katsoen koskaan pitäisi esim. fonttikoon yksikkönä käyttää pt:tä, kun taas käyttäjän tyylisäännöstössä se on nimenomaan suositeltavaa.)

Microsoftin oma luettelo IE:n tukemista HTML-elementeistä on seuraava (huomattakoon, että kaikki eivät suinkaan ole HTML-spesifikaatioiden mukaisia):
a, acronym, address, applet, area, b, base, basefont, bdo, bgsound, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, comment, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, head, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, listing, map, marquee, menu, meta, nobr, noframes, noscript, object, ol, option, p, param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, xml, xmp.

Ei tietenkään tarvitse eikä ole mielekästäkään kirjoittaa sääntöjä jokaiselle elementille! Yllä oleva lista on vain luettelo siitä, mille kaikille voi harkita tekevänsä jotain.

Erinomaisia tietolähteitä sen suhteen, mitä eri elementit tarkoittavat HTML:ssä, ovat seuraavat:

Internet Explorerin CSS-tuesta on tietoja mm. seuraavissa dokumenteissa:

Siltä varalta, että joku vielä käyttää IE 3:a: ehdottomasti paras puoli sen CSS-tuessa on se, että kyseinen "tuki" on helppo kääntää pois. Niin kannattaa tehdä, koska nykyisin Web-sivuilla käytetyt tyylisäännöt ovat aivan liian vaikeita sille.

Värejä koskevia apuneuvoja:


Eric Meyer on kirjoittanut hauskan lyhyehkön jutun The CSS Anarchist's Cookbook, joka käsittelee sitä, mitä käyttäjän tyylisäännöstöillä voi tehdä Mozillassa. Osa tempuista toimii myös IE 4:ssä tai ainakin IE 5:ssä.