Keskustelu: Nettisivujen teko: Kehittyneempiä CSS-oppaita/kirjoja

Kaikki varmaan tietävät, että CSS:n oppiminen kunnolla kaikkine kikkoineen (ilman CSS3:akin) on varsin aikaavievää ja matkan varrelta löytyy varsin kohtuullinen kokoelma surkeaa koodia ja kiroilua.

Mietinkin tässä, että tähän voisi koota joitain hyväksi havaittuja jo alkeet osaavalle koodarille sopivia oppaita/kirjoja mikäli sellaisia olette löytäneet. Näistä olisi itsellenkin hyötyä kun olen vielä siinä vaiheessa, että tuotettua CSS:ää ei voi erityisemmin kehua, vaikka sivu ainakin pienen väännön jälkeen taittuu halutun näköiseksi.

Opas tai kirja saa tässä tapauksessa olla englanninkielinenkin, sillä materiaalia ei ole hirveästi suomeksi ja suurin osa täälläkin taitaa jo hallita englannin suht hyvin kuten koodarin kuuluukin.

Aloitan vaikka itse heittämällä pöydälle tämän äsken löytämäni suomenkielisen oppaan, jossa käydään suht tiiviisti läpi kaikki peruskama sekä hiukan teoriaa sen ympäriltä:

Opas

Tuo mainitsemasi ”opas” on lähinnä suppea johdanto CSS:n alkeisiin – sellaiseksi toki melko hyvä vaikka ei kovin havainnollinen. Vanhentuneisuutta osoittaa mm. virke ”Selaimet tukevat CSS1-tyylejä laajasti, kielen uudemman version (CSS2.1) selaintuki on vielä rajallinen”. Nythän CSS 2.1 on peruskauraa, vaikka tuessa on joitakin pikku aukkoja, ja ongelmat (ja uudet mahdollisuudet) pyörivät CSS3:n ympärillä.

Tässä on tietysti pakko mainostaa omaa kirjaansa ”CSS verkkosivujen muotoilussa”, joka kuvaa aika kattavasti CSS 2.1:n ja joitakin CSS3-juttuja. Sekin kyllä jo vuodelta 2008, joten mukana on sellaisia varoituksia selaintuen puutteesta yms., jotka kehitys on onneksi tehnyt melko tarpeettomiksi.

CSS3:sta lupaavin englanninkielinen kirja näytti alkuvuodesta olevan Peter Gasstonin ”The Book of CSS3”. Kuvaavaa kyllä on, että vaikka se on vuodelta 2011, sekin on osittain ehtinyt vanhentua mm. siksi, että CSS3 elää koko ajan ja joitakin asioita on pantu aika lailla uusiksi.

Sivulle http://www.cs.tut.fi/~jkorpela/css/ olen koonnut joitakin melko tuoreita linkkejä netistä löytyvään aineistoon. Tekee mieli nostaa esiin MDN:n CSS-aineisto https://developer.mozilla.org/en-US/docs/CSS joka on yllättävän hyvä vaikka osittain keskeneräinen.

Kiitos. Enemmän etsiskelen ja luulisin, että suurin osa etsiskelee sellaista tavaraa joka on kuitenkin enemmän vielä sidoksissa perusteisiin, kun kattavaa opasta aiheesta on todella vaikeaa löytää ainakaan nettihauissa eli sinänsä CSS3 ei ole mikään pakollinen juttu. Sen kyllä oppii nopeasti (tai näin ainakin luulisin) kun hallitsee CSS:n perusteet kunnolla.

Pitääpä katsoa vaikka ostaisin kirjasi, näiden asioiden opettelu olisi nyt aika ykkösenä kun web-puolen hommat ovat muiden perustekniikoiden osalta alkaneet sujumaan jo kohtuullisesti.

ljlassi kirjoitti:

– – sinänsä CSS3 ei ole mikään pakollinen juttu. Sen kyllä oppii nopeasti (tai näin ainakin luulisin) kun hallitsee CSS:n perusteet kunnolla.

CSS3 ei toki ole yleisesti ottaen pakollinen, mutta kovasti sitä käytetään, ja monissa käytännön tilanteissa siihen on jopa pakko, esimerkiksi kun sivulta vaaditaan näyttävyyttä ja elävyyttä. Tosin usein asiat voi vaihtoehtoisesti tehdä JavaScriptiä apuna käyttäen.

