Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > J Mitä ovat käyttäjän tyylisivut (User style sheets)

J Mitä ovat käyttäjän tyylisivut (User style sheets)

Aiheet

• Yleistä
• Miksi käyttäjän tyylisivut?
• Käyttäminen ja sen puutteet

Yleistä

Käyttäjän tyylisivut (user style sheets) eli käyttäjän CSS toimii sangen hyvin ainakin MS IE 5.x+ ja Opera 4.x+ -selaimissa. Se, millä tavoin niitä käytetään ja miten niillä voi kontrolloida sivujen tekijän ja käyttäjän vaikutusta sivun esitysasuun, on selainkohtainen asia.

Miksi käyttäjän tyylisivut?

Käyttäjän tyylisivuista on mm. seuraavia hyödyllisiä käyttötarkoituksia:

• Voit vaihtaa sivustoilla, joita sinun on vaikea lukea sivujen ulkoasun helpommin luettavaksi esim. vaihtamalla fonttityylin, suurentamalla fonttia, vaihtamalla tekstin ja taustan värejä.
• Jos käytät Opera 4.x+:aa voit asettaa sivun leveyden itsellesi sopivaksi. Voit käyttää vaikka tällä sivulla näkemääsi tyyliä. Tämä tyyli on käyttökelpoinen sivuilla, joissa teksti normaalisti valuu vasemmasta laidasta oikeaan laitaan.
• Useimmissa tapauksissa ne nopeuttavat sivujen selaamista. Mikäli haluat etsiä internetistä vain asiatietoa, suosittelen käyttäjän tyylisivuja.
• Ne ovat hyödyllisiä testivaiheessa.
  • Sivuilla on helppo kokeilla vaihtoehtoisilla esitysmalleilla. Nämä esitysmallit voi lähettää myös sivujen asiakkaalle tai antaa vaikka sivujen selaajan käyttöön.
  • Vajaille tiedostoille saa CSS:n, jolloin niidenkin esitysasua voi testata siirtämättä niitä palvelinohjelmalle.

Huomautus. Jos määrittelet näyttömedian (@media screen), muista myös kokoruutunäyttötila. Käytä sille omaa mediatyyppiä (@media projection) tai määrittele se yhdessä normaalin näyttömedian kanssa (@media screen, projection).

Kokeile tekemääni userCss.css -tiedostoa esim. menemällä CSS spesifikaation sivuille CSS:ni kanssa(linkki avaa uuden ikkunan).
Huomautus Tämä tiedosto on määritelty siten, että kaikki sivujen tekijän FONT elementit sekä sivujen tekijän määrittämät teksti- ja taustavärit menettävät merkityksensä. Tämä on välttämätöntä, ettei synny tilannetta, jossa tekstin ja taustan värit ovat samat tai hyvin lähellä toisiaan. Tiedosto on optimoitu Opera 5.x+:lle, sillä sen tarkoituksena on hallita sivulla olevan tekstin leveyttä.

Sivun leveyskontrolli toimii testaamistani selaimista vain Opera 4.x+, Konqueror (Linux-käyttöympäristö) ja Mozilla Gecko (esim. Netscape 6.1+) -selaimissa (erään kuvakaappauksen perusteella myös Mac-ympäristöön tehdyssä Safari -selaimessa). Tekemäni CSS ei kuitenkaan pakota kaventamaan taulukoita, joiden sisältö ei mahdu asettamaani ylärajaan (body {max-width:600px}). Jos taulukoita pakottaa tiettyyn maksimileveyteen, taulukkosolujen sisältö voi mennä toistensa pälle, jolloin se on lukukelvotonta.

Käyttäminen ja sen puutteet

Joissakin selaimissa (kuten MS IE 4.01 ja Opera 3.x), missä niitä tuetaan systeemi ei oikein pelaa. Minua ärsytti aikoinaan erityisesti se, että tekstityylin vaikuttavat ominaisuudet eivät toimineet kunnolla.

Asetusten muuttaminen

Kaikkien selainten kohdalla, jotka antavat määritellä käyttäjän tyylisivun tulee ensimmäiseksi määritellä (hakemisto)polku (path), josta CSS-tiedosto löydetään (sinun täytyy tehdä tosin se vain kerran, mikäli et halua vaihtaa käytettyä tyylisivua).

Asetusten muuttaminen on MS IE -selaimissa hieman vaivalloista, sillä ne joutuu hakemaan monen alivalikon kautta: Työkalut > Internet asetukset > Muotoiluasetukset (Tools > Internet options > Acessibility).

Myös Operalla alkuasetusten laittaminen on hieman vaivalloista: Tiedosto > Ominaisuudet > Asiakirjat (File > Preferences > Documents). Muuttaminen sujuu nopeammin, mikäli käytät apuna näppäimistöä: ALT + P > Documents/Asiakirjat - seuraavalla kerralla Opera on valmiiksi tässä kohdassa, joten alkuperäisasetusten palauttaminen sujuu nopeasti. Tämän jälkeen sinun tulee kruksaamalla määritellä, miten haluat tyylisivuen toimivan.

