[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 11. Mikä on CSS2:n Visuaalinen muotoilumalli > Muotoiluefektit (jakso 3/3)

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