CSS Sivuraide, pysäkki Nappula

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

Photo by Chris Ried on Unsplash

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!)

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s