[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 11. Mikä on CSS2:n Visuaalinen muotoilumalli > 11. yhtenä isona sivuna
Normaalille sivulle

11. Mikä on CSS2:n Visuaalinen muotoilumalli

Aiheet

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

Sisältö yhtenä isona sivuna

Yleistä

Tämä sivu käsittelee oikeastaan CSS2 visuaalisen muotoilumallin (Visual formatting model, CSS2 9-11) tehokkaimpia keinoja. CSS tarjoaa eräitä mahdollisuuksia vaikuttaa dokumenttien struktuuriin.

Visible vai hidden?

W3C: CSS2: 9 Visual formatting model[Pw], 10 Visual formatting model details[Pw].

Tosin XML dokumenteissa voi käyttää vaihtoehtoisesti tai CSS:n kanssa XSL kieltä. CSS:n osaaminen on silti perustavalaatuinen kysymys XML dokumenttien luomisessa. CSS2 sisältää itsessään kuitenkin eräitä puuttuvia piirteitä (viittaan niihin sivulla Erikoistyylisivut[S]).

[Alku]

Div + float

Ominaisuus float siirtää elementtejä joko vasemmalle tai oikealle - elementit ikään kuin "kelluvat" näihin suuntiin. Tällä tavoin määriteltyjen elementtien pitäisi olla samalla vaakatasolla kuin elementtien, joille ei ole määritelty ominaisuutta float. Kelluvien elementtien korkeuden ei saisi vaikuttaa emoelementin korkeuteen. Kaikkien kelluvien elementtien (mukaan luettuna normaalisti rivinsisäiselementit) tulee käyttäytyä lohkoina. Ominaisuuden float kanssa käytetään usein ominaisuutta clear. Alla mainitulla sivulla on joitakin esimerkkejä, jotka käyttävät näitä ominaisuuksia:

W3C: CSS1 Test Suite: 5.5.25 float[Pw].

Alla on esimerkki, jossa on käytetyt näitä ominaisuuksia: ([M][S][Pw]):

img.icon
{float: left; /* kuva kelluu vasemmalle - toinen arvo on right */
clear: left;} /* kuvan vasen puoli on "siivottu" muista elementeistä (vaikka tilaa olisi useille kelluville elementeille kaikki kelluvat elementit ovat nyt omilla riveillään) - muita arvoja ovato left ja all (sen paremmin oikealla kuin vasemmalla puolellakaan ei ole mitään) */

Kelluvana elementtinä on järkevä käyttää elementtiä DIV, jolloin voi luoda kehys- ja taulukkovapaan perusrakenteen. DIV-elementteihin voi tehdä kelluvat linkkilistat. Tekstin voisi kirjoittaa kelluvan elementin viereen eikä olisi mitään tarvetta käyttää kehysvapailla sivuilla dokumentin perusmuotoiluun taulukoita (tiukasti ottaen taulukoiden käyttö dokumenttien perusrakenteen luomiseen on taulukoiden väärinkäyttöä).

Taulukot vai kelluvat elementit?

Itse asiassa on mahdollista luoda dynaaminen perusrakeene jakamalla sisältö kelluviin jaksoihin. 640x480 ja 800x600 näytöillä sivuilla näkyisi vain yksi palsta, mutta 1024x768 tai suuremmilla näytöillä voisi olla kaksi tai useampi palsta (esimerkkisivu[S] - käytä niin leveää ikkunaa kuin pystyt).

Ideaa voi soveltaa navigaatiokehyksiin, joilla ei ole tarkkaa leveysarvoa. Jos ominaisuutta float käytetään elementin IFRAME kanssa, joka sisältää päänavigointilinkit.

CSS2 antaa mahdollisuuden asettaa lohkoelementtien korkeudelle ja leveydelle maksimi- ja miniarvot. Olen joskus käyttänyt kehyksiä, koska ne toteuttavat sama kuin max-width CSS-ominaisuuden. Kehyksillä on muutamia haittatekijöitä, joiden vuoksi en enää niitä käytä kuin poikkeustapauksissa.

Annan sinulle esimerkin, joka on tarkoitettu käytettäväksi sivulla, jonka BODY-elementin luokka on CssSite. Perus teksti on DIV-elementin sisällä:

body.CssSite div {max-width:500px; text-align:justify; font-family: Verdana, Arial, sans-serif; font-size: x-small; margin-left:auto; margin-right:auto; border:1px solid #660033; padding:10px;}

Sen jälkeen kuin perus layout on määritelty, sivujen tekijä määrittää kaksi sisäkkäistä lohkoa kuten alla olevassa esimerkissä ([M][S][Pw]):

body.CssSite div {max-width:500px; text-align:justify; font-family: Verdana, Arial, sans-serif; font-size: x-small; margin-left:auto; margin-right:auto; border:1px solid #660033;padding:10px;}
body.CssSite div div {border:1px solid #660033; margin:0 10px 0 0; float:left; width:70px; height:200px; clear:left;} /* tässä lohkossa, joka on edellisen lohkon sisällä on varattu paikka linkeille; seuraavat lohkot ovat yksinkertaisia kappaleiden kaltaisia lohkoja, sillä päälinkkejä ei ole mielekästä esittää kuin kerran */

Tällaiset lohkot olisivat monessa suhteessa parempia kuin taulukot, joilla on kiinteät leveysarvot. Kapeissakaan ikkunoissa ei tulisi vaakavierityksiä, mutta tekstin leveys olisi sivujen tekijän hallittavissa.

Selainkohtaisia huomautuksia:

  1. Ominaisuudet float ja clear on toteutettu huonosti Netscape 4.x -selaimissa. Jos useampi elementti on samalla riville selain pistää kaikki elementit samaan "pinoo". Käy lävitse W3C:n CSS1 test suite ominaisuuden float kohdalta.

    W3C: CSS1 Test Suite: 5.5.25 float[Pw].

  2. MS IE 4.x for Windows ei pysty panemaan suurta määrää kelluvia elementtejä usealle riville. Saattaa olla mielekkäämpää käyttä taulukoita, jos tarkoituksena ei ole luoda vapaasti skaalautuvaa tekstiä. Jos haluat joustavat leveysarvot käytä prosenttiarvoja.

  3. Jos perusrakenne perustuu kelluville elementeille jotkut selaimet laittavat satunnaisesti vaakavierityspalkin. Systeemi pelaa sangen hyvin ainakin Opera 4.x+, MS IE 5.5+ ja Mozilla Gecko Windows-selaimissa (todennäköisesti myös monissa Mac ja Linux -selaimissa).

  4. Jos normaalisti rivinsisäiselementteinä käyttäytyvät elementit määritellään kelluviksi ne tarvitsevat ainakin ominaisuuden width. Muutoin ne näyttävät totaalisen erilaisilta eri selaimissa.

  5. Kelluvien elementtien kokonaiskorkeus saattaa joissakin MS IE -selaimissa kasvattaa emoelementin korkeutta. Asia on korjattu ainakin MS IE 6.0 Windows -selaimessa.

  1. Joissakin selaimissa kelluvat elementit siirtyvät hieman alaspäin eivätkä mene suoraan joko vasemmalle tai oikealle. Kelluvat elementit eivät siten asemoidu kaikissa selaimissa aivan samalla lailla.

  2. Ominaisuus clear ei toimi oikein ainakaan MS IE 5.x Windows[S] ja Netscape 6.1 -selaimissa. MS IE 4.x Windows -selaimessa ominaisuus clear aiheuttaa ylimääräisiä rivikatkoj (myös ominaisuus float voi niitä satunnaisesti aiheuttaa).

  3. Netscape 4.x ja vanhemmat Netscape-selaimet eivät tue IFRAME elementtejä. Selaimille, jotka eivät tue IFRAME elementtiä tulisi olla vaihtoehtoiset linkit.

  4. Max-width toimii testieni mukaan vain Opera 4.x+, Mozilla Gecko, Konqueror (Linux) -selaimissa (erään kuvakaappauksen perusteella myös Safari-selaimessa (Mac) ).

  5. Koska MS IE ei tue display ominaisuutta (käsittelen sitä edempänä) XML-tasoiseti ainoa keino joustavien sivurakenteiden luomiseksi XML-dokumenteille on ominaisuuden float käyttö. On syytä muistuttaa, että DIV + float näyttää tyystin toisenlaisilta selaimissa, jotka eivät tue CSS:ää. Nopeasti lataantuvat taulukot[S] ovat tässä mielessä taaksepäin yhteensopivia, mutta ne toimivat MS IE:ssä vain (X)HTML-dokumenteille. Yleisesti ottaen toinen keino kehysten korvaamiseen on ominaisuuden position käyttö, mitä käsittelen seuraavaksi.

[Alku]

CSS2:n asemointimalli (position model)

Aiheet

Yleistä elementtien asemoinnista

CSS2:ssa on erityinen asemointimalli (position model). Tässä mallissa position:static merkitsee tavanomaista asemointia jos mitään varsinaiseen asemointiin liittyviä ominaisuuksia ei ole annettu. Aino järkevä käyttö tälle arvolle on poikkeustilanteissa ottaa pois käytöstä muut asemointiarvot. Muut asemointityypit (suhteellinen, absoluuttinen ja kiinteä - relative, absolute ja fixed) antavat mahdollisuuden kerrostettujen elementtien käytölle (layered elements). Asemoidut elementit luovat uuden säilytinlohkon (containing block) sisään jääville elementeille.

Jotta kerrostettujen elementtien pinotasoa (stack level) voitaisiin kontrolloida käytetään z-index ominaisuutta. Mitä suurempi numeerinen arvo, sitää korkeammalla tasolla elementti on suhteessa toisiin elementteihin, joilla on myös z-index ominaisuus tai ominaisuutta ei ole määritelty lainkaan (elementit, joilla on z-index:3 asemoidaan korkeammalle kuin elementit, joilla on z-index:1 jne.; jos asemoitu elementti on toisen asemoidun elementille sisällä arvot koskevat vain suhteessa toisiin saman elementin sisällä oleviin elementteihin; suhteessa muihin elementteihin niillä on sama arvo kuin emoelementillä).

W3C: CSS2: 9 Visual formatting model[Pw], 10 Visual formatting model details[Pw]

Kun elementeillä on position:relative asemoidut elementit sijoitetaan suhteessa normaaliin eli staattiseen asemointiin. Yleisimmin käytetty asemointitapa on position:absolute. Tällä tavalla asemoitujen elementtien sijainti lasketaan yleensä alkusäilytinlohkon (initial containing block) peruteella eli juurielementistä käsin. Suhteellisesti ja absoluuttisesti asemoitujen elementtien suhteen esi-isäelementtien asemoinneilla on vaikutusta koska laskeminen aloitetaan lähimmästä asemoidusta esi-isäelementistä käsin. Siksi absoluuttisesti asemoidut elementit eivät ole aina asemoitu juurielementin mukaant. Absoluuttisesti asemoitujen elementtien paikka tulisi laskea säilytinelementin täytenurkista (padding edges), jolloin säilytinelementin margin ja border ominaisuuksilla on vaikutus, mutta padding ominaisuudella ei.

Elementit, jotka asemoidaan position:fixed sijoitetaan suhteessa näyttöporttiin (viewport) eli selainikkunaan, jossa sivu sijaitsee. Koska kiinteästiasemoitujen elementtien laskemiskohdilla on aina samat sijainnin toisin kuin muissa asemointityypeissä muiden elementtien asemoinneilla ei ole vaikutusta kiinteästi asemoitujen elementtien sijainteihin. Kiinteästi asemoidut elementit, jotka ovat kiinteästi asemoitujen elementtien jälkeläiselementtejä aloittavat aina sisään sijoitettavien elementtien asemointipaikkojen laskemisen aivan alusta.

Absoluuttisesti ja kiinteästi asemoidut elementit ovat kokonaan pois elementtien normaalista asettelusta. Siksi tällä tavoin asemoitujen elementtien leveys ja korkeus ei millään tavoin vaikuta muiden elementtien sijainteihin tai mitoituksiin. Absoluuttisesti tai kiinteästi asemoitujen elementtien mitoituksia ei voi määritellä prosentuaalisesti suhteessa staattisesti asemoituihin emoelementteihin.

<body>
<div style="position:static"><div style="position:absolute; height:500px; width:500px; top:0; left:0"</div></div>
<!-- staattisesti asemoidun elementin korkeus on nolla --> <div style="position:static; height:500px; width:500px;"><div style="position:absolute; height:100%; width:100%; top:0; left:0"</div></div>
<!-- absoluuttisesti asemoidun elementin korkeus ja leveys tulisi laskea HTML elementin perusteella --> -->

Absoluuttisesti asemoidut elementit

Alla on esimerkki tyypillisestä absoluuttisesti asemoidun elementin käyttötavasta ([M][S][Pw]):

...
html, body {margin:0; padding:0; border-width:0}
...

<DIV style="position:absolute; top:10px; left:10px; z-index:5; width:400px;">
... </DIV>
<IMG src="./Taulut/koneet.gif" style="position:absolute; left:20px; top:50px; z-index:3">
<IMG src="../Kuvat/Css/omakuvaIso.gif" style="position:absolute; left:100px; top:20px;z-index:4">
<DIV style="position:absolute; top:290px; left:10px; z-index:5; width:400px;">
<DIV style="border:1px solid black; padding: 5px">...
...</DIV></DIV>

Suositukseni:

  1. Asemoinnit määritellään aina Web-sivun vasemmasta yläkulmasta left ja right ominaisuuksia käyttäen kuten edellä ollessa esimerkissä on toimittu.

  2. Asemoiduille elementeille on aina määritelty ominaisuus z-index ja tarvittaessa myös muille elementeille.

  3. Elementille BODY ja säilytinelementeille ominaisuudet margin-top, margin-left, padding-top, padding-left, border-left-width ja border-top-width on määritelty nollaksi. Käyttämällä padding-right jne. tulee dimensio-ongelmia[S]. Paras lopputulos saadaan, jos reunukset jne. määritellään ei-asemoiduille jälkeläiselementeille.

  4. Asemoduilla elementeillä on aina pikselimääräiset height ja width ominaisuudet. Samalla varmistetaan, että sisältö mahtuu annettujen arvojen sisään ilman overflow ominaisuuden antamista.

  5. Position:absolute toimii luotettavimmin oikein, jos asemoidut elementit ovat aina BODY-elementin lapsielementtejä. Jos elementtejä sijoitetaan sisäkkäin, sisemmän elementin olisi hyvä pysyä ulomman sisäpuolella.

  6. Absoluuttisesti asemoituja elementtejä ei pitäisi käyttää sivuilla, jotka ovat siten vaakatasossa skaalautuvia, että asemoidut elementit voivat peittää asiasisällön.

  7. Vältä asettamasta asemoituja elementtejä lomakekontrollielementtien ja upotettujen visuaalisten objektien yläpuolelle.

  8. Älä asemoi taulukkosoluja.

Absoluuttisesti asemoituja elementtejä koskevia selainkohtaisia huomautuksia:

  1. Opera Software mukaan sisäkkäiset ratkaisut (esim. <div style="position:absolute; top:50px;left:50px"> ... <div style="position:absolute; top:20px;left:20px"> ... </div></div>) toimivat MS IE 5.0:ssa virheellisesti.

    Opera Software: Web specifications supported in Opera 5 - the details.

    En voinut verifioida tätä Windows-selaimia koskevaa väitettä. Sen sijaan huomasin, että MS IE 5.x Mac ottaa virheellisesti huomioon ei-asemoitujen esi-isäelementtien marginaalit. Havaitsein, että Opera 4.x-5.x laskee joskus sisemmät asemoidut elementit virheellisesti ottamatta huomioon ulompien elementtien asemointeja. Opera 6.x:n kohdalla havaitsin, että position:absolute + sisäkkäin relativiisesti asemoiduista elementeistä asemointi ei toiminut sisimmille elementeille.

  2. Ominaisuus bottom toimii virheellisesti kaikissa selaimissa. Jos mitään säilytinelementtiä ei ole määritelty selaimet määrittelevät asemoinnin vierittämättömän selainikkunan alalaidan perusteella. right ei toimi kaikissa position:absolute tukevissa selaimissa.

  3. MS IE 4.x Windows sisäkkäisen elementin asemointi ei toimi, jos elementti on sijoitettu kokonaan asemoidun säilytinelementin ulkopuolelle.

  1. Selaimet määrittelevät leveyden ja korkeuden eri lailla mikäli niitä ei ole määritelty. Joillakin Opera 7.x -selaimilla leveys ja korkeus ovat nolla, jos niitä ei ole eksplisiittsesti määritelty. Valikot voivat mennä kasaan.

  2. MS IE 5.x Mac ja Mozilla Gecko -selaimet eivät osaa asemoida taulukkosoluja.

  3. Prosenttiarvoiset width ja height ominaisuudet eivät toimi oikein MS IE - ja Opera-selaimissa. MS IE laskee asemoidut elementit emoelementin perusteella vaikka emoelementti olisi staattisesti asemoitu. Jos emoelementillä ei ole tarkkaa korkeusarvo, arvo on yhden tekstirivin korkuinen. Opera ottaa height ominaisuuden staattisesti määritellyltä emoelementiltä (jos emoelementillä ei ole height ominaisuutta korkeus on näyttöportin korkeus vähennettynä vaakavierityspalkille varatun tilan verran). Opera 7.x laskee width oikein HTML elementistä käsin näyttöportin perusteellla tilanteissas, jotka muistuttavat alla olevaa esimerkkiä:

    html {width:400px; width:400px}...
    <body>
    <div style="position:static; height:500px; width:500px;"><div style="position:absolute; height:100%; width:100%; top:0; left:0; background-color:yellow"</div></div>

  1. Vain Mozilla Gecko -selaimet laskevat asemoinnit HTML-elementin täyttöreunojen perusteella. MS IE 5.x+ ja Opera 7.0 Beta 1 Windows browsers jättävät huomioimatta marginaalin. MS IE 5.x Mac -selain ottaa toisinaan huomioon HTML-elementille annetut täytteet. Vanhemmat Opera-selaimet hylkäävät sekä marginaalit että reunukset kuten myös MS IE 4.x Windows (jälimmäinen selain hylkää kaikki em. ominaisuudet). Tein asiasta testisarjan[S]. Tavanomaisissa tilanteissa Opera 4.x-6.x laskee asemoidut elementit reunusten kulmista (border edges) käsin.

  2. Erään s-postin mukaan MS IE 5.0 Mac aloittaa laskemisen toisinaan BODY elementistä käsin. Tapauksessa BODY-elementille oli annettu padding-left:100px absoluuttisesti asemoidut elementit siirtyivät 100px oikealle (testisarja[S], jossa valikon pitäisi olla aina sivun vasemmassa yläkulmassa).

  1. Opera tarvitsee asemoiduille elementeille sekä vaaka- että pystyarvot (MS IE käyttää asemoinnin oletuksena vasenta yläkulmaa).

  2. MS IE 5.x+ Windows (paitsi MS IE 6.0 standard-compliant -moodissa[S]) tarvitsee asemoitujen elementtien siäsällä oleville TD elementeille korkeusarvot. Mozilla Gecko -selaimet tarvitsevat toisinaan ominaisuutta height asemoiduille DIV elementeille. MS IE 4.x Windows näyttää tarvitsevan asemoiduille elementeille aina sekä height että width ominaisuudet.

  3. Asemointi ei aina toimi Netscape 4.x -selaimissa. Tällaisissa tilanteissa täytyy käyttää vastaavia HTML-attribuutteja LAYER tai ILAYER elementeille (ks. esimerkki sivulta, joka käsittelee dynaamisia valikoita[S]). Jos asemoidut elementit ovat täysleveän taulukon taulukkosolujen sisällä kaikki ominaisuudet eivät toimi oikein.

  1. Melkein kaikissa uusissa selaimissa on ongelmana se, että z-index ei toimi kunnolla upotettujen lisäosia vaativien objektien kanssa ja/tai lomakekontrollielementtien kanssa. Operan kohdalla (6.x-sarjaan asti) kyse on mollemista tapauksista ja Konqueror 3.1 kohdalla lomakekontrollielementeistä. MS IE:llä on ongelmaSELECT-elementin kanssa. Uusimissa Mozilla Gecko -selaimissa tätä ongelmaa ei ole. Tosin, jos kerroksilla, jotka on laitettu upotetun elementin päälle on background-color:transparent upotetun objetin emoelementin taustaväri kuultaa läpi ja kerrokset leikkaavat palan upotetusta objektista.

  2. Kaikki CSS2:ta tukevat selaimet eivät tue kaikkia overflow ominaisuuden arvoja. Käsittelen ongelmaa edempänä kun mainitsen position:fixed liittyviä ongelmia.


[Alku]

Kiinteästi asemoidut elementit

Navigointielementtien suhteen paras vaihtoehto voisi olla position:fixed, jolla voi emuloida kehysten käyttöä. Navigoinnin suhteen etuna on se, että pysyy paikoillaan, vaikka asiakirjan muuta sisältöä rullataan. Mikäli kaikki linkit eivät mahdu samaan lohkoon niille voi periaatteessa määritellä overflow:auto, jolloin loppuja linkkejä voi rullata.

Kun systeemin laittaa taulukkosolun (TD) sisälle, voidaan luoda hyvin taaksepäin yhteensopivia tiedostoja (esimerkkisivu[S]). Systeemille on aina syytä määrittää oma lohko elementtiä DIV käyttäen, esim. ([M][S][Pw]):

div.jokuLuokka {overflow:auto; width:100px; height:150px; position:fixed; left:10px; top:10px}

Jos ajattelemme sivustojen tekemistä idealistiselta näkökannalta, BODY-elementin kanssa ei ole vättämätöntä käyttää mitään lapsielementtiä dokumentin visuaalisen perusrakenteen luomiseksi. Sen sijaan että käytetään juurielementtiä HTML visuaalisena perus rakenne-elementtinä käytetään elementtiä BODY ja kiinteä navigointielementti muodostaa oman kerroksen (layer). Juurielementti HTML toimii visuaalisena pohjaelementtinä, kuten seuraavassa esimerkissä:

html {background-color:#603} /* dokumentilla on kaksitasoinen tausta */
body.Class {max-width:600px; margin:auto; background-color: white} /* BODY toimii visuaalisena perus rakenne-elementtinä */
#one, #one2, one3 {z-index:4; text-align:right; border:1px solid black; background-color:#ffc; font-size:11px; padding:1px 2px 1px 0px;} /* navigointielementtien eri variaatioden yhteiset ominaisuudet */
#one2 {position:fixed; bottom:0px; right:0px; width:102px; height:27px;} /* #one2 käyttää DIV elementtiä kiinteänä navigointielementtinä selaimet, jotka eivät osaa toteuttaa CSS:ää näyttävät sen sivun lopussa alavasemmalla */

Systeemi toimii periaatteessa jopa niin, että määrittää max-width ominaisuus elementille HTML, jolloin HTML toimii myös dokumentin perus rakenne-elementtinä (kuvakaappaus[S]):

html {padding:0; margin:auto; max-width:500px; background-color:red}

Ratkaisussa ei tarvita taulukoita, ei kehyksiä eikä sisäkkäisiä DIV elementtejä, mutta dokumentin näkyvä rakenne on silti kontrolloitu.

Ajatus käyttää kiinteää navigointielementtiä ei ole uusi. Dave Ragget ehdotti HTML 3.0 Draft:ssa (1995), että BODY elementin sisällä voitaisiin käyttää paikallaan pysyvää BANNER elementtiä (ks. myös HTML 3.0, elementti BODY[S]):

The BANNER element is used for a banner section which appears at the top of the window and doesn't scroll with window contents. This can be used for corporate logos, copyright statements and disclaimers, as well as customized navigation/search controls.
Suositukseni:

  1. Jos haluat antaa kaikille kiinteätä asemointia tukeville selaimille jonkin elementin pysyvän paikoillaan, määrittele vain suhteellisen yksinkertaisia kokonaisuuksia. Varmista, että elementit ovat sopivilla paikoilla selaimilla, jotka eivät tue kiinteätä asemointia.

  2. Jos asemoit kiinteiden elementtien sisällä muita elementtejä, käytä vain asemointityyppiä position:relative.

  3. Jos luot monimutkaisia dynaamisia ratkaisuja käytä niitä vain sellaisten selainten kanssa, jotka pystyvät toteuttamaan monimutkaiset rakenteet. Luo tarvittaessa selainkohtaisia tiedostoja.

  4. Määritä mahdolliset dynaamiset valikot vain vasempaan yläkulmaan suhteellisen kapealle alueelle siten, että päävalikko ei mene asiasisällön päälle.

Selainkohtaisia huomautuksia:

  1. Tuntemistani selaimista position:fixed että overflow:auto toimivat vain MS IE 5.0+ Mac, Mozilla 0.6+, Netscape 6.1+ ja Opera 7.x+ -selaimissa. Molemmat toimivat todennäköisesti myös Konqueror (Linux) ja Safari-selaimissa (Mac-selain; (en ole niissä testannut overflow-ominaisuutta; Konquerorissa olen testannut position:fixed ja Safari näyttäisi erään kuvakaappauksen perusteella sitä tukevan). MS IE Mac overflow:auto ei toimi kunnolla. Käsittelen toisessa yhteydessä visibility ominaisuutta koskevaa ongelmaa. On syytä tiedostaa, että position:fixed toimii lähes moitteitta vain sangen uusista Mozilla Gecko Opera 7.0 Beta 2 -selaimista lähtien.

  2. MS IE 5.5+ Windows ja Netscape 6.0x tukevat overflow:auto mutta eivät position:fixed. Sivulla 8[S] on tähän asiaan liittyvä linkki testisivulle ja toteutuksista annetut kommentit. Opera 4.x-6.x:ssä ei toimi overflow:auto. Operalla on myös eräitä pienempiä virheitä, joita käsittelen eräällä lisäsivulla[S].

  3. position:fixed ei toimi eräiden upotettujen objektien kanssa Opera 5.x ja MS IE 5.0 Mac -selaimissa (IFRAME rullautuu sivun mukana; sama asia koskee ainakin Operan kohdalla myös APPLET, EMBED ja OBJECT elementtien avulla upotettuja objekteja).

  1. Jos position:fixed asemoitujen elementtien jälkeläiset on määritelty position:absolute avulla jotkut Mozilla Gecko selaimet laskevat absoluuttisesti asemoitujen elementtien paikan ikään kuin ne eivät olisi kiinteästi määriteltyjen elementtien sisällä (käsittelen tätä asiaa tarkemmin eräällä sivulla[S]). Konqueror 3.1:llä ongelmana on se, että absoluuttisesti määritellyt elementit jäävät kiinteästi määriteltyjen elementtien alle (z-index ei toimi oikein).

  2. Jos käytetään ominaisuutta bottom on ehdottomasti määriteltävä ominaisuutta height, jotta position:fixed toimii Operalla kuten pitäisi.

  3. max-width toimii elementin HTML kanssa vain CSS2:ta tukevissa Opera-selaimissa. MS IE -selaimilla on koko dokumenttia ajatellen jonkinlainen width-ominaisuus, on välttämätöntä lisätä DIV elementti ja käyttää sitä dokumentin perusrakenteen luomiseen. MS IE:lle leveys voi olla kiinteä, mutta Opera 4.x+:lle, Mozilla Gecko, Konqueror ja Safari -selaimilla sen arvo voi olla joustava, kun määrittelee CSS:n seuraavalla tavalla:

    div.perusRakenne {width:550px;}
    div[class="perusRakenne"] {min-width:200px; max-width:550px; width:auto}     /* MS IE ei lue tätä sääntöä; width:auto eliminoi width:550px vaikutuksen */

  1. Kiinteästi asemoitujen elementtien sijaan voi käyttää JavaScript-koodauksella toteutettuja "kelluvia" elementtejä, jotka pienellä viivellä asettuvat paikoilleen. Toimivuus on kuitenkin jossakin määrin huonompi kuin kiinteästi asemoiduilla elementeillä. Käsittelen tällaisia elementterjä eräällä lisäsivulla[S].

  2. Eräät Mozilla Gecko -selaimet tulkitsevat katselukanavan eri tavalla. Operassa vierityspalkkeja ei lasketa katselukanavaan, mutta joissakin Mozilla Gecko -selaimissa ne lasketaan. Tein asiasta myös erityisen mallisivun[S], josta minulla on muutamia kuvakaappauksia:

    • Opera 5.01[S] - ok.
    • Mozilla 0.7[S] - sivu on madalletussa ikkunassa, jolloin tulee vaakatason siirtymä (korjattu Mozilla 0.9:ssä).

  3. MS IE 5.0 Mac versiossa ei toimi edellisellä esimerkkisivulla margin:auto, mikä näkyy kuvakaappauksesta[S]. Mac IE:llä monimutkaiset dynaamiset valikot eivät toimi kiinteästi asemoituina.

  4. Mitä itse tiedän vain Opera 7.x, Mozilla 0.9-1.1 / Netscape 6.1-7.0 Konqueror + todennäköisesti Safari osaa käsitellä kunnolla monimutkaisia dynaamisia valikoita (tällöinkin muistettava, että position:fixed + position:fixed eikä position:fixed + position:absolute ei käytetä).

[Alku]

Muotoiluefektit

Aiheet

Display

Mahdolliset display-ominaisuuden erityisarvot ovat inline , block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption ja none.

W3C: CSS2: 9 Visual formatting Model, 9.2.5 The 'display' property[Pw].

Kyseessä on CSS:n voimakkain työkalu. Tämän omainaisuuden tarkoituksena on määritellä elementin peruskäyttäytymistapa, esim. käyttäytyykö elementti kuin rivinsisäis- tai lohkoelementti.

Juuri ominaisuus display on keino muuttaa HTML-dokumentin luonne XML:n kaltaiseksi merkintäkieleksi. Kaikkia arvoja ei ole kuitenkaan tarkoitettu käytettäväksi HTML-dokumenteissa, sillä eräiden taulukkoa koskevien ominaisuuksien idea on vain siinä, että CSS-ominaisuuksien avulla voisi luoda XML-asiakirjoille täydellinen HTML 4.0 taulukkomallin. Spesifikaatio varoittaa muuttamasta taulukoiden normaalia käyttäytymistä. Selaimien ei edes tarvitse hyväksyä HTML-taulukoiden rakenteen muutosyrityksiä.

Periaatteessa se mahdollistaa sopivasti sisäkkäisten elementtien rakenteen muuttamisen esim. listanäytöstä taulukoihin tai päinvastoin. Alla on esimerkkinä taulukkorakenteen luomisesta CSS:n avulla:

*[class~="tables"]{display:table; border:2px blue solid; padding:2px; margin-bottom:5px;} /* edellyttää, että kaksi elementtitasoa on tämän sisällä, jolloin minkä tahansa elementin voi muuttaa taulukon peruselementiksi */
*[class~="tables-tr"]{display:table-row} /* muuttaa seuraavan tason elementin taulukkoriviksi */
*[class~="tables-td"]{display:table-cell; text-align:justify;} /* muuttaa seuraavan tason elementin taulukkosoluksi */
td p {display:list-item; padding-left:12px; list-style-type: disc; list-style-image: url(./Css/Kuvat/pallo-vihrea.gif); list-style-position: inside; /* mikäli edellä mainitulla tavalla on luotu taulukko, taulukkosolujen sisällä olevat P elementit muuttuvat listaelementeiksi */}

Teoriassa XML-dokumenteille on mahdollista luoda taulukon kaltainen rakenne luomatta kaikkia taulukkotasoja. Selaimen tulisi automaattisesti luoda puuttuvat tasot. Taulukkosolut tulee aina luoda, mutta elementille TABLE ei tarvitse olla vastinetta. Ilman taulukkoriviä luovaa elementtiä ei voi käyttää rinnakkaisia taulukkosoluja vaan solut menevät aina allekkain.

Ainoastaan tyhjät elementit ovat ongelmallisia. HTML:ssä se ei voi poistaa tyhjien elementtien muotoiluominaisuuksia muuten kuin poistamalla ne käytöstä display-ominaisuuden arvon none avulla. Tällä ominaisuudella voi muuttaa silti näennäisesti dokumentin elementtien järjestystä. Elementtien todellinen järjestys ei muutu, mutta jos jotkut elementit piilotetaan ja toiset näytetään, tapahtuu ikään kuin elementtien paikan vaihto ([M][S][Pw]).

Kun laittaa display:none, voi fiksusti toteuttaa tiedotteen CSS:n käytöstä. Seuraavankaltainen teksti näkyy vain vanhoille selaimille - miksi uudemman selaimen omistajan tarvitsisi lukea seuraava teksti:

<DIV style="display: none;"> Mikäli tämä teksti näkyy, selaimesi ei tue HTML 4.0 style-määrittelyjä ja CSS-tiedostoja. Et menetä vanhoilla selaimilla mitään olennaista informaatiota, mutta hanki uudempi selain, jos haluat nähdä sivut juuri sellaisina kuin olen ne suunnitellut. Sivuni näkyvät parhaiten MS IE 5.x+, Opera 5.x+, Netscape 6.x+ or vastaavilla muilla selaimilla (kuten Mozilla ja NeoPlanet).</DIV>

Tätä voi verrata HTML-kommenttien käyttöön. Erona on kuitenkin se, että kommenttimerkkejä ei tarvitse sijoittaa dokumentin runko-osaan (kuten esim.<!-- <TD>Tämä on kommenttimerkinnällä näytöltä poistettu taulukkosolu</TD> -->) vaan dokumentin osien piilottamisen voi toteuttaa erillistiedoston kautta. Muutokset voivat olla myös dynaamisia, jolloin saadaan aikaiseksi visuaalisia efektejä.

Selainkohtaisia huomautuksia:

  1. Vain Opera 4.x+ ja Mozilla Gecko -selaimet pystyvät luomaan XML-dokumenteille taulukot CSS:n avulla. Katso seuraavia sivuja ja mallikuvaa:

    • HTML-versio[S][Pw] - MS IE 5.0 näyttää eräässä kohdin sinisen reunustuksen, mutta ei sen keskellä listaelementtejä, mutta muu muotoilu toimii).
    • XML + CSS -versio[S][Pw] - MS IE 5.0 pystyy luomaan dokumentille vain sangen vaatimattoman struktuurin (yksikään listakuva ei näy); kuvaa lukuun ottamatta tiedoston rakenne pitäisi olla HTML-version kaltainen).
    • XML + XSL(T) + CSS -versio[S][Pw] - MS IE 5.0 pystyy luomaan vain XSL:n avulla XML-dokumenteille kunnon rakenteen ja esitystavan.
    • Kuva siitä, miten selaimen tulisi näyttää sivua[S][Pw] - saat kuvasta käsityksen myös siitä, mitä MS IE 5.0 ei pysty CSS:n avulla näyttämään.

    Tein myös toisen esimerkin[S]. MS IE näyttää sivun vain sekasotkuna, mutta Opera 4.x+ ja Mozilla Gecko -selaimet selkeinä taulukkoina.

  2. Mozilla Gecko -selaimet ja Opera 4.x+ pystyvät toteuttamaan useimmat display-arvot. Testaamistani arvoista display:run-in ja display:compact eivät toimineet Netscape 6.2.1:ssä, mutta ne toimivat Opera 4.x+:ssa.

  1. MS IE 5.0 pystyy tällä ominaisuudella vain muuttamaan jonkun elementin käytöksen joko lohko- ja rivinsisäiselementtien kaltaiseksi (display:block or display:inline) sekä piilottamaan jonkin alueen näyttöruudulta (display:none).

  2. Ne toimivat MS IE 4.x Windows ja Netscape 4.x -selaimissa, mutta display:block ei luo lohkoa vaan se toimii vain display:none vastakohtana samaan tapaan kuin display:inline.

  3. MS IE 6.0 Windows tukee kaikkia CSS1-tason näyttötyyppejä + CSS3-tason display:inline-block, jota muut selaimet eivät tue. Sillä on DTD-riippuvainen erityiskäyttö, johon viittaan sivulla[S].

  4. Display-ominaisuuksilla voi leikkiä kytkemällä ne dynaamisiin pseudoluokkiin ja luoda siten visuaalisia muutoksia. Tällöin niillä saa aikaiseksi samankaltaisia muutoksia kuin skripteillä. Pelleille mallikuvillani, jos sinulla on käytössä MS IE 4.x+, Mozilla Gecko tai Opera 7.x+ ([M][S][Pw]). Koska Opera 4.x-6.x eivät tue display-ominaisuuden dynaamisia muutoksia ne eivät toimi em. Opera-selaimissa.

[Alku]

Visibility

Uutta CSS2 tasolla on myös visibility eli se, näytetäänkö elementin määrittelemä kohde vai ei (visibility:hidden; visibility:visible). Spesifikaation mukaan ero määrittelyyn display:none, on siinä visibility:hidden ottaa määritellyn tilan. Arvon hidden avulla voi luoda piilomuotoiluja. Ominaisuutta voi hyödyntää käyttämällä dynaamisia näennäisluokkia ja siten aikaansaada dokumentin rakenteen dynaamisia muutoksia.

Selainkohtaisia huomautuksia:

  1. Netscape 4.x ei tunnu toteuttavan visibility ominaisuutta aina oikein.

  2. MS IE ja (useimmissa tapauksissa) Mozilla Gecko -selaimet näyttävät elementit, joilla on visibility:visible vaikka ne olisivat sellaisten elementtien sisällä, joille on määritelty visibility:hidden, mikä on oikein. Opera piilottaa virheellisesti tällaiset elementit aina ja Mozilla Gecko, jos position:fixed on käytetty (engl. testisivu[S]).

  3. Vertaa keskenään MS IE 5.x+, Mozilla Gecko tai Opera 7.x+ -selaimella ominaisuuksien display ja visibility käyttäytymistä ([M][S][Pw]). Muutokset eivät toimi vanhemmissa Opera-selaimissa.


John Allsop: Page Layout[Pw].

[Alku]

DHTML

Ns. DHTML[S][Pw]:ssä on kyse CSS + JavaScript/ ECMAScript koodauksen avulla aikaansaaduista dokumentin rakenteen dynaamisista visualisista muutoksista (useimmiten käytetään ominaisuuden visibility arvojen vaihtamista). Yleisimmin sitä käytetään dynaamisissa valikoissa. Käytän nykyisin itse niitä ja tein dynaamisten valikoiden luomisesta liitesivun[S].

En käsittele DHTML/DOM:ia laajasti kuten en myöskään eräitä muita CSS:ään liittyviä asioita, joihin viittaan viimeisellä sivulla. Vertaa tämän sivun näkökulmia taulukoiden[S] mahdollisuuksiin.

[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