Sivuraiteella: samalla kun aloin todellakin pääsemään vauhtiin CSS:n kanssa, huomasin kutkuttavan pienen haasteen.

Usein projektien kanssa käy niin, että nälkä kasvaa syödessä, ei pelkästään “sinne minne piti mennä”, vaan välissä tarvitsee hieman pompata sivullekin, oppiakseen jotain millä on käytännön hyötyarvoa projektissa.

Samaan aikaan kun blogaan CSS:n oppimisesta, pidän pientä interaktiivista muistiota Codepen -sivulla

Sivu demoaa CSS:n avulla tehtäviä juttuja. Suuri osa sivusta on tekstiä, mutta sitten tuli tarve oikeasti NÄYTTÄÄ miten juttu toimii. Opimme matkimalla, apinoimalla. Ohjelmistojen kaunis puoli on se, että niille on ominaista helppous toistaa ja näyttää asioita.

Eli halusin antaa lukijalle napin, jolla voi helposti nähdä miten CSS vaikuttaa. Kun painat nappia ensimmäisen kerran, se laittaa tyylin PÄÄLLE. Toinen napsautus poistaa tyylin. Nappi toimii kuin valokatkaisin.

Web-selaimen moottori ja CSS

Web-selain parsii HTML-lähdekoodin DOM-puuksi. DOM-puussa on solmuja (‘nodes’). CSS:n määrittelyt tallennetaan omaan rakenteeseensa selaimen muistissa. CSS tulkitaan ja sen määräämät muutokset laitetaan koskemaan noita aiemmin mainittuja DOM-puun solmuja – ja tässä kohtaa nimenomaan tulevat peliin mukaan CSS:n säännöstöt; ne ratkaisevat, miten ja kuinka monen eri tyylin yhteisvaikutus lopulta muuttaa solmun eli web-sivun ulkonäköä.

Hei, aika heavy lätinä. Mennään seuraavassa jaksossa pariin kikkaan mitkä huomasin! Tiedossa on silloin:

• pätkä JavaScriptaa, napin click handleriin eli tapahtumakäsittelijään
• muutamia kysymyksiä, miten kannattaa suunnitella piirre, jos mitenkään (vai onko se niin yksinkertainen että “just do it” pätee!)