[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]

8. Miten CSS annetaan elementtien taustoille ja reunoille

Aiheet

Tämä sivu on jaettu jaksoihin, jotka sisältävät seuraavia aiheita:

Sisältö yhtenä isona sivuna

Yleistä

Taustamäärittelyt eivät periydy automaattisesti lapsielementeille kuten eivät myöskään yleiset reunusmäärittelyt. Toisin kuin HTML 3.2 asiakirjoille koko asiakirjaa koskeva taustamäärittely voidaan HTML 4.0 dokumenteille antaa kahdelle elementille, nimittäin HTML ja BODY. Toteutuksissa on suuria ongelmia, joita käsittelen edempänä.

[Alku]

Taustaominaisuudet

Koko dokumenttia koskevat varsin yksinkertaiset taustamäärittelyt eivät ole ongelmallisia ja ne voidaan HTML 3.2 -dokumenttien tavoin BODY elementille. Useimmin käytetyt taustaominaisuudet näkyvät alla olevassa esimerkissä ([M][S][Pw] - ne määritellään useimmiten pikakirjoitteina[S][Pw], mutta esitän ne tällä kertaa yksittäisinä ominaisuuksina ja selitän lyhyesti, mitä kukin ominaisuus merkitsee):

body
{background-color: white;
background-image: url(./Taulut/kierrevihko.gif); /* tämä vastaa HTML 3.2 -tason taustakuvamäärittelyä */
background-repeat: repeat-y; /* määrittelee sen, toistuuko kuva ja jos toistuu niin millä tavoin */
background-attachment:fixed; /* määrittelee sen, rullautuuko taustakuva sivun mukana vai ei */
background-position: 2px 0px;} /* määrittelee taustakuvan sijainnin */

Taustaväri (background-color) voi saada myös arvon transparent, jolloin emoelementin väri kuultaa lävitse. Vaikka jotkut testiohjelmat ehdottavat asettamaan aina background-color ominaisuuden, jos väri on määritetty, menettely ei ole aina järkevää. Riittää, että BODY-elemtin taustaväri toimii hyvin tekstivärin kanssa.

Toiston arvot ovat background-repeat: repeat (oletusarvo eli että taustakuva toistuu joka suuntaan), no-repeat (ei toistu lainkaan), repeat-x, repeat-y (y=toistuu pystysuunnassa; x=toistuu vaakasuunnassa).
Background-attachment:fixed tai scroll (taustakuva ei liiku/ liikkuu sivun rullauksen mukana (oletusarvo)).

Background-position: %, numero- tai avainsana-arvo. Arvo lasketaan elementin reunoista käsin lukuun ottamatta background-attachment:fixed, jolloin arvo lasketaan näyttöportin mukaan (viewport = ikkuna (window), jossa dokumentti sijaitsee). Prosentti- ja numeroarvoissa ensin annetaan etäisyys vasemmalta ja sitten ylhäältä. Seuraavassa taulukossa avainsana-arvot ja niiden vastaavat prosenttiarvot (olen korostanut arvot, jotka on merkitty samalla logiikalla kuin prosenttiarvot):

top left tai left top
top, top center ja center top
right top or top right
left, left center ja center left
center tai center center
right, right center ja center right
bottom left ja left bottom
bottom, bottom center ja center bottom
bottom right ja right bottom
0% 0%
50% 0%
100% 0%
0% 50%
50% 50%
100% 50%
0% 100%
50% 100%
100% 100%

Taustaominaisuudet voi antaa mille elementille tahansa - erityisesti a:hover, a:active ja a:focus voi olla hyvin havainnolliset taustaominaisuudet. lue lisää seuraavilta sivuilta (kaikilla sivuilla ei ole paluulinkkiä tälle sivulle - käytä vaihtoehtoisia ikkunoita):

W3C: CSS1: CSS1 Test Suite; CSS2: 14 Colors ja Backgrounds; 14.2.1 Background properties[Pw].

Suositukseni:

  1. Suosittelen määrittelemään koko dokumentille tarkoitetut taustaominaisuudet sekä HTML että BODY elementeille. Varmista, että elementeillä ei ole reunuksia, marginaaleja tai täytteitä. Vähiten ongelmia syntyy käytettäessä JPG-kuvia.

  2. Kuvien tulee olla hyvälaatuisia. Ne pitää testata useilla sovelluksilla. Jos jokin sovellus ei pysty lukemaan kuvia ne tulee hylätä.

  3. Jos määrittelet taustakuville asemoinnin anna aina kaksi arvoa. Suosittelen pikseli- tai prosenttiarvojen käyttämistä. Älä käytä 10px center kaltaisia yhdistelmämäärittelyjä.

  4. Älä määrittele taustoja :first-letter ja :first-line pseudo-elementeille.

  5. En suosittele taustojen käyttöä :hover näennäisluokalle.

