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. Esimerkkinä toiminnasta voi katsoa esim: http://bostonglobe.com/ ja pienentää / suurentaa ikkunaa, sivun ulkoasu reagoi siihen. Esimerkit täällä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-media-queries.html Myös esityksen kalvot käyttävät mediakyselyjä, presentation mode käyttää eri tyylimääreitä kuin tavallien sivun katsominen.

Mielenkiintoinen pointit miten iPhone hajoitti "handheld" -määreen kännyköille, se nimittäin väittää olevansa pöytäkone ("screen") eikä mobiililaite ("handheld"). Siksi html-koodiin pitää iphoneja varten lisätä:
<meta name=viewport content="width=device-width">
jonka jälkee myös ne seuraavat medikyselyjä. (Oisko tuo riittävä koodipätkä? Pitää kokeilla puhelimella myöhemmin.)

"Valitsimet", eli Selectors
Näillä kohdistetaan tyylimääreet mahdollisimman tarkkaan tiettyyn kohtaan, mutta samalla tarvittaessa myös yleisesti koko sivulle. Koodiesimerkit: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-selectors.html
Hyödyllinen on esim. koodiesimerkki jolla saadaan sivun kaikki linkit muotoiltua erinäköiseksi kuin muu sivu / muu teksti. Lisätkää tähän vaikka kuva alkuun (12px padding vasempaan reunaan ja 10pix kokoinen kuva sinne.) 

Värit
Värejä voi nykyään määritellä myös HSL:n avulla (rgb:n, hexan ja keywordin lisäksi.) HSL liittyy väriympyrään. HSL:ään voidaan lisätä myös alpha, jolloin se ottaa neljä arvoa: väri, saturaatio, luminance ja alpha, esim: hsla(20, 90%, 50%, 0.3)
Esimerkkikoodit: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-color.html

Color Scheme Designer palvelua kehuttiin ja kokeiltiin esimerkissä, tällä saa koko sivun vääriskaalan helposti ja hyvännäköiseksi määriteltyä: http://colorschemedesigner.com/

Fontit
Tähän kuuluu myös varjostukset esim. tekstiin tai laatikoihin. Jos lisäät eksoottisia fontteja sivullesi, toistaiseksi se pitää lisätä useassa eri formaatissa, näissä.

• eot microsoftin tukema
• woff firefoxille, avoin w3c standardi joka toivottavasti kohta toimii kaikissa selaimissa
• svg iphone ja ipadille (ne ei tue mitään muita fonttiformaatteja)

Esimerkkikoodit: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-box-text-shadow-fontface.html
Yleisökysymys:
Voiko kirjainten sisälle vaikuttaa, vastaus: ei, et voi lisätä esim. keltaista kirjaimen sisälle.

Lyhyt kagvitauko, 5min.

Ekan päivän perusteella, ei pelkästään kahvitauko vaan muutenkin, niin aikataulut kusee täällä. Eivät ole ihan yhtä "pro" organisojia kuin jenkit olivat vuonna 2010.

Transforms
Tällä voidaan väännellä ja muokata 2d ja 3d -onjekteja (lähinnä kai kuvia) sivulla. Tähän kuuluu Translate, scale, rotate ja skew -määreet. 3D muunnokset lisää yhden ulottuvuuden muokkauksiin, tätä varten pitää määritellä sivulla jokin vanhempi (parent) jonka suhteen elementtiä sivulla voi 3d-vääntää. Parent voi olla esim taustalla oleva kuva.
Jotta esimerkkikoodit toimisivat, tarvitsee tosiaan Operan uusimman version, joskus jopa kehitysversion, esimerkit:
http://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-transform-2d.html Muista demoissa klikata ylhäältä oikea transformaatio päälle. Katsoka esim. näyttävää perspektiivi esimerkkiä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo_perspective_origin.html

Tai katsokaa tätä kuvaa: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/images/cadrillage_rubick_cube.png
jolla on rakennetti aika vähällä koodilla tämä: http://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo_cube.html
huh-huh.