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:ää).
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 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.
.css
-loppuinen nimi (esim. omatyyli.css
).
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.)
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ä:
p { text-align: left !important; }
!important
, joka aiheuttaa sen,
että IE käyttää annettua sääntöä, vaikka sivuntekijän tyylisäännöstössä olisi
sen kanssa ristiriitainen sääntö.)a img { border-width: 1px !important; }
:link, :visited, :active, :hover { text-decoration: underline !important; }
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.
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ä.
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ä.