[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOpassivut > 8. Miten CSS annetaan elementtien taustoille ja reunoille > Taustat ja reunat HTML ja BODY elementeille (jakso 4/5)

Taustat ja reunat HTML ja BODY elementeille

Erityisesti kehyksiä käytettäessä on usein mielekästä reunustaa Web-sivun asiasisältö kuten olen tehnyt. Tämä voidaan periaatteessa toteuttaa elementeille BODY avulla seuraavaan tapaan:

body {border: 1px #603 solid;}

Käytettäessä reunuksia koko asiakirjalle, on lisäksi muistettava laittaa marginaali- ja sisennysarvot seuraavalla tavalla, mikäli niiden halutaan toimivan kaikilla selaimilla saman tapaisesti:

body {border: 1px #603 solid; padding: 10px; margin: 0px;}

CSS:n näkökulmasta katsoen BODY-elementti ei poikkea mitenkään DIV elementistä. Taustaominaisuuksien suhteen HTML 3.2:ssa bgcolor ja background on tarkoitettu koko käytettävissä olevalle näyttöpinnalle, mutta CSS:ssä HTML edustaa koko näyttöpintaa. Vaikka koko näyttöpinta (canvas) ei olisi käytössä, HTML-elementille (tai mille tahansa muulle juurielementille) annetut taustaominaisuudet koskevat koko käytettävissä olevaa näyttöpintaa. Selaimet ovat kuitenkin vapaita asettamaan BODY-elementit oletusdimensiot siten, että BODY koskee koko näyttöpintaa.

Reunusten ja taustaominaisuuksien määrittely BODY-elementille tuottaa ongelmia lyhyillä sivuilla. Ongelma on siinä, että ilman korkeusmäärittelyä standardin mukaan toimivilla selaimilla reunus- ja taustaominaisuudet saattavat päättyä välittömästi päätöskoodin </BODY> jälkeen!. Jos on lyhyitä sivuja, reunuksen alareunan paikka saattaa jollakin selaimella muuttua koko ajan. Taustakuvia käytettäessä pahinta on se, että taustamäärittely voi jatkua reunuksen alapuolella. Lopputulos on ikävän näköinen. HTML-elementille määriteltynä lopputulos on reunusten osalta siistimpi kun elementille on määritelty myös height:100%. Toisaalta pitkillä sivuilla reunus ei ole aina asiakirjan joka reunassa, sillä reunus rullautuu CSS-spesifikaatioita noudattavilla selaimilla asiakirjan mukana.

Lyhyille sivuille voi olla tarvetta määritellä lisäksi ylimääräinen DIV-elementti ja sille prosentteina määritelty korkeusarvo (esim. height: 97%), jotta edellä käsitellystä korkeusongelmasta päästään (vaihtoehtoisesti korkeusarvo voidaan antaa BODY elementille). Kun määrittelee tälle elementille reunukset, saa nekin toimimaan mahdollisimman monessa selaimessa. Jos reunusten ylä- ja alapuolella on marginaalia, reunusten rullautuminen ei ole suuri visuaalinen haittatekijä.

Selainkohtaisia huomautuksia:

  1. Ilman BODY-elementille annettavia padding-arvoja ainakin Opera 3.6x+ "liimaa" reunukset kiinni tekstiin (tai sisemmän lohkolaatikon reunaan). Menettely on sinänsä spesifikaation mukaista, sillä CSS ei määrittele BODY elementille oletuskäyttäytymistä (selaimen tyyliarkit saattavat sen tehdä). Oletuksena oleva ns. selainsiirtymä voi (browser offset) voi olla joko ikään kuin marginaali tai täyte.

  2. Jotkut Opera ja Mozilla Gecko -selaimet saattavat lyhyillä sivulla asettaa alareunuksen välittömästi </BODY> jälkeen, mutta eivät katkaise taustakuvia samasta kohtaa. Tämä on virheellistä toimintaa, sillä taustat eivät juurielementtiä lukuun ottamatta saisi mennä elementin reunusten ulkopuolelle.

  3. Reunusten määrittely elementille HTML ei toimi MS IE 4.x -selaimissa (MS IE 5.0+ Windows, Opera 3.6x+ ja Mozilla Gecko -selaimissa määrittely toimii). Eräillä tempuilla CSS:n voi määritellä siten, että MS IE 4.x Windows lukee reunat elementille BODY mutta muut samaa tyyliarkkia käyttävät selaimet elementille HTML (selostan tempun periaatteen sivulla, joka käsittelee MS IE ongelmia[S]).

  4. Mikään MS IE -selain ei laita HTML elementille annettuja marginaaleja reunusten ulkopuolelle kuten uudet Opera ja Mozilla Gecko -selaimet. Vanhemmat selaimet hylkäävät marginaalin ja reunuksen kokonaan ja uudemmat laittavat marginaalin reunusten sisäpuolelle (mallisivu[S]).

  5. Netscape 4.0x on niin huono, että sille ei voi laittaa koko dokumenttia koskevia reunuksia vaan se täytyy ohittaa tuontisäännöllä, ettei se kaadu.

  1. MS IE 4.x-5.5 Windows -selaimet "ratkaisevat" kaikki reunusongelmat toimimalla CSS2 standardin vastaisesti (MS IE 6.0 Windows käyttäytyy samoin, mikäli se ei ole standard-compliant -moodissa[S]). Se määrittelee reunuksen katselukanavasta (eli ikkunasta) käsin olkoon ne sitten määritelty HTML tai BODY elementille. Vaikuttaa siltä, että MS IE käsittelee yksittäisiä sivuja elementin FRAME tavoin ja asettaa sen vuoksi background ja border ominaisuudet HTML ja BODY elementeille katselukanavan mukaisesti (MS IE ei kuitenkaan käsittele elementtejä BODY tai HTML elementtinä FRAME, sillä myös kehykset ja kehyssetit voivat saada oman CSS:n).

    Lopputulos on kyllä sinänsä siisti, sillä reunus on aina dokumentin joka reunassa, mikäli ne on joka reunalle määritetty eivätkä ne rullaudu asiakirjan mukana kuten uusissa Opera ja Mozilla Gecko -selaimissa. Itse asiassa Microsoftin ratkaisu on paljon ongelmattomampi kuin CSS2-spesifikaation mukainen toteutus.

    Mozilla Gecko -selaimille voidaan määritellä näyttöportille reunukset käyttämällä epästandardia nännäiselementtiä :-moz-canvas/ :canvas. ::canvas ja ::viewport näennäiselementit olisi hyvä saada virallisen CSS3 spesifikaation valitsinmoduuliin ja lähetin ehdotuksen asiasta.

  1. MS IE:n spesifikaation vastaisesta menettelystä seuraa taustamäärittelyongelmia. MS IE laskee mahdollisen kiinteän taustakuvan reunojen ääriviivoista lähtien eikä katselukanavan eli ikkunan reunasta, kuten pitäisi. Tästä seuraa taustakuvan asemointiero Opera 3.62+ ja Mozilla Gecko -selainten kanssa. Jos sivuilla on paksut reunukset, virhe voi olla merkittävä. Tein testisivun[S] (jos vierailet sivulla, ikkunan leveys täytyy olla iso) ja otin katseluikkunoiden yläosasta kuvaruutukaappauskuvia. Näin sain seuraavat testitulokset:

    • Opera 5.01[S] - asemoinnit ovat kohdallaan. Saamani sähköpostiviestin mukaan myös Mac IE 5.0 toteuttaa testin oikein.
    • Mozilla 0.6[S] - kaikki tarkasti määritellyt asettelut ovat kohdallaan, mutta "kelluvat" lohkot (käsittelen niitä sivulla 11[S]) aiheuttavat valkoisen "nauhan" (tämä asia on korjattu Mozilla 0.9:ssä). Ne voisivat mielestäni olla samalla rivillä.
    • MS IE 5.5[S] - taustakuvan ja kiinteiden lohkojen (position:fixed; käsittelen määrittelyä sivulla 11[S]) asemointi ei ole oikea.
    • MS IE 6.0 preview[S] - kiinteiden lohkojen asemointi ei ole oikea mutta taustakuva on asemoitu oikein.
  2. BODY-elementin käytös on korjattu 6.0-versiossa ja se käyttäytyy DIV elementin tavoin. Elementit HTML ja BODY voivat luoda varsinaiselle sisällölle kaksitasoisen taustan.

Koko sivulle tarkoitettuja reunuksia (ja joskus myös taustakuvia) juuri nyt on mahdoton saada näyttämään samanlaisilta kaikille CSS-ominaisuuksia tukeville selaimille.

Olen tehnyt erään ehdotuksen, joka on sivulla CSS and HTML in the future[S][Pw]. Sillä voitaisiin standardilla tavalla ratkaista BODY elementille määriteltyihin reunuksiin liittyvät ongelmat. Ratkaisu ei ole kuitenkaan yleispätevä eikä sitä voida aina käyttää seuraavista syistä:

  1. Tausta ei voi olla kaksitasoinen. Tämä sivusto käyttää kaksitasoista taustamäärittelyistä, jossa on eri taustaominaisuudet HTML ja BODY elementeille (kuvakaappaus kaksitasoisesta taustaväreistä[S]).

  2. On mahdotonta määrittää useamman XML-pohjaisen kielen juurielementti samalla CSS:llä, esim. XHTML and SMIL (Syncronized Multimedia Integration Language): html, smil {width:500px; margin:auto; border:10px solid black; background: #603 (someBackgroundImage.gif) center center no-repeat fixed;}.

[Alku]