[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOppaan 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ä

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:

Huomautus. Jos määrittelet näyttömedian (@media screen), muista myös kokoruutunäyttötila[S]. 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.

Opera Software: Opera Composer lets users customize their Web browser; Microsoft: Internet Explorer Administration Kit.

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.

Mozilla org.: Customizing Mozilla.

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[S]).

W3C: HTML 4.01: 14.3.1 Preferred and alternate style sheets.

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:

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[S] 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.

[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