Valitettavasti CSS3:n oppiminen ei ole nopeaa ja helppoa, vaikka CSS:n perusteet olisivat hyvin hanskassa. CSS3 on suuressa määrin hajallaan, eritasoisina luonnoksina (ja muutamana ”valmiina” määrittelynä) ja osittain hyvinkin kirjavina toteutuksina. Mutta sieltä löytyy toki monia osa-alueita, jotka ovat aika hyvin kasassa ja toteutettuina ja joihin saattaa päästä aika nopeastikin sisälle.

Jep. Ongelma tietysti on, että CSS2:n osaaminen on vielä tällä hetkellä yleensä välttämätöntä etenkin ylläpitotoimenpiteissä. Ilmeisesti pitäisi opetella molemmat...

Miten hyvin tämän hetken halvimmat älypuhelimet muuten tukevat CSS3:a?

CSS3:ssa ei ole juurikaan opeteltavaa. Ei kannata tuon Jukan pätemiseen taaskaan kiinnittää liikaa huomiota. Tällä hetkellä riittävän hyvin määriteltyjen ja tuettujen määritteiden lista on melko lyhyt:

- border-radius
- box-shadow
- text-shadow
- transition
- animation
- transform
- uusia selectoreita / pseudoluokkia

Sitten on lisäksi pari ihan kätevää juttua, joiden suhteen eri selainten käytännöt eivät vielä ole yhtenäiset mutta ainakin niitä voi testailla:

- gradientit eli liukuvärit
- text-stroke

Ehkä tuohon listaan vielä jotain löytää, varsinkin jos kieltäytyy ymmärtämästä pointtiani ja haluaa egoilla.

Mobiiliselaimet käyttävät nykyään ymmärtääkseni samoja moottoreita kuin niiden työpöytäversiotkin. Merkittävin tekijä on kai se, miten hyvin haluaa tukea "pari vuotta" vanhoja laitteita, joihin ei välttämättä enää saa uusinta versiota kaikista selaimista.

ljlassi kirjoitti:

Ilmeisesti pitäisi opetella molemmat...

Tiesitkö, että CSS3 sisältää käytännössä koko CSS2:n ja että pelkillä CSS3:n ominaisuuksilla ilman CSS2:n ominaisuuksia ei saa tehtyä oikeastaan mitään? Jos CSS2 on lukualue 0–9 ja CSS3:n uutuudet ovat luvut 10–19, onko mitään järkeä opetella vain jälkimmäiset mutta ei ensimmäistä?

Muutenkin kuulostaa, että olet jotenkin ihan hakoteilla CSS:n suhteen. Jokseenkin ainoa asia, jonka kanssa voi joutua tappelemaan, on asettelu: koko, sijainti, kellutus, marginaalit, reunat ja täyte. Näissä asioissa voi ehkä olla hyödyllistä opetella muutama "kikka" eli pari tavallista toteutustapaa tietyille yleisille asioille. Muilta osin CSS on versiosta riippumatta hyvin suoraviivaista, vai tuleeko mieleesi jokin tilanne, jossa tietty koodi tekisi jotain yllättävää?

CSS:n opettelu ulkoa ei ole välttämättä hyödyllistä, jos ei halua aivan erityisesti erikoistua juuri siihen. Pääasia on, että ymmärtää, mitkä asiat onnistuvat yhden elementin CSS-tyyleillä ja mihin tarvitaan ylimääräisiä elementtejä.

Metabolix kirjoitti:

Tiesitkö, että CSS3 sisältää käytännössä koko CSS2:n ja että pelkillä CSS3:n ominaisuuksilla ilman CSS2:n ominaisuuksia ei saa tehtyä oikeastaan mitään?

En kyllä tiennyt oikeastaan mitään CSS3:sta vielä eilen kun aloitin tämän ketjun. Itse asiassa nyt kun ehdin vähän perehtyä asiaan niin huomasin, että olen käyttänyt monia CSS3:n ominaisuuksia kuten border-radiusta tiedostomatta, että ne kuuluvat CSS3:n.

Metabolix kirjoitti:

Muutenkin kuulostaa, että olet jotenkin ihan hakoteilla CSS:n suhteen. Jokseenkin ainoa asia, jonka kanssa voi joutua tappelemaan, on asettelu: – –

Ongelmana tosiaan itselläni(kin) on lähinnä juuri tuo oikeaoppinen asemointi. Asemoinnin kanssa on joutunut aina tappelemaan kun se on ollut edes hiukan monimutkaisempi, ja lopputulos on usein ollut sitä nk purkkakooodia. Toisaalta olen kyllä kiinnostunut myös oppimaan CSS:stä yleisestikin vaikkei se olekaan aivan pääprioriteetti.