Seuraavilla kerroilla tyylisivuen käyttötavan muuttaminen on Operalla äärimmäisen helppoa, sillä Osoitepalkki (Address bar) -työkalurivillä on painike tätä varten. Opera 7.x -selaimissa kohdalla on lisävalikko, josta voi valita useita esimääriteltyjä tyylisivuja, joita voi käyttää yhtä aikaa. Osa näistä on tarkoitettu tosin vain Web-suunnittelijoille (monen mielestä ne eivät perusselaimeen edes kuulu vaan Web-suunnittelijoille tulisi olla oma selain) ja osa tavallisille selaimen käyttäjille.

Huomautus 1. Mikäli tyylisivuen käyttötapaa muutetaan kohdasta Asiakirjamuoto oletuksena (Document mode as default), tulee muistaa painaa Käytä (Apply), jotta muutos tulee välittömästi voimaan - muussa tapauksessa muutos vaikuttaa vasta avattaessa uusi ikkuna.

Huomautus 2. Saamani s-postin mukaan myös MS IE:hen saa kehittelyohjelmalla (development kit) lisäpainikkeen, olla käyttäjän tyylisivut saa nopeasti päälle/ pois päältä. Nykyisin myös Operaa voi muokata.

En löytänyt Mozilla Gecko selainten käyttöliittymästä kohtaa, jonka avulla voisi määritellä käyttäjän tyylisivutiedoston. Mozilla org. sivuilla opastetaan siirtämään /Chrome hakemisto alihakemistoon eräitä CSS-tiedostoja.

Tiedostojen täytyy sijaita tietyssä paikassa ja niiden tulee olla tietyn nimisiä eikä niiden nimiä tai sijaintia voi Operan ja MS IE -selainten tavoin vapaasti määritellä. Toivoisin Mozilla Gecko -selaimiin yhtä helposti käytettävät käyttäjän tyylisivut kuin mitä on Opera-selaimissa - ehkä kuitenkin liikaa pyydetty, sillä Mozilla Gecko selaimissa on melkoisesti poikkeava käyttöliittyä.

Erilaisen käyttöliittymän takia paras ratkaisu Netscape/Mozilla-selaimille olisi, jos View-valikossa olisi kohta User style sheets siten, että käyttäjä voisi valita usean tyylisivun väliltä. Selaimella tulisi olla helppo tapa määritellä useita tyylisivuja. Määrittelyt pitäisi löytyä polun Preferences > Appearance avulla.

Tosin Netscape/Mozilla antaa mahdollisuuden vaihtaa tyylisivuja (View > Use Stylesheet), mitä puolestaan Opera 3.x-6.x ja MS IE eivät tarjoa (Opera 7.x+ tukee vaihtoehtoisia tyylisivuja). W3C:n mukaan selainten tulisi tukea sekä käyttäjän tyylisivuen että vaihtoehtoisia tyylisivuja. Niiden toimivuus edellyttää attribuutin title käyttöä (esim. <LINK rel="alternate stylesheet" title="Alternate SS">; käsittelen tätä asiaa myös sivulla 2).

Ei-tuettuja piirteitä

Vaikka käyttäjän tyylisivut toimivat Opera 4.x+:ssa sangen hyvin, ne eivät kuitenkaan toimi yhtä hyvin kuin sivun laatijan tyylisivut. Seuraavat asiat eivät toimi Opera 4.x-5.11 -selaimissa:

• background-image.
• list-style-image.
• @media print ja ylipäätänsä tulostukseen tarkoitettu CSS.
• @media projection ei toimi Opera 6.0:ssa (se toimii ainakin Opera 5.x -sarjan selaimissa).

MS IE 5.5:ssä list-style-image ja background-image toimivat, mutta @media ja @page at-säännöt kaatavat sen (MS IE 6.0 ei kaadu niistä). Tulostusta ei voi kontrolloida käyttäjän tyylisivuilla MS IE 5.5:ssäkään. Dokumentin CSS:ää ei saa pois päältä, jotta voisi (Operan tavoin) käyttää vain käyttäjän CSS:ää.

Koska käyttäjän tyylisivu on tarkoitettu olemaan yksi tyylisivu, tuontisääntö (@import) ei toimi. Tämä voi olla tosin myös selaimen virhe.

!important

Ns. tärkeyssäännön (!important ks. sivu Prosessointijärjestys käytöllä ei käytännössä ole suurta merkitystä. MS IE:ssä selaimen asetuksilla voi hallita (karkeasti) värejä ja fontin esittämistä, mutta muiden ominaisuuksien suhteen tarvitaan tärkeyssäännön käyttämistä (esim. ul li {list-style-image: url(pallo.gif) !important;} antaa käyttäjän määrittelemille listakuville suuremman painon kuin sivujen tekijän määrittelemille listakuville). MS IE 5.5 tuntuu seuraavan CSS 2:ta, jonka mukaan sivujen käyttäjän tärkeyssääntö voittaa sivujen tekijän tärkeyssäännön.

Ainakin versioon 5.01 asti Opera-selaimet tuntuvat seuraavan sen sijaan CSS1:tä, jonka mukaan sivujen tekijän tärkeyssääntö voittaa käyttäjän tärkeyssäännön (tällä ei tosin ole kovin suurta merkitystä, sillä kaikki sivujen tekijän laatima CSS voidaan ottaa pois käytöstä). Opera 5.12:ssa käyttäjän CSS:llä on prioriteetti mutta Opera 6.0:ssa dokumentin CSS:llä. Näyttää siltä, että vain 5.1x -sarjan selaimet noudattavat tässä asiassa CSS2:ta.