Selainkohtaisia huomautuksia:

  1. background-color: transparent ei toimi aina oikein kaikilla selaimilla, sillä jotkut selaimet määrittävän taustavärin BODY-elementin perusteella tilanteissa, joissa niin ei tule toimia. Jotkut selaimet saattavat tarvita näennäisluokkia käytettäessä tämän arvon kuvalinkeille (a:link img, a:visited img {background-color:transparent}) vaikka alla olevan elementin taustavärin pitäisi ilman muuta kuultaa lävitse. Määrittämällä toisinaan tietyn taustavärin ja toisinaan läpinäkyvän taustan syntyy ongelmia eikä background-color toimi aina halutulla tavalla.

  2. HTML ja BODY elementeille annetut taustaominaisuudet eivät aina toimi, jos sivut ovat kehysten sisällä. MS IE 4.x Windows kanssa läpinäkyvä GIF-kuva + the combination transparent GIF + taustaväri ei toimi koskaa oikein HTML elementin kanssa.

  3. Opera ei hyväksy takakenoviivaa (\) taustakuvien nimien poluissa (esim. .\kuvat\kuva1.gif).

  4. Sekä beeta että viralliset Opera 7.x -selaimet eivät hyväksy kaikkia GIF-kuvia taustakuviksi (myös eräät muut sovellukset, kuten esim. MS Windows XP on ongelmia niiden kanssa ja kuva, jonka kanssa Operalla on ongelmia ei toimi Windows XP:ssä pienoiskuvana (thumbnail)). Joskus, mutta hyvin harvoin Operalla ongelmia myös taustavärien kanssa. Käsittelen Operan erityisongelmia Operan ongelmia käsittelevällä lisäsivulla[S].

  5. background-position: 10px center kaltaiset yhdistelmät eivät toimi Mozilla Gecko -selaimissa.

  1. Jotkut background-position-ominaisuuden avainsana- ja prosenttiarvot (esim. center ja 50% 50%) eivät aina toimi Opera 5.12:ssa. Vaakatason prosenttiarvot toimivat ja niitä voi käyttää yhdessä pystytason pikseliarvojen kanssa, esim. 50% 200px (vika on korjattu Opera 6.x -sarjassa). Tosin CSS1 Test suite kaikki arvot toimivat P-elementin kanssa. Tämä asia tuntuu riippuvan elementistä ja Operalla on vaikeuksia nimenomaisesti elementin BODY kanssa. Suosittelen käyttämään seuraavan kaltaisia määrittelyjä:

    <style type="text/css" media="screen">
    <!--
    div#first {background: white url("../Kuvat/Css/Tree.gif) no-repeat 100px 65px;} /* mediatyypeille print ja projection on omat määrittelynsä */
    -->
    </style>
  2. Opera 6.x ei tue taustakuvia linkki- ja dynaamisille näennäisluokille[S] (korjattu Opera 7.0 Beta 2:ssa).

  3. Jos taulukoilla ja taulukkosoluilla on läpinäkyvä taustaväri ja taulukon taustaelementillä on taustakuva Opera näyttää vain taustalla olevan elementin taustavärin, ei taustakuvaa.

  4. Taustaominaisuudet eivät toimi Opera 7.x:ssä :first-letter näennäiselementille.

  5. :first-line näennäiselementille annetut taustaominaisuudet kaatavat MS IE 5.5 Windows -selaimen.

  1. Taustakuvien asemointi saattaa johtaa MS IE 4.x Windows -selaimissa siihen, että taustakuva menee muiden elementtien päälle.

  2. Jos taustakuva on GIF-animaatio, Opera 5.x ja vanhemmat selaimet näyttävät vain ensimmäisen kuvan (asia on korjattu uudemmissa versioissa ja olen testannut tämän asian Opera 6.04:lla).

  3. MS IE, Opera, Mozilla Gecko, Safari (Mac) ja Konqueror (Linux) tukevat PNG-kuvia mutta MS IE 4.x-6.x ja Opera 4.x-5.x eivät tue PNG-kuvien läpinäkyvyyttä. Eräissä Mozilla Gecko Linux-selaimissa ainakin osittain läpinäkyvät PNG-kuvat toimivat taustakuvina erittän huonosti ja Konquerorissa jotkin kuvat toimivat huonosti.

  4. background-attachment:fixed toimii vain sangen uusissa selaimissa. Testieni mukaan se toimii MS IE:ssä vain elementeille HTML ja BODY. Opera 4.x+ ja Mozilla Gecko -selaimissa se toimii laaja-alaisemmin. Tosin sivun rullaus saattaa Operalla aiheuttaa katkonaista tekstiä. Lisäksi on huomattava, että Opera 6.x laskee asemoinnin virheellisesti elementin omasta asemoinnista käsin (korjattu Opera 7.0 Beta 2:ssa).

  5. Taustakuvan asemointi ei toimi Netscape 4.x -selaimissa.

  6. Netscape 4.x ymmärtää virheellisesti taustakuvien sijaintipolu. Jos haluat taustakuvien toimivan sille oikein lue vihjeeni[S][Pw] miten suhteelliset viittaukset tulee määritellä Netscape 4.x -selaimille (vihjeet on englanniksi).

[Alku]

Reunaominaisuudet

Reunukset ovat kivoja ja ne voivat olla joka sivulla (top, bottom, left ja right) erilaisia. Voit määritellä erilaisia paksuuksia (border-width), värejä (border-color) ja tyylejä (border-style). Värit ja paksuudet voi määritellä kuten missä tahansa elementissä. Paksuudelle on kolme keyword-arvoa: thin, medium (oletusarvo, joka on voimassa, mikäli paksuutta ei ole määritelty) ja thick.

CSS1:n reunustyylejä ovat dotted, dashed, solid, double, groove, ridge, inset, outset sekä arvo none (se antaa reunuksen paksuudelle arvon 0). CSS2:ssa on lisäksi arvo hidden, joka on muuten edellisen kaltainen, mutta ottaa määritellyn tilan (esim. border: hidden 5px;).

Mikäli halutaan näkyvät reunukset, reunusten paksuutta ja väriä ei ole pakko antaa. Jos väriä ei ole määritelty, sen pitäisi olla sama kuin reunuksellisen elementin tekstin värin. Selainten tulee kuitenkin saada reunustyyppi, sillä oletusarvona on none eli se, että ei ole lainkaan reunuksia.

W3C: CSS2: CSS2 8 Box model; 8.5.3 Border style[Pw].

Seuraavassa on malli lohkositaatille (BLOCKQUOTE) tehtävästä reunusmäärittelystä (mallin[S][Pw] määrittelyt eivät ole välttämättä mitenkään mielekkäitä, mutta ovat silti toimivia):

blockquote
{padding:10px; /* padding antaa täytearvon reunuksen sisään laitettaville elementeille ja tekstille - margin ja padding voidaan antaa kaikille reunoille pikakirjoitteena alempana olevien esimerkkien tapaan; negatiiviset margin-arvot ovat sallittuja, mutta padding ei voi saada negatiivia arvoja */
border: olive 5px solid; /* pikakirjoiteyleisarvot reunuksille, joka voidaan myöhemmin ohittaa - joka reunalle ei tämän kautta voi laittaa arvoja vaan täyttyy käyttää alimäärittelyitä */
border-style:inset; /* tässä kaikilla sivuilla sama reunus - tämä ohittaa edellisen määrittelyn arvon solid ja kukin seuraavista kolmesta ohittaa aina edellisen arvon */
border-style:inset outset ; /* tässä ensimmäinen koskee ylä- ja alareunaa ja toinen vasenta ja oikeaa reunaa */
border-style:inset outset inset; /* tässä ensimmäinen koskee yläreunaa ja toinen vasenta ja oikeaa reunaa ja kolmas alareunaa */
border-style:inset outset inset outset; /* tässä ensimmäinen koskee yläreunaa, toinen oikeaa, kolmas alareunaa ja neljäs vasenta reunaa eli arvot menevät myötäpäivään */
border-width: 10px 5px 10px; /* toimivat samalla logiikalla kuin border-style -arvot ja viimeksi mainittu ohittaa ensiksi annetun arvon */ }