Muutenkin olen vasta nyt tajunnut monia asioita yleisesti syntaksista. Esimerkiksi se, että CSS:ää voi käyttää kaikkien html:n elementtien kuten img:n kanssa tuli jonkin aikaa sitte täytenä yllätyksenä. Ongelmana on ollut pitkälti se kun olen juuri etsinyt/löytänyt jotain yksittäistä määrittelyä koskevaa tietoa tai erittäin suppeita oppaita, kokonaiskuva on jäänyt kokonaan hahmottumatta. Tietysti asiaan on myös vaikuttanut se, että olen lähinnä keskittynyt PHP:hen viimeisten kuukausien ajan. Nyt olisi aika päivittää muut saman aihealueen taidot siedettävälle tasolle.

ljlassi kirjoitti:

Esimerkiksi se, että CSS:ää voi käyttää kaikkien html:n elementtien kuten img:n kanssa tuli jonkin aikaa sitte täytenä yllätyksenä.

Miten tämä voi tulla yllätyksenä kun css:llä ei liiemmin muuta tehdäkään?

samip kirjoitti:

Miten tämä voi tulla yllätyksenä kun css:llä ei liiemmin muuta tehdäkään?

No se ei välttämättä kaikille ole itsestään selvä asia. Muistan itsekkin kokeneeni aikanaan ahaa-elämyksen kun en tarvinnutkaan id tai class määritteitä css:n käyttöön. Siitä nyt on jo aikaa, mutta muistaakseni ihmettelin miten esimerkeissä käytettyä bodyä voi käskyttää ilman mitään määritteitä jolloin aloin tutkimaan ja testailemaan :)

Parempi kysymys olisi, mihin tässä tarvitaan kehittyneempiä CSS-oppaita, jos perusasiatkin tuottavat vielä yllätyksiä. Siksipä tarjoan aivan alkeista lähtevää opaskokonaisuutta: http://docs.webplatform.org/wiki/beginners

The Alchemist kirjoitti:

CSS3:ssa ei ole juurikaan opeteltavaa.

Kiinnostava trollaus.

lainaus:

Tällä hetkellä riittävän hyvin määriteltyjen ja tuettujen määritteiden lista on melko lyhyt:

No CSS:n määritteiden lista on hyvin lyhyt: siinä ei ole yhtään alkiota. CSS:ssä ei ole määritteitä. (Siinä on määriteselektoreja, mutta se on eri asia.)

lainaus:

Ehkä tuohon listaan vielä jotain löytää, varsinkin jos kieltäytyy ymmärtämästä pointtiani ja haluaa egoilla.

Kerroit egostasi jo tarpeeksi, mutta pointtisi jäi esittämättä.

Oikeastihan esimerkiksi transform- ja animation-ominaisuuksien opiskelussa kuluu aika rattoisasti, sillä ne eivät todellakaan ole triviaaleja. Ja listastasi puuttui esimerkiksi sellainen hyvin perusasia kuin @font-face (ehkä se ei ole sinun omituisen terminologiasi mukaan ”määrite”), puhumattakaan mediakyselyistä, joista kaikki ja heidän veljensä nykyisin puhuvat. Tai opacity ja background-size. Minun listassani CSS3-ominaisuuksista ei taida olla vielä tuhattakaan kohtaa, mutta ilmeisesti enemmän kuin sinulla.

Sanoinhan, että siihen listaan voi muutaman kohdan löytää lisää, ei tarvitse itkeä. En nyt sano, että sana "määrite" olisi täysin oikea termi puhuttaessa siitä mistä minä puhuin, mutta toisaalta sanan property vastine suomessa on mm. ominaisuus, jolle taas "määrite" on jonkin sanakirjan mukaan synonyymi. Mutta vaikkei olisikaan, niin en silti olisi kehdannut itkeä siitäkin.

ljlassi kirjoitti:

Miten hyvin tämän hetken halvimmat älypuhelimet muuten tukevat CSS3:a?

Aika hyvin, ks. http://caniuse.com/#agents=mobile&cats=CSS

Yksityiskohdissa on toki paljonkin ongelmia, jos halutaan mahdollisimman hyvä ulkoasu mahdollisimman monella laitteella. Mutta tämän merkitys riippuu siitä, mitä olet tekemässä ja miten käyttämässä CSS:tä: mitä olennaista jää pois tai miten kaikki menee plörinäksi, jos selain ei tuekaan jotain hienoa CSS3-pyöräytystä?

Sitä paitsi suurelle osalle CSS3:n uutuuksista on kehitetty JavaScript-pohjaista pakkelikoodia (polyfill), jolla voidaan emuloida CSS3-tukea vanhemmissa selaimissa.