Havaintoesitys siitä, mitä CSS-pohjaisella muotoilulla voidaan saavuttaa visuaalisesti. Valitse listasta jokin tyyliohje, niin näet tämän sivun sen mukaisessa ulkoasussa.
Lataa esimerkin HTML-tiedosto ja CSS-tiedosto
Pimeän ja kolkon tien varrella lojuu roskia – selainriippuvien tägien, yhteensopimattomien DOMien ja rikkinäisen CSS-tuen jäännöksiä.
Tänä päivänä meidän on puhdistettava mielemme menneistä käytännöistä. Webin valaistuminen on saavutettu sellaisten tahojen väsymättömien ponnistusten ansiosta kuin W3C, WaSP ja johtavien selainten tekijät.
Zen Garden kutsuu sinut rentoutumaan ja mietiskelemään mestarien tärkeitä opetuksia. Suuntaudu näkemään kirkkaasti. Opettele käyttämään kunnioitettavia tekniikoita uudella ja elvyttävällä tavalla. Yhdisty Webin kanssa.
On selvä tarve siihen, että graafikot ottavat CSS:n vakavasti. Zen Garden pyrkii yllyttämään, innostamaan ja rohkaisemaan osallistumista. Alkuun pääsemiseksi katso joitakin jo tehtyjä muotoiluja listasta. Kun napsautat jotain listan kohtaa, saat nähtäväksi tämän sivun sellaisena, miksi kyseinen tyyliohje sen tekee. Koodi pysyy samana; ainoa, mikä on muuttunut, on ulkoinen .css-tiedosto. Ihan totta.
CSS sallii hypertekstidokumentin tyylin täydellisen ja kattavan kontrollin. Ainoa tapa esittää tämä niin, että ihmiset innostuvat, on havainnollistaa, mitä se voi todella olla. Tätä varten on ohjakset saatava niiden käsiin, joilla on kyky luoda rakenteesta kauneutta. Nykyisin useimmat esimerkit kivoista nikseistä ja tempuista ovat strukturalistien ja koodaajien tekemiä havainnollistuksia. Graafikot eivät vielä ole kunnostautuneet. Tähän tarvitaan muutos.
Muut kuin graafikot älkööt vaivautuko. Tulet muuttamaan tätä sivua, joten vahva CSS:n osaaminen on välttämätöntä, mutta esimerkkitiedostot on kommentoitu tarpeeksi hyvin niin, että myös CSS-aloittelijat voivat käyttää niitä lähtökohtina. Katso CSS-aineistoja -sivulta pitemmälle meneviä ohjeita ja vihjeitä CSS:n käytöstä.
Saat muokata tyyliohjetta miten haluat, mutta et HTML-tiedostoa. Tämä voi tuntua aluksi pelottavalta, jos et ole koskaan aiemmin työskennellyt tällä tavoin, mutta seuraa linkkejä, niin opit lisää, ja käytä esimerkkitiedostoja tiennäyttäjinä.
Lataa esimerkkinä oleva .html-tiedosto ja .css-tiedosto, jotta voit käsitellä sivun kopiota paikallisesti. Kun olet saanut mestariteoksesi valmiiksi – pyydämme, ettet lähetä puolivalmista – kopioi .css-tiedostosi Web-palvelimeen, joka on käytettävissäsi. Lähetä meille tiedoston osoite. Jos päätämme käyttää sitä, niin haemme siihen liittyvät kuvat. Lopulliset ehdotukset sijoitetaan meidän palvelimeemme.
Täydennys: Etsin kääntäjiä. Jos osaat sujuvasti englantia ja jotakin muuta kieltä, niin tämä on toinen tapa tulle mukaan hankkeeseen. Ota minuun yhteyttä yksityiskohtien selvittämiseksi. Saatavilla on jo tehtyjä käännöksiä. Tämän suomennoksen on tehnyt Jukka K. Korpela.
Miksi osallistuisit? Tunnustuksen saamiseksi, innoituksen takia ja luodaksemme sellaisen aineiston, johon kaikki voimme viitata, kun puhumme CSS-pohjaisen muotoilun puolesta. Tätä tarvitaan kipeästi, tänäänkin. Yhä useammat isot sivustot ovat loikkaamassa eteenpäin, mutta tarpeeksi monet eivät ole vielä loikanneet. Jonakin päivänä tämä galleria tulee olemaan historiallinen kuriositeetti; mutta se päivä ei vielä ole koittanut.
Haluaisimme nähdä mahdollisimman paljon CSS1:tä. CSS2:n käyttö tulisi rajoittaa laajasti tuettuihin piirteisiin. Zen Gardenissa on kyse toimivasta, käytännöllisestä CSS:stä eikä uusimmista avantgardistisista tempuista, jotka näkyvät 2 %:lle sivuja katsovaa yleisöä. Ainoa todellinen vaatimus, joka meillä on, on se, että CSS-koodisi validoituu.
Tällainen suunnittelu valitettavasti korostaa CSS:n erilaisten toteutusten puutteita. Eri selaimet esittävät sivuja eri tavoin, ajoittain jopa silloin kun CSS-koodi on täysin validia, ja tämä käy raivostuttavaksi, kun yhden ongelman korjaus johtaa siihen, että jotain muuta menee rikki. Katso CSS-aineistoja-sivulta tietoja muutamista korjauskeinoista, joita voi käyttää. Täydellinen yhteensopivuus selainten kanssa on joskus yhä toiveuni, emmekä odota, että saat aikaan koodia, joka toimii pikselintarkasti jokaisessa käyttöympäristössä. Mutta testaa niin monissa ympäristöissä kuin voit. Jos muotoilusi ei toimi vähintään IE:n versiolla 5 ja uudemmilla ja Mozillalla (joita käyttää yli 90 % käyttäjistä), on todennäköistä, ettemme hyväksy sitä.
Pyydämme, että lähetät itse tekemiäsi taideteoksia. Kunnioita tekijänoikeuslakeja. Pidä kyseenalainen aineisto minimissään; hyvän maun mukainen alastomuus on hyväksyttävää, avoin pornografia hylätään.
Tämä on opettavaista harjoittelua samalla kun se on havainnollistamista. Säilytät täyden tekijänoikeuden kuviisi, mutta pyydämme sinua antamaan CSS-koodisi käyttöön Luovan yhteiskäytön ehdoilla (Creative Commons license), jotka ovat samat kuin tämän sivuston käyttöehdot Näin muut voivat oppia työstäsi.
Kaistanleveyden on ystävällisesti lahjoittanut mediatemple.