Voit katsoa myös sivun Miten CSS liitetään Web-sivuihin[S][Pw] malleja.

Yleisiä huomautuksia:

  1. Reunukset ovat ikään kuin elementin ulkoreunaan piirtyviä kehyksiä, joiden ainoa ominaisulottuvuus on niiden paksuus. Se, miten reunukset huomioidaan elementtien dimensioita laskettaessa riippuu width attribuutista or ominaisuudesta.

  2. Reunukset voi teoriassa antaa käyttäen myös ominaisuutta outline (esim. outline:#660033 1px solid;). Kaikilla reunoilla on aina samanlaiset reunukset. Ominaisuudella outline määriteltyjen reunusten periaatteellinen ero border nähden on siinä, että outline ei saa muuttaa toisten elementtien sijoitusta eikä sitä oteta mukaan elementtien dimensioita laskettaessa. Se saa siis mennä dokumentin kaiken sisällön päälle.

  3. Koska kaikenlaiset reunukset ovat elementtien esitysasua koskevia piirteitä, CSS2:n perustehtäviin kuuluu, että se joko pystyy poistamaan kaikki mahdolliset reunukset tai muuttamaan minkä tahansa reunuksen esitystapaa. Kuvien reunusten kohdalla (<IMG border=""...>) ei ole mitään periaatteellisia ongelmia. Koska selaimet käyttävät HTML:llä annettuja reunuksia ikään kuin oletusominaisuuksina, reunusten tyyppiä ei tarvitse määrittää CSS:llä. <TABLE border> kohdalla tilanne on monimutkaisempi. CSS2:ssa on määritelty erityissäännöt, miten reunuksia käsitellään taulukoissa (käsittelen taulukoiden reunuskysymyksiä sivulla 10[S]).

  4. Teoriatasolla CSS:n pitäisi pystyä muuttamaan myös kaikkien lomake-elementtien reunuksia, mutta CSS2:ssa ei ole riittävästi ominaisuuksia määrittelemään, miten niiden kanssa tulisi menetellä (käsittelen lomake-elementtejä edempänä).

Selainkohtaisia huomautuksia:

  1. MS IE tulkitsee arvot suhteelliset arvot paksumpina kuin Opera ja Netscape (niille ei ole annettu ohjearvoja eikä MS IE toimi spesifikaation vastaisesti). Täsmälleen saman paksuuden määrittäminen edellyttää numeeristen arvojen käyttämistä.

  2. Tyylit dotted ja dashed eivät toimi MS IE 5.5 Windows -selainta vanhemmissa versioissa.

  3. Opera 3.51+. tukee kaikkia näkyviä reunustyylejä. Uudemmat selaimet tukevat myös arvoa hidden kuten myös Mozilla Gecko -selaimet.

  4. Mikäli reunusväriä ei ole määritelty MS IE käyttää taulukoissa reunusvärinä vaalean harmaata, joka on toinen elementille TABLE border-attribuutin antamista reunusväreistä.

  5. Outset and inset eivät toimi värin black kanssa MS IE 5.x -selaimissa. Lopputulos on aina erilainen, sillä MS IE käyttää useampia sävyä Operalla ja Netscape. Syynä on todennäköisesti se, että MS IE käyttää elementille TABLE epästandardeja attribuutteja, esim. bordercolorlight="#eeeeee" bordercolordark="#1111111".

  6. Ominaisuus outline on toiminut vain joissakin Netscape 6.0:n esiversioissa ja Opera 7.x:ssä. Viittaan ominaisuuteen myös sivulla 6[S] ja englanninkielisissä CSS-kommenteissa[S].

[Alku]

Taustat ja reunat lomakkeille ja kehyksille

Kokoavat lomake-elementit (FORM, FIELDSET) ovat ongelmattomia, koska niiden käsittelyyn voi soveltaa CSS2:n laatikkomalleja (box models) - ne ovat selkeitä lohkoelementtejä.

Sen sijaan CSS:n sovittaminen lomakekontrollielementteihin (BUTTON, ISINDEX, LABEL, LEGEND INPUT, OPTION, OPTGROUP (tuettu vain uusissa Netscape/Mozilla-selaimissa), SELECT ja TEXTAREA) on ongelmallista. Olen keskustellut niistä erään Mozilla org. suunnittelijan kanssa, joka on ollut yhteydessä W3C:hen. Tämän keskustelun pohjalta on tullut esille, että on ylipäätänsä kyseenalaista sovittaa CSS:ää lomakekontrollielementeille, koska niiden käytös ei vastaa CSS:n nykyistä laatikkomallia. Niitä ei siten voi kuvata CSS:llä (mikä näyttötyyppi (display type) olisi esim. lomakenapilla), joten niille ei ole olemassa mitään standardia. Kaikki yritykset sovittaa tyylejä lomakekontrollielementeille ovat usein ongelmallisia.

Henkilökohtainen mielipiteeni on se, että selainten tulisi pystyä soveltamaan lomakekontrollielementteihin kaikkia sellaisia ominaisuuksia, jotka eivät ole riippuvaisia laatikkomallista. Tällaisia ominaisuuksia ovat ainakin tekstityyliin ja fontteihin liittyvät ominaisuudet. Kaikki uudet selaimet toimivat tässä suhteessa hyvin.

Ongelman ydin on oikeastaan siinä, mitä luonnostaan reunukselliset lomakekontrollielementit, kuten SELECT itse asiassa ovat. Niiden luonne on poikkeuksellinen. Ne voidaan ymmätää ikään kuin upotetuiksi objekteiksi, elementin IFRAME tapaan, jolla on oletuksena kehysreunukset. Selaimet eivät korvaa em. elementin kehysreunuksia CSS:llä. Ne saa pois vain määrittämällä frameborder="0". Elementtien SELECT ja IFRAME reunukset ovat saman tyylisiä, joten esim. elementin SELECT reunuksia voidaan periaatteessa tulkita niin, että sillä olisi ikään kuin frameborder="1", jota ei voi määritellä toiseksi. Tällöin CSS-reunukset tulevat näiden olemassa olevien reunusten ulkopuolelle ja elementti saa tuplareunukset. Koska useimmilla lomakekontrollielementeillä on HTML:ssä luonnostaan reunukset toisin kuin TABLE ja IMG elementeillä, joille voi lisäattribuuttina ne määritellä, ne ovat lomake-elementeissä hieman erikoisasemassa.

Elementtien FRAME ja FRAMESET tulisi saada reunukset samaan tapaan kuten IFRAME.

CSS voi kuitenkin poistaa tai korvata TABLE ja IMG elementeille määritellyt HTML-reunukset, myös korvausperiaate on looginen, mutta se rinnastaa lomakekontrollielementit eri tavalla muihin elementteihin - niitä käsitellään enemmän tavanomaisina elementteinä eikä ikään kuin upotettuina erikoisobjekteina. Näin myös sivulla 1b[S] mainitsemani CSS:n yleisperiaate pääse toteutumaan paremmin.

Eräs W3C:n CSS-työryhmän jäsen sanoi, että selaimille pitää antaa oikeus käyttää ns. widget-kirjastoja (widget libraries, jotka määrittävät lomakekontrollielementtien ulkoasun, koska niiden käyttö on selaimelle nopeampaa. Lomakekontrollielementit voidaan lainata käyttöjärjestelmästä, jolloin niiden reunustyyppeihin ei voi vaikuttaa. On kuitenkin mielekästä antaa Web-suunnittelijoille mahdollisuus muuttaa reunuksia, jolloin lomakekontrollielementtejä ei voida enää lainata käyttöjärjestelmältä. Koska CSS joissakin tapauksissa kasvattaa sivujen latausaikoja, sivujen tekijän vastuulle pitää ylipäätänsä jättää se, haluaako hän kasvattaa CSS:n avulla sivujen latausaikoja vai ei. Selaimen ei pidä tehdä tätä päätöstä sivujen tekijän puolesta! Puuttuvat piirteet lisätään CSS3[S] spesifikaatioon, jolloin lomakekontrollielementit voidaan toteuttaa standardilla tavalla. Sitten kuin CSS3 tulee valmiiksi, selainvalmistajat tulee velvoittaa sitä noudattamaan.

W3C: User Interface for CSS3.

Suositukseni:

  1. Suositan, että määritä lomakekontrollielementeille vain tekstiin ja leveyteen liittyvät ominaisuudet.

  2. Jos INPUT elementtiä käytetään painikkeena, älä määrittele sille reunus- ja taustaominaisuuksia. Pidän reunusten määrittelemistä n lomakekontrollielementeille ylipäätänsä kyseenalaisena.

  3. Älä määrittele INPUT-elementille korkeutta CSS:n avulla. Myös padding-ominaisuuden käyttöä olisi syytä välttää.

  4. Älä yritä muuttaa tavanomaisten kehysten esitysasua CSS:llä.

Selainkohtaisia huomautuksia:

  1. Vanhemmat Opera (4.x ja vanhemmat) ja Netscape 4.x -selaimet eivät tue kaikille lomake-elementeille perus tekstiominaisuuksia.

  2. Lomakekontrollielementtien toteutukset ovat saamani s-postin mukaan nämä ovat Mac-selaimissa täysin erilaisia. Esim. Mac IE 5.0:ssa SELECT on nappulamainen eikä laatikkomainen.

  3. Lomakepainikkeet näyttävät monissa selaimissa paremmilta, jos niille ei anna CSS:llä tausta- ja reunusominaisuuksia. MS IE Windows XP, MS IE Mac käyttävät pyöristettyjä lomakepainikkeita. Myös Opera 7.x:n eräät pinnat (engl. skin) käyttävät pyöristettyjä tyylikkäitä painikkeita.

  4. Taustaominaisuudet eivät toimi Opera-selaimissa (6.x -sarjaan asti).

  5. Reunusten toimivuus on lomake-elementtien suhteen on erityisen huono Netscape 4.x -selaimissa, joissa reunusten liittäminen elementille SELECT estää lomakekontrollin toimimisen.

  1. Opera lisää versioon 6.x asti reunukset elementeille INPUT, SELECT ja TEXTAREA vakioreunuksen ulkopuolelle. Opera tulkitsee elementit ikään kuin upotettuina objekteina lainaten ne käyttöjärjestelmältä. Opera 7.x lähtien Opera näyttää lomakkeet radionappia ja OPTION-elementtiä lukuun ottamatta samaan tapaan kuin Mozilla Gecko selaimet. Elementille OPTION ei voi antaa SELECT-elementistä poikkeavia väri- ja taustaominaisuuksia eivätkä taustakuvat toimi OPTION-elementille.

  2. MS IE Windows, Mozilla Gecko ja Opera 7.x+ -selainten kohdalla CSS korvaa alkuperäiset reunukset elementin INPUT suhteen tietyissä tilanteissa (<INPUT type="text">) ja elementin TEXTAREA suhteen (Mozillan ja Opera 7.x+:n kohdalla myös elementin SELECT suhteen, joka ei tule reunuksia tälle elementille).

  3. Dynaamiset näennäisluokat toimivat lomakekontrollielementeille vain Opera 7.x+ ja Mozilla Gecko -selaimissa.

  4. Opera 7.0 Beta 1 on ainoa selain, joka näyttää elementin BUTTON kaikissa tilanteissa täysin oikein. Uudemmissa Opera-selaimissa ei toimi em. elementille display:block. Mozilla Gecko -selaimissa ei puolestaan toimi text-align ominaisuus.

  5. Mozilla Gecko selaimissa lomake-elementien dimensioiden määrittelytapa vaihtelee. Jotta dimensioit olisivat mahdollisimman samalaisia, tulisi niille lisätä joko -moz-box-sizing:border-box tai -moz-box-sizing:content-box (CSS3:een on lisätty on omainaisuus box-sizing, jota käsittelen eräällä lisäsivulla[S]).

  1. Mozilla Gecko -selaimet antavat ehdotuksen siitä, miten CSS3:n mukaan toimiva selain voisi esittää lomakekontrollielementit. Otin Mozilla 0.7:stä kuvakaappauksen[S]. Jos voit, kokeile alla olevaa testilomaketta Opera 5.x+, MS IE 5.x+ ja Netscape 6.x+ -selaimissa ([M][S][Pw]):

    *{font-family:Verdana, Arial, sans-serif; font-size:14px}
    form {border:1px solid black; background-color:aqua; padding:10px;}
    fieldset, isindex {border:1px solid black; padding:2px; margin:2px; width:100%}
    fieldset#first {background-color:white}
    fieldset#second {background-color:olive;}
    fieldset#third {background-color:lime;}
    legend, label {font-weight:bold; color:red; border:1px solid red; background-color:white}
    select, input, textarea {border:2px outset red; background-color:#ffc; width:200px; font-weight:bold}
    optgroup#two {background:aqua url(./Css/Kuvat/pallo.gif) no-repeat; padding-left:16px;}
    option, textarea, input {background:#ffc url(./Css/Kuvat/pallo.gif) no-repeat; padding-left:16px}
    button {background-color:#ccc; border:3px outset gray; padding:10px; width:200px} input[type="radio"]{height:15px;}

    CSS:n päämääränä on korvata HTML:n esitysasullisia piirteitä mahdollisimman paljon. <INPUT type="radio"> kohdalla CSS3:n pohjalta on toistaiseksi avoin kysymys, pitäisikö radionapille laittaa ylimääräiset reunukset vai pitäisikö alkuperäinen kokonaan korvata.

  1. Vaikka Netscape 6.x+ pystyy muuttamaan kaikkien lomake-elementtien esitysasua, jos lomakkeita käytetään XML-documenteissa, edes Netscape 6.x ei pysty CSS2:n puitteissa määrittelemään tarpeeksi sääntöjä ja ominaisuuksia kaikkien lomake-elementtien luonnollisten ominaisuuksien esittämiseksi. Tosin Netscape/Mozilla määrittelee esitysasulliset piirteet selainkohtaisella CSS:llä tiedostossa /res/forms.css, jolloin periaatteessa jo nykyisin se voisi toteuttaa esitysasulliset XML-dokumenteille vaadittavat lomakepiirteet. Mainitsen Mozillan selainkohtaisista piirteistä CSS-taulukoissa (form-related pseudo-classes[S] ja outline[S] kohdalla).

  2. Opera 7.x+ tukee outline ominaisuutta, mutta se ei toimi kunnolla lomakekontrollielementeille.

  3. Lomakekontrollielementtien korkeus- ja leveysominaisuudet ovat MS IE 6.0:ssa DTD-riippuvaisia[S]. Korkeuden määrittely saattaa aiheuttaa huomattavasti erilaisia lopputuloksia eri selaimissa.

  4. CSS toimii FRAME ja FRAMESET elementeillä vain MS IE selaimissa tilanteissa, joissa kehyksissä on todellista sisältöä. Mozilla Gecko -selaimet piilottavat yleensä määritellyn CSS:n todellisen tai kuvitellun kehysasiakirjan taakse. Jos ilmoitettua dokumenttia ei löydy Mozilla 1.1a:lle CSS:llä voi määritellä taustaominaisuudet ja reunukset FRAME ja FRAMESET elementeille (eräille vanhemmille versioille voi vain saada näkyviin vain elementille FRAMESET määritellyt reunukset).

[Alku]

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]

Erityisongelmia

Aiheet

Lohko- ja rivinsisäiselementit

CSS2 tarjoaa sangen monimutkaiset säännöt erilaisten elementtityyppien käsittelylle, mistä johtuu monia ongelmia.

Tavanomaiset ei-korvattavat rivinsisäiselementit (esim. STRONG) ei tulisi ottaa width jaheight ominaisuuksia. Sen sijaan korvattavat elementit (replaced elements) , esim.IMG, voivat ne saada. Ei-korvattavat tekstielementit voivat saada line-height ominaisuuden ja ne voivat vaikuttaa rivikorkeuteen myös font-size ominaisuuden avulla, koska pystytason margin ja padding-arvojen ei tule vaikuttaa rivikorkeuteen siten, että elementit aina mahtuisivat riville. Asemoinnin ja rivikorkeuden suhteen korvattavien rivinsisäiselementtien tulee käyttäytyä kuten ei-korvattavien elementtien.

Mahdolliset border ja background ominaisuudet voivat aiheuttaa sen, että ei-korvattavat rivinsisäiselementit menevät osittain päällekkäin. Korvattavilla elementeillä positiiviset margin, padding jaborder arvojen tulee kasvattaa rivikorkeuksia niin, että elementit aina mahtuvat riville.

Pystytason marginaalit menevät normaalisti kasaan (käsittelen poikkeuksia myöhemmin), jolloin esim. kahdelle perättäisille lohkoelementeille annetut samat ylä-ja alamarginaalit tuottavat yksinkertaisen, ei kaksinkertaista marginaalia.

W3C: CSS1 Test Suite: sec42.htm and sec44.htm; CSS2: 8.3.1 Collapsing margins.

HTML 3.2-koodauksessa rivinsisäis- ja lohkoelementtien asemoinnit on määritelty puutteellisesti align ja valign attribuuttien avulla. Ne määrittävät toisinaan lohkoelementtien sisällä olevien rivinsisäiselementtien ja muun sisällön asemointia. Toisinaan ne määrittävät lohkojen itsensä asemointia suhteessa ympäröivään emoelementtiin.

Vaaka-asemoinnin kohdalla nämä kaksi asiaa on täysin erotettu toisistaan. Ominaisuus text-align koskee kaikkea lohkoelementin sisällä olevaa rivinsisäistason sisältöä. Täten text-align:center keskittää rivinsisäiselementin ja muun rivinsisäistason sisällön. Ominaisuus ei saisi vaikuttaa millään tavoin lohkoelementin itsensä asemointiin eikä sillä ole mitään vaikutusta rivinsisäiselementteihin.

Määrittelyn margin:auto pitää aiheuttaa lohkoelementtien (tai lohkoelementeiksi määriteltyjen elementtien) vaakakeskityksen mutta ei pystykeskitystä.

Pystykeskitykselle on ominaisuus vertical-align (mahdolliset arvot ovat: baseline, top, bottom, middle, sub, super, text-top, text-bottom + positiiviset ja negatiiviset prosentti- tai pikseliarvot (jälkimmäiset eivät kuulu CSS1:n arvoihin). Se vaikuttaa normaalisti vain lohkojen sisällä oleviin rivinsisäiselementteihin. Taulukkosoluissa sillä on sama tehtävä kuin valign attribuutilla (vain arvot top, middle jabottom ovat käytettävissä). Antamalla koko taulukolle tai yksittäiselle solulle korkeus ja yksittäisille solulle valign attribuutti tai vertical-align ominaisuus on mahdollista keskittää elementtejä pystytasossa. Jos BODY ja TABLE elementeille on määritelty korkeudeksi100% tai hieman vähemmän elementti voidaan suurin piirtein keskittää sivun keskelle. Tosine CSS2-spesifikaatio itsessäänf[S] sisältää sen ongelman, että mille tahansa lohkoelementille ei saa pystykeskitystä.

Alla on esimerkki lohkoelementistä muutamin kommentein höystettynä ([M][S][Pw]):

p.special
{border:1p solid blue;
text-indent: 3em; /* ensimmäisen rivin sisennys */
margin:10px; /* tämä suhteutetaan säilytinlohkoon (normaalisti säilytinlohko on elementin emoelementti, mutta ei tapauksissa, jossa elementti on absoluuttisesti tai kiinteaästi asemoitu (käsittelen absoluuttisesti tai kiinteästi asemoituja elementtejä sivulla 11[S])), jossa kappale on; negatiiviset arvot ovat sallittuja; muista myös marginaalien ja täytteiden pikakirjoitemäärittelyt! */
padding:10px; /* sisennys tekstille, joka on kappaleen sisällä; negatiiviset arvot eivät ole sallittuja */
text-align:justify; /* tekstin vaaka-asemointi; muut arvot ovat: left; center and right */
vertical-align: top;
/* arvo ei periydy ja se vaikuttaa lohkon sisällä olevan tekstin ja muiden elementtien keskinäiseen pystyasemointiin */
font: normal small-caps 120%/120% fantasy;

Sivujen tekijät voivat käyttää lohko- ja rivinsisäiselementtejä virheellisesti ja panna rivinsisäiselementin sisälle lohkkoelementitejä. Ole huolellinen rivinsisäiselementtien käytössä. Älä laita lohkoelementtejä rivinsisäiselementtien sisälle (käsittelen elementtien käyttöämyös erläällä the usage of elements also in lisäsivulla[S]).

Ainoat elementit, jota voi käyttää sekä rivinsisäis- että lohkoelementtinä ovat INS jaDEL. Mutta niitä ei tule käyttää samanaikaisesti sekä rivinsisäis- että lohkoelementteinä.

Selainkohtaisia huomautuksia:

  1. Jos rivinsisäiselementtejä on käytetty lohkoelementtien ulkopuolela MS IE näyttää tällaisille elementeille määritellyn CSS:n useimmissa tapauksissa kuten lohkoelementeille. But käytettäessä CSS:ää uusien Netscape/ Mozilla Gecko -selainten kanssa pitää olla tarkka. Olen huomannut, että virheellinen rivinsisäiselementtien käyttö aiheuttaa ylimääräisiä rivikatkoja eivätkä CSS-ominaisuudet toimi suunnitellulla tavalla.

  2. Ominaisuuden vertical-align toteus vaihtelee hyvin suuresti. Suosittelen testaamaan erityisesti ominaisuuden vertical-align mahdollisimman monessa selaimessa CSS1 Test Suite. Se toimii sangen hyvin ainakin Mozilla Gecko, Opera 4.x+ and MS IE 5.5+ Windows -selaimissa.

  3. En suosittele käyttämään TD elementille vertical-align:middle koska se tuottaa eräille selaimille ongelmia. Taulukkoja apuna käyttävä pystykeskitys ei toimi Opera 7.2x -selaimissa.

  1. Koska Mozilla Gecko -selaimet antavat kuville (IMG) standard -moodissa[S] CSS2-spesifikaation mukaisesti vertical-aling:baseline, yksinäiset taulukkosolujen sisällä oleville kuvien ympärille tulee tyhjää tilaa. Sen poistamiseksi täytyy määrittää joissakin tilanteissa kuville vertical-aling:bottom. Koska muut selaimet käyttävät muuta oletusarvoa niissä ei ole tätä ongelmaa.

  2. MS IE 4.x-5.0 -selaimissa on vakava toteutusvirhem sillä reunukset eivät toimi ei-korvattaville rivinsisäiselementeille. Jos sivujen tekijä on määrittänyt height -ominaisuuden, selaimet näyttävät reunukset, mutta virheellisesti (katso joitakin esimerkkejä virhesivulta[S][Pw]; voit katsoa joitakin esimerkkejä myös englanninkieliseltä sivulta, joka käsittelee virheellisiä määrtiyksiä[S][Pw] - ei paluulinkkiä tälle sivulle).

    MS IE 5.5+ toimii oikein, jos ominaisuutta height ei ole määritelty. Ominaisuus height works toimii tavanomaisille rivinsisäiselementeille standard-compliant -moodissa[S] vain jos niille on määritelty display:inline-block, jolloin selain toimii CSS3:n mukaisesti (käsittelen ominaisuutta display sivulla 11[S]).

  1. Netscape 4.x näyttää reunukset samalla lailla virheellisesti kuin MS IE ominaisuuden height kanssa..

  2. text-align vaikuttaa MS IE 4.x Windows -selaimissa taulukon itsensä asemointiin. text-indent saattaa aiheuttaa MS IE 5.0 -selaimessa ylimääräistä vasenta marginaalia. Text-align:justify toimii testaamistani selaimista oikein vain MS IE 5.x+ Windows ja uusissa Mozilla Gecko -selaimissa (Opera tekee virheitä, jos lohko sisältää rivinsisäiselementtejä, jotka eivät sovi samalle riville, mutta normaalisti selain toimii hienosti). Netscape 4.x voi näyttää vain hyvin yksinkertaisia dokumentteja.

  3. Selaimet toteuttavat kasaan menevät marginaalit vaihtelevassa määrin virheellisesti. Minulla on tähän tarkoitukseen testisivut[S].

  4. margin:auto toimii testaamissani selaimissa oikein vain Opera 4.x+, uusissa Mozilla Gecko, MS IE 6.0 Windows ja Konqueror (Linux) -selaimissa (ja erään kuvakaappauksen perusteella myös Safari-selaimissa (Mac-selain)). Jotta elementit saisi keskitetty vaakatasossa vanhemmissa MS IE -selaimissa on järkevää asettaa yksi CENTER elementti haluttujen elementtien ympärillä. Koska jotkut Opera ja Mozilla Gecko -selaimet saattavat jättää huomioimatta CENTER elementin vaikutuksen myös margin-left:auto; margin-right:auto on välttämätön.
[Alku]

Lohkojen dimensiot

Monesti on mielekästä määritellä reunustettavalle elementille width ja height ominaisuudet. Niiden määrittelyssä on kuitenkin eräitä ongelmia.

Perussyy ongelmiin lienee siinä, että HTML spesifikaatioissa width ja height attribuutit lasketaan toisinaan eri lailla kuin CSS:ssä. CSS2:ssa em. ominaisuudet ovat aina sisällön dimensioita ilman että mukaan lasketaan padding, border tai margin arvoja. HTML:ssä width ja height attribuutit sisältävät joskus reunukset ja täytteet eli koko lohkolaatikon (block box) dimensiot.

Sisältöleveys (content width) merkitsee konkreettiselle sisällölle annettavaa varauslaatikkoa, esim. tilaa kuvalle, jolla on tietyt dimensiot. Esim. lohkoon, jolla on width:200px pitää mahtua seuraavat sisällöt:

<IMG src="..." alt="..." width="200" border="0">
<DIV style="width:200px; border-width:0; padding:0; margin:0">...<DIV>
W3C: CSS2: 8 Box model, 8.1 Box dimensions[Pw], 10.2 Content width: the 'width' property[Pw].
Muita sivustoja: Keijo Kortelainen: CSS:n lohkot ja laatikot; Web Design group: CSS Properties[Pw].

Tästä dimensio-ongelmasta voi osittain päästä sillä, että käyttää ylimääräistä tai ylimääräisiä elementtikerroksia. Ulompi elementtikerros määrittää kokonaisdimension ja sisemmälle annetaan margin, padding ja border -ominaisuudet. Näin ainakin lohkon leveys on sama yleisesti käytetyissä uusissa selaimissa. Taulukoissa tämän voi hoitaa siten, että taulukkosoluille laitetaan täytearvoja vaan taulukkosoluissa sisältö on aina jonkin lohkon sisällä. Vanhoja selaimia ajatellen voi antaa täytearvon cellpadding-attribuutilla, joka sitten ohitetaan CSS:n avulla.

Alla koodiesimerkki molemmista tapauksista ([M][S][Pw] - mallin lopussa on uusi testilohko):

td, th, div.sailytinLohko {padding:0; margin:0; border-width:0; width:220px} /* padding:0 eliminoi cellspacing="10" vaikutuksen */
div.sailytinLohko div, th div, td div {margin:10px; padding:10px; border:10px solid black}

<div class="sailytinLohko"><div>
Sisältö. </div></div>...

<table summary="Sisältöesimerkki" cellspadding="10">
<tr><td><div>
Sisältö.</div></td></tr>
</table>

CSS3 tarjoaa mahdollisuuden valita paras laskentatapa (käsittelen tätä asiaa sivulla, joka käsittelee spesifikaation ongelmia[S].

Toinen eteen tuleva ongelma on se, että kuinka tiukasti dimensiot on tulkittava. HTML-attribuutein määritellyissä taulukoissa dimensiot ovat vain minimiarvo. Näin CSS:ssä ei voida tavanomaisille lohkoille menetellä. Jos sisältö ei sovi annettuun arvoon, loppusisältö menee elementin ulkopuolelle - pahimmassa tapauksessa muun sisällön päälle.

CSS2:ssa tämä ongelma on ratkaistu antamalla mahdollisuus määritellä korkeudelle ja leveydelle raja-arvot (min-height, max-height, min-width ja max-width). Vaihtoehtoinen tapa on määrittää overflow:scroll tai overflow:auto, jolloin sitä osaa, joka ei mahdu lohkon sisälle voidaan skrollata.

Sen sijaan, että laittaa suuren määrän kerroksia, on yksinkertaisempaa määritellä perus CSS useimmille selaimille siten, että sivut toimivat suhteellisen hyvin ilman JavaScript tukea. Selainkohtainen CSS määritellään niille selaimille, jotka sitä todella tarvitsevat (katso malliksi lukemasi sivun lähdekoodi). Erityisen CSS:n tarve vaihtelee, sillä jokaisella selaimella on erilaiset viat.

Edellä esitettyjen asioiden lisäksi on otettava huomioon se, että selainten käyttäjät voivat pitää vasemmalla ja oikealla sivustalla työkalurivejä. Jos heillä on käytössä 800x600 pikselin monitori, käytettävissä olevan katselukanavan (viewport) eli ikkunan leveys on noin 730 pikseliä.

Suositukseni:
  1. Älä anna ainakaan padding eikä mielellään myöskään border ominaisuuksia elementeille, joille haluat tarkat leveysarvot (yhden pikselin reunukset eivät useimmissa tapauksissa ole haitallisia).

  2. Jos käytät DIV-elementtiä perusrakennuselementtinä anna lapsielementeille vaakatason marginaalit (taulukoille on syytä määritellä luokat, jotta useampikerroksisisia taulukoita käytettäessä marginaalit koskisivat vain ulointa kerrosta).

  3. Jos haluat, että asiasisältö näkyy kaikilla selaimilla keskellä sivua, määritä asiasisällön kokoavalle elementille margin-left:auto; margin-right:auto ja laita asiasisällön kokoavan elementin ympärille vielä CENTER elementti ilman mitään mittasuhteita.

  4. Vältä korkeusarvoissa tarkkoja mittasuhteita. Jos haluat antaa elementeille minimikorkeuden, tee se seuraavalla tavalla:

    div.jokinLuokka {height:...px} /* selaimille, jotka tulkitsevat korkeuden minimikorkeudeksi */
    div[class="jokinLuokka"] {height:auto !important; min-height:...px} /* selaimille, joille height ja min-height ovat kaksi eri asiaa */
  5. Määrittele leveydet niin, että sisältö mahtuu 800x600 näytölle. Alla olevassa esimerkissä leveys on määritelty DIV elementille:

    body, html {padding:0; margin:0}
    div.perusLohkolaatikko {margin:10px; width:710px} /* laskentakaava on 730 pikseliä - perussisältölohkon marginaalit */
    p, h1, h2, ... {margin-left:20px; margin-right:20px}
    /* muiden lohkojen dimensioita ei tarvitse välttämättä määritellä lainkaan, pelkät marginaalit riittävät */

Selainkohtaisia huomautuksia:

  1. MS IE Windows -selaimet laskevat width ja height ominaisuudet väärin (em. ominaisuuksiin lasketaan useimmiten mukaan täytteet ja reunukset) aina MS IE 6.0 Windows asti, mikäli selain ei toimi ns. standard-compliant moodissa[S]. Siinä kuten on MS IE 5.x Mac -selaimissa on ns. "DTD-kytkin". MS IE 6.0 toimii suhteellisen oikein lukuunottamatta elementtiä TABLE sekä arvoa 100%, joka ei toimi, sillä esim. body.CssSite {width:100%; border-width:0; margin:0; padding:0} aiheutti toisinaan vaakavierityspalkin, vaikka sen ei pitäisi sitä tehdä. MS IE 5.x Mac -selaimessa kytkin toimii kunnolla myös taulukoissa (käsittelen taulukoiden dimensio-ongelmia sivulla 10[S]).

  2. Dimensioihin tulee selainten välille suurempi ero, jos käytetään lohkoille ja niiden marginaaleille prosenttiarvoja (testasin margin:33%; width:67% vaikutusta). MS IE 5.x Windows laskee prosentin jäljellä olevan tilan mukaan kun vasen marginaali on ensin otettu pois laskuista, ei emoelementin sisällön leveydestä käsin. Tämä laskentatapa aiheuttaa sen, että Opera ja Netscape -selaimille saattaa tulee vaakavierityspalkit, mikäli sivut optimoidaan MS IE 5.x Windows-versioiden mukaan. Otin kaksi kuvaruutukaappausta:

  1. Dimensio-ongelmia voi yrittää ratkaista käyttämällä attribuuttivalitsimia, joita MS IE ei ymmärrä, esim. (vertaa lohkojen dimensioita sivustoilla oleviin "mittakeppeihin", jotka osoittavat oikeat dimensiot ([M][S][Pw])):

    div.nav, div.nav2 {padding:10px; border:10px solid black} /* reunojen ja sisennysten tulisi kasvattaa laatikon kokonaiskorkeutta */
    div.nav {height:180px; width:180px} /* height toimii koko lohkolaatikon minimikorkeutena MS IE:lle vaikka ei pitäisi; mikäli selain ei tue attribuuttivalitsimia, lohkon dimensioiden tulisi olla 220x220 pikseliä */
    div[class="nav"] {height:auto; min-height:160x; max-width: 160px;} /* koska sisältö ei välttämättä mahdu edellä annettuun kiinteään korkeusarvoon, Opera 4.x+:lle ja Netscape 6.x+:lle on annettu attribuuttivalitsinta käyttäen uudet ominaisuudet, joita MS IE ei ymmärrä - height:auto eliminoi height:180px merkityksen; huomaat että olen vähentänyt sisennysarvot korkeus- ja leveysominaisuuksien dimensioista */
    div.nav2 {height:160px; width:160px}
    /* vertailulohko, jolla tulisi olla samat dimensiot */

    Sain seuraavat testitulokset, jotka esitän kuvaruutukaappauksilla:

    • Mozilla 0.6[S] - täysin oikein.
    • Opera 5.01[S] - muuten oikein, mutta min-height on sama kuin lohkon kokonaiskorkeuden minimiarvo; se käyttäytyy tavallisesti samalla lailla kuin MS IE 5.x Windows -selaimella ominaisuus height.
    • MS IE 5.5[S] - molempien lohkojen kokonaismittasuhteet ovat liian pieniä. Käytetyllä DTD:llä MS IE 5.0 Mac - ja MS IE 6.0 Windows -selainten pitäisi näyttää päätestilohkojen oikealla puolella olevat vertailulohkot oikein.
  1. Prosenttiarvoiset korkeus ja leveysarvot eivät toimi oikein myöskään asemoiduilla elementeillä (käsittelen asemoitujen elementtien ongelmia sivulla 11[S]).

  2. MS IE tulkitsee height ja width väljästi ja sille ne merkitsevät minimiarvoa, jotka voi ylittyä, jos sisältö ei sovi annettuihin arvoihin. Opera ja Mozilla Gecko -selaimet tulkitsevat arvot tavanomaisissa lohkoissa tiukasti.

  3. Ominaisuudet min-height, max-height, min-width ja max-width toimivat yleisillä lohkoelementeillä vain Opera 4.x+, Mozilla Gecko, Konqueror (Linux) ja Safari (Mac - arvio tehty erään kuvakaappauksen perusteella) selaimissa. Koska haluan tämän sivuston kaventuvan käyttäjän tarpeiden mukaan, en ole asettanut kiinteää sivunleveyttä. Toivon, että MS voisi joskus tukea max-width jne. ominaisuuksia, sillä ne ovat ihanteellinen tapa hallita sivujen perusrakenteiden dimensioita.

  4. overflow:scroll ja overflow:auto eivät toimi Opera 6.x -selaimissa. Ne toimivat ainakin MS IE 4.x+, Mozilla Gecko ja Opera 7.x+ -selaimissa.

  5. Ominaisuudella height on myös ongelma, jota käsittelin lohko- ja rivinsisäiselementit yhteydessä.

  6. Mozilla Gecko -selaimet aiheuttavat erään ongelman, jota käsittelen sivulla Listat[S].

  7. MS IE -selaimille saa JavaScript-koodauksen avulla luotua max-width kaltaisen toiminnallisuuden, minkä selostan eräällä sivulla[S]).

  1. Kun kokeilin tätä prosettiarvolla (div.doc {width:99%}), MS IE 5.0 ei näyttänyt kaikkia elementtejä, jos kuville ei oltu annettu pikseliarvoja.

  2. Koska leveysarvot elementeille BODY ja HTML eivät toimi kaikissa selaimissa, on suositeltavaa käyttää elementtiä DIV (tai TABLE) peruslohkona.

  3. Koska eri selaimilla elementillä BODY voi olla oletusarvona joitakin sisennyksiä tai marginaaleja, sisennykset ja marginaalit tulee määritellä.

  4. .

Seuraava sivu käsittelee listoja, joissa myös on hyvä tietää, miten niille määrittelee eri ominaisuuksia, jotta ongelmilta vältyttäisiin.

[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