Ma 16.4.2012 Lyon WWW2012-konferenssi.
W3C : CSS3 -Tutorial
Puolipäivää kestävä tutoriaali jossa W3C esittelee uusimmat kehitykset. Tutorialin tarkoitus on esittää CSS:n uusimmat ja tulevat ominaisuudet.
Vetäjät:
- Bert Bos, W3C Style Activity Lead and
- Eva Kasal, Freelancer (Ranskalainen CSS-opettaja ja kehittäjä)
klo 10.00 tutoriali alkaa
Kalvot online: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/
Esitys aloittaa stabilseista nykyjuttuista ja etenee yhä kokeellisempiin uusin CSS-esimerkkeihin.
(Puhujat mumisevat vahvalla aksentilla, ovat selvästi ns. "koodarinörttejä".)
Tutoriali taitaa painottua koodin kokeilemiseen, joka ei välity hirveän hyvin raporttiin.
Koodiesimerkki 1: Useita päällekkäisiä taustakuvia sivulla tai elementillä, jolloin toista niistä voi venyttää ja toista ei. Taustoja voi nyt myös määritellä erilaiseksi eri div-elementteihin, tai vaikka table-määreeseen n:th-child määreellä. Tai toinen tausta voi skrollata yhden alueen (divin) mukana ja toinen pysyy paikallaan.
Edelliset taustaesimerkkikoodit joita kokeilla: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-backgrounds.html
Osa esimerkkikoodeista toimivat vain uusimmalla Opera-versiolla (kuten esim. "nth-child"in background-position), sanovat vetäjät. Omat aikaisemmat kokemukseni taas suosittelisi mozillan nightly buildin asentamista kokeilua varten: http://nightly.mozilla.org/ (joka yö laitetaanuusin kehitysversio ladattaviin tuolta.)
Tässä huoneessa vajaa 50 kuuntelijaa, ja huone aika täynnä. Koodia näytetään ja selitettän ja ihmiset kokeilevat niitä läppäreillään, etenevät kuitenkin niin nopeasti ettei ns. varsinaista kokeilua / oppimista voi täällä tehdä.
Tärkeä huhu: kaikki selaimet aikovat luopua "browser prefix":stä, eli esim. -webkit- -koodi kokeellisen CSS-määreen edessä. Jatkossa hyvin pian tuettaisiin vain varsinaista CSS-koodimuotoa.
(Mental note itselle: nämä kaikki esimerkit päätyvät syksyn Merkkauskielet-kurssille.)
Reunat, eli Border-kokeilua. Koodit tutustumista & kokeilua varten täällä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-borders.html
Venytettävät kehyskuvat ovat hienoja, mutta vaatii kyllä myös esim. kykyä osata suunnitella kuva jota venytetään kehykseksi (jos haluaa saada hyvännäköistä aikaiseksi). Sen sijaan border-radius esimerkki tuolla on todella hieno, kannattaa tutustua miten eri kulmamääreillä saa hienoa aikaiseksi.
Sarakkeita, eli Multi-column
Sarakkeiden välit voi määritellä omilla määreillään, esim. eri värisiksi kuin muu sivu. Sarakkeita voi täyttää eri tavoin, esim. eka sarake täyttyy alas asti, mutta muut ei. Uusia ominaisuuksia suunnitteilla, mutta on teknisesti vaikea toteuttaa esim. kahdelle ensimmäiselle sarakkeelle ja viimeiselle eri määritykset kuin muille sarakkeille. Parhaiten sarake-säännöt toimivat tällä hetkellä Opera -selaimessa versiosta 11 lähtien.
Mediakyselyt, Media Queries
Tarkoitettu sivun muokkaamiseen erilaiseksi eri alustoille, esim. kännykälle ja pöytäkoneelle erilaiset tyylimääreet.