JWT 2016 luento 2 to 10.3.2016 klo 14-16 Aulikki Hyrskykari PinniB1097 1
Viime luennolla o Kurssin sisältö ja suoritus, Web terminologiaa ja yleistä HTML-kertausta Tänään o HTML5 vielä Validointi ja JWT-house rules HTML5, semanttinen merkkaus interaktiiviset elementit DOMista alustavasti o CSS kertausta ja täydennystä tyyliohjeen liittäminen dokumenttiin valitsimet ja sääntöjen kohdistaminen Joitain edistyneempiä piirteitä (CSS3 ) webfonttien käyttö elementtien sijoittelusta, display, float, position liike palstoitus flexbox uusi mittayksikkö (vw, vh) 2
Validointi (!) o Validointi tärkeätä tuo esiin virheitä, jotka muuten jäisivät huomaamatta useimmiten selaimet renderöivät sivun virheistä huolimatta virheellisen koodin tulkinta vaihtelee eri selaimissa yllätyksiä o HTML Validointi http://validator.w3.org/ koodin voi viedä validaattoriin antamalla julkaistun html-sivun osoite uploadaamalla html-tiedosto kopioimalla koodin leikepöydän kautta o CSS Validointi https://jigsaw.w3.org/css-validator/validator.html.en jos viedä css-koodin tai julkaistun html-sivun osoitteen, jolloin myös sivuun liitetty CSS-koodi validoidaan 3
JWT-koodaussäännöt: HTML / CSS attribuuttien arvot aina lainausmerkkeihin ("kaksoishipsuihin") elementtien nimet pienellä, esim: <html> ei: <HTML> luokkien ja tunnusten nimet merkityksellisiä, sanojen erotus väliviivalla, esim: <p class="tunnistus-virhe"> ei: <p class = punainen > koodirivit mahdollisuuksien mukaan alle 80 merkin mittaisia yli rivin mittaisissa elementeissä alku- ja lopputunnukset allekkain, sisältö sisennettynä kontekstin määrittävien prefiksien käyttö nimissä suotavaa, esim: <aside class="info-note"> <p class= "info-teksti >... </p>... </aside> suljetaan elementit aina, myös tyhjät elementit, esim: <img src= img/kuva.jpg /> aakkostetaan samaan elementtiin kohdistuvat CSS-säännöt selainmottoriprefiksit kuitenkin jätetään huomiotta, esim: 4
HTML5-dokumenttien rakenne o Semanttisen merkkauksen tarve erilaisten Internettiin yhteydessä olevien laitteiden kirjo kasvaa koko ajan mitä enemmän selain ymmärtää dokumentin eri osien merkityksestä, sitä tarkoituksenmukaisemmin renderöinti osataan tehdä semanttinen merkkaus tärkeää saavutettavuuden (accessibility) kannalta HTML5:ssä uusia elementtejä, jotka rakenteen määrittelyn lisäksi kuvaavat dokumentin osan semanttista sisältöä: <address> <article> <aside> <footer> <h1>..<h6> <header> <section> <nav> 5
Onko dokumentin osalla semanttinen sisältö o ON Käytä rakenteen määrittelyyn uusia HTML5-elementtejä: o EI OLE Käytä sisällön ryhmittelyelementtiä article, main, header, section, aside, nav, footer div ja tietysti entiseen tapaan vanhoja tuttuja lokhoelementtejä: blockquote, br, div, dl, dd, dt, figcaption, figure, hr, li, ol, p, pre, ul 6
Vastaavasti tekstitasolla ( rivitasolla, inline) o Sisäelementit (tekstitason elementit): a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo sisältävät HTML5:ssä semanttisen merkityksen o ei ennalta määriteltyä semanttista merkitystä käytä: span -elementtiä o milloin tähän tarvetta? o esimerkiksi <p> Lempiruokani on <span id = lempiruoka > curry </span> ja sen kanssa juon yleensä <span id = ruokajuoma > maitoa</span> </p> silloin kun tekstinosaan halutaan päästä kiinni CSS-säännöllä tai JavaScriptillä 7
Interaktiiviset elementit o yleiskäyttöinen elementti, jolla käyttäjä voi syöttää tietoa selaimelle, esim: <input type= text > o attribuutin type arvo määrittää millainen syöteelementti on kyseessä, syötetäänkö esimerkiksi merkkijono salasana käytettävä merkkijono ilmaistaanko joitain valintoja painikkeen painalluksella, radiopainikkeella, valintalistalla, pudotuslistalla tai monivalintalistalla tekstiä useamman rivin kentässä,... oheinen esimerkki löytyy esimerkkikansiosta: http://www.sis.uta.fi/~jwt/16/esimerkit/02-input-esimerkki.html 8
Interaktiiviset elementit (2) o Lomakkeet koettiin perinteisessä HTML:ssä hankaliksi o HTML5:ssä tämä on pyritty ottamaan huomioon sisältää huomattavan määrän uusia elementtejä uusia attribuutteja lomakkeen käsittelyä varten o Input-elementin uusia HTML5-tyyppejä (type-attribuutin arvoja): month, week, time, date, datetime, datetime-local, color, url, email, tel, number, range, search <input type = date > <input type = color > 9
Interaktiiviset elementit (3) o Selaimet eivät vielä tue kattavasti uusia piirteitä HTML-tulkit jättävät tunnistamattomat elementit tai attribuutit käsittelemättä uudet ominaisuudet jäävät vain huomiotta tulevat käyttöön sitä mukaan kun uudet selainversiot niitä tulkitsevat 10
Wufoo interaktiivisten elementtien testaustyökalu o Wufoo (http://wufoo.com/html5/) voit tarkistaa miten eri selaimet tukevat HTML5-lomakkeen uusia inputelementin type-attribuutin arvoja sivustolla voi testata myös muiden uusien HTML5-piirteiden toimintaa (uusia input-elementtien attribuutteja ja kokonaan uusia elementtejä) o Sivustolla helppo kokeilla livenä uusien piirteiden toimintaa
HTML-dokumentti o DOM (document object model) dokumentti (document) koostuu solmujen (nodes) hierarkiasta: elementtisolmut ja tekstisolmut <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>html-sivu</title> </head> html head body <body> <h1> Elementtejä ja attribuutteja </h1> <p> Tällä sivulla on otsikko ja kaksi kappaletta (tämä on kappaleista ensimmäinen). </p> <p> Tämä on <em>toinen</em> kappale ja tässä on kuva <a href="http://www.visittampere.fi">tampereesta</a><br> <img src = "img/01-tampere.jpg" alt="tampereen Hämeensilta"> </p> </body> </html> meta title #text h1 #text p #text #text em p #text #text a #text br img 12
Äiti ja lapsisolmut (parent and child nodes) #text em p #text a br img o DOM (Document object model) kuvaa sivun HTML-dokumentin rakenteen solmujen hierarkisena rakenteena tärkeä ymmärtää kun halutaan päästä muokkaamaan yksittäisen elementin attribuutteja #text #text o p-solmulla on kuusi lasta, br-solmulla on viisi sisarta o #text-solmu vasemmalla on p-solmun ensimmäinen lapsi (firstchild) o em- solmulla on yksi lapsi (#text-solmu) o a-solmu on oikeanpuolimmaisen #text-solmun äiti 13
CSS-kertausta o CSS-tyylitiedostojen avulla määritellään miten sivu näytetään käyttäjälle o Tyylisääntö (style rule) koostuu valitsimesta (selector) ja säännön esittelystä (declaration) valitsin (selector) Valitsin { css-ominaisuus-1: arvo1; css-ominaisuus-2: arvo2; säännön esittely (declaration) 14
CSS tyyliohjekieli: tyylisäännön syntaksi Deklaraatio (aaltosulkujen välissä) sisältää ominaisuus-arvo pareja, jotkä määräävät tyylin valitsimen määrittämille elementeille o esimerkki: ykköstason otsikoille tummansininen tausta ja tekstin väriksi valkoinen ominaisuus (property) h1 { background-color: DarkBlue; color: white; arvo(value) o sama sääntö kohdistetaan usemmalle elementille: o Tyyliohjeet voi liittää 1) elementin sisään style-attribuuttiin 2) style-elementtiin otsikko-osaan head-elementin sisään (lapseksi) 3) erilliseen css-tyylitiedostoon h1, h2 { margin: 0; padding: 0; 15
Tapa 1: Tyyliohjeen liittäminen elementtiin o Suoraan elementtiin style-attribuuttia käyttäen (tällöin valitsin jää pois, koska kohde-elementtiä ei tarvitse määritellä) <h2 style="color:green; margin-left:20px > Tämä on joku otsikko </h2> o Toimii, mutta mikä tekee tästä tavasta huonon? 16
Tapa2: Tyyliohjeen liittäminen otsikko-osaan o suoraan HTML-dokumentin otsikko-osaan <style> elementtiä käyttäen o kätevä nopeissa pienissä kokeiluissa <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf-8" /> <title>sivun otsikko</title> <style type="text/css"> body { background-color:maroon; margin-left:20px; p { color:white; </style>... 17
Tapa 3: Erillinen tiedosto, suositeltavin tapa o Erillinen *.css tiedosto, joka liitetään HTML-dokumenttiin otsikkoosassa <link>-elementin avulla. o Usein järkevää kirjoittaa useampia tyylitiedostoja uudelleenkäyttö dokumenttiin liitetään vain kulloinkin tarpeelliset tyylitiedostot <!DOCTYPE html> <html lang="fi"> <head> <meta charset="utf-8" /> <title>sivun otsikko</title> <link rel="stylesheet" type="text/css" href="polku/perustyylit.css" /> <link rel="stylesheet" type="text/css" href="polku/navigointi.css" /> <link rel="stylesheet" type="text/css" href="polku/erityiset-tyylit.css" />... o Tavat 1-3 eivät sulje toisiaan pois yhteentörmäystilanteessa elementtiin kirjoitettu sääntö kumoaa otsikko-osan säännön, joka edelleen kumoaa mahdollisen tyylitiedostossa annetun säännön 18
Valitsimet (selektorit, selectors): Yleisimmät o elementti-, luokka-, id- ja *-valitsin: elementtivalitsin (type selector) kohdistuu kaikkiin kappale-elementteihin luokkavalitsin (class selector) kohdistuu kaikkiin elementteihin, joiden class-attribuutilla on annettu arvo nämä voidaan yhdistää (p.intro) id-valitsin kohdistuu kaikkiin elementteihin, joiden id-attribuutilla on annettu arvo p { background-color: yellow;.intro { background-color: yellow; #firstname { background-color: yellow; * universaalivalitsin kohdistuu kaikkiin elementteihin * { background-color: yellow; HARJOITTELE 19
Valitsimet 2 Attribuuttivalitsimet o Valitaan elementtejä niille määriteltyjen attribuuttien ja attribuuteille annettujen arvojen perusteella Valitsin [attribuutti] [attribuutti="arvo"] [attribuutti^="arvo"] [attribuutti$="arvo"] [attribuutti*="arvo"] [attribuutti ="arvo"] [attribuutti~="arvo"] [attr1][attr2] Kohdistuu kaikkiin elementteihin, joilla ko. attribuutti, esim: kaikkiin, joilla ko. attribuutilla on ko. arvo a[target] {background-color: yellow kaikkiin, joilla ko. attribuutti alkaa on ko. arvolla (prefixed with arvo > kaikkiin, joilla ko. attribuutti loppuu ko. arvoon (suffixed with arvo ) kaikkiin, joilla arvo sisältyy ko. attribuutin arvoon kaikkiin, joilla ko. attribuutin arvo alkaa arvo- (tai on arvo ) kaikkiin, joilla ko. attribuutilla lista arvoja, joista yksi on arvo kaikkiin elementteihin, joilla kaikki luetellut attribuutit 20
Valitsimet 3 Pseudoluokkavalitsimet o Pseudoluokkavalitsin kirjoitetaan elementin nimen perään kaksoispisteellä erotettuna etsintä ei nimen, attribuuttien eikä attribuuttien sisältöjen perusteella, vaan jonkun muun elementin ominaisuuden perusteella esimerkiksi käyttöliittymäelementeille hakua elementin tilan perusteella pseudoluokka ts. kyseistä luokkaa ei varsinaisesti ole määriteltynä :active :checked :disabled :empty :enabled :first :first-child :first-of-type :focus :hover :in-range :invalid :lang :last-child :last-of-type :link :not() :nth-child :nth-last-child :nth-last-of-type :nth-of-type :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :root :target :valid :visited 21
Valitsimet (4): Pseudoelementtivalitsin o Pseudoelementtivalitsin liitetään elementin nimen perään kahdella kaksoispisteellä erotettuna pseudoluokkavalitsinten avulla etsitään olemassa olevia elementtejä, kun taas voidaan "luoda" pseudoelementtejä, ts. vastaavaa elementtiä ei varsinaisesti ole olemassa ::after ::before ::first-letter ::first-line 22
Valitsimet 5 Kombinaattorivalisimet (Combinators) o Kombinaattorivalitsimet käyttävät elementtien etsinnässä hyväkseen dokumenttipuun rakennetta div p { background-color: yellow; e1 e2 jälkeläisvalitsin (descendant combinator) valitsee elementit e2 joilla e1 äitinä tai esiäitinä div > p { e1 > e2 background-color: yellow; lapsivalitsin (child combinator) valitsee elementit e2, joilla e1 äitinä e1 + e2 div + p { seuraava sisar (adjagent sibling) background-color: yellow; valitsee elementin e2, joille e1 välittömästi edellinen sisar p ~ ul { e1 ~e2 background: #ff0000; nuorempi sisar (child combinator) valitsee elementit e2, joilla e1 vanhempana sisarena 23
Valitsimet 6 Esimerkkejä o Esimerkiksi lapsen valinta: valitsee vain ne p-elementit, joka ovat #tunnus-elementin lapsia P-elementit, jotka eivät ole #tunnus-elementin lapsia ei muutu punaiseksi o Vertaa mikä eroaa edellisestä? vaikuttaa kaikkiin #tunnus-elementin lapsiin (ts. sen sisällä oleviin kappaleisiin) o Entä tässä? minkä elementin teksti muuttuu punaiseksi? vain sen p elementin, joka on #tunnus-elementin sisällä ja äitinsä ensimmäinen lapsi o Entä tämä? #tunnus > p { color:red; #tunnus p { color:red; #tunnus p:first-child {color:red; #tunnus~p {color:red; valitsee ne p-elementit, jotka ovat #tunnus-elementin nuorempia sisaruksia 24
Valitsimet 7 Esimerkkejä o o o o #tunnus > p { color: Red; valitsee vain ne p-elementit, joka ovat #tunnus-elementin lapsia p-elementit, jotka eivät ole #tunnus-elementin lapsia ei muutu punaiseksi #tunnus p { color: Red; mikä eroaa edellisestä? vaikuttaa kaikkiin #tunnus-elementin lapsiin (ts. sen sisällä oleviin kappaleisiin) #tunnus p:first-child {color: Red; minkä elementin teksti muuttuu punaiseksi? vain sen p elementin, joka on #tunnus-elementin sisällä ja äitinsä ensimmäinen lapsi #tunnus~p {color: Red; valitsee ne p-elementit, jotka ovat #tunnus-elementin nuorempia sisaruksia 25
Sääntöjen kohdistaminen (yhteentörmäykset) o Yhteen elementtiin kohdistuu usein monta tyylisääntöä yhdessä tyylitiedostossa saattaa olla useita samalle elementille sääntöjä saatetaan tuoda useasta lähteestä sääntöjä periytyy elementille automaattisesti (äidiltä) o Minkä mukaan elementin ulkoasu määräytyy? o Kolme pääperiaatetta: periytyminen (inheritance) sijainti (location), ja tarkkuus (specificity) Myöhemmin esitelty syrjäyttää ( ylikirjoittaa ) aiemman, jos tarkkuus on sama Painoarvot tarkemmasta yleisempään: (1) sääntö elementin sisällä (2) id-valitsin (3) luokka-, pseudoluokka- ja attribuuttivalitsimet (4) elementti- ja pseudoelementtivalitsimet 26
Esimerkki o div[class] {color: red; valitsee kaikki ne div-elementit, joilla on ominaisuus class o div[class= "esim"] { color: blue; Valitsee kaikki ne div-elementit, jotka kuuluvat luokkaan esim o Entä jos nämä säännöt ovat molemmat voimassa? div-elementit joilla on luokka-attribuutti, mutta se ei ole esim punainen vai sininen? säännöillä sama tarkkuus (attribuuttivalitsimia) riippuu siitä kumpi em. säännöistä on esitelty myöhemmin 27
CSS edistyneempiä piirteitä
Webfonttien käyttäminen o Tietyt vakiofontitkäytettävissä aina esimerkiksi Times, Georgia, Arial, Tahoma, Lucida Console, jne. o Iso valikoima ilmaisia fontteja, helppo ottaa käyttöön etsi ensin haluamasi fontti, esim. www.fontsquirrel.com lataa fontin määrittelevä tiedosto palvelimelle (esim. Chunkfive.otf), ts. tallenna se omaan public_html hakemistoosi tuo fonttitiedosto html-tiedostoosi: @fontface-sääntö (CSS3) tämän jälkeen voit käyttää sitä samalla tavalla kuin vakiofonttejakin h1, h2 { @font-face { font-family: "ChunkFiveRegular"; src: local ( ChunkFiveRegular") url("fonts/chunkfive.otf") format ("opentype"); font-family: "ChunkFiveRegular", "Georgia", serif;
Webfonttien käyttäminen 2 o Googlefontit: https://www.google.com/fonts# ei tarvitse tallentaa palvelimelle voi käyttää linkkaamalla kirjasintiedoston suoraan Googlen palvelimelta o Esimerkiksi fontti "Indie Flower " etsi h1, h2 Googlen { palvelusta valitse use ja saat valmiit skriptin fontin käyttämiseksi itse asiassa googlen antamasa link-tiedostossa vain vastaava @font-face -sääntö jonka itse kirjoitimme edellä <link href= 'https://fonts.googleapis.com/css?family=indie+flower' rel='stylesheet' type='text/css'> font-family: 'Indie Flower', cursive;
Elementtien sijoittelusta: CSS-ominaisuus display o Määrittää miten elementti sijoittuu suhteessa sitä edeltäviin ja sitä seuraaviin elementteihin o display: block leveys/korkeus voidaan asettaa (widht ja hight) asemoituu aina omalle rivilleen o display: inline leveys/korkeus määräytyy automaattisesti, sitä ei voi asettaa asemoituu samalle riville (jos mahtuu) o display: inline-block asemoituu kuten inline-elementti mutta sille voi antaa leveyden/korkeuden o display: none elementti muutetaan näkymättömäksi 31
Oletusarvoinen display-arvo o Oletusarvoisesti display: block lohkoelementit, esim. <div>, <p>, <ol>, <ul>, <li>,... o Oletusarvoisesti display:inline sisäelementit, esim. <span>, <em>,... ns. replaced elements poikkeus: vaikka ovat inline-elementtejä, niiden leveys/korkeus voidaan asettaa esim. <img> ja <textarea> 32
Oletusarvoa voi muuttaa o Esim esimerkiksi avautuvan valikon toteutus ul-elementtien ul-lapset, joilla nav äitinä tai esiäitinä nav ul ul { display:none; nav ul li:hover > ul { display: block; nav elementin ul lapsen hiiren kursorin alla olevan li-lapsen ul-lapsi <nav> <ul class="menu"> <li> Ensimmäinen valikko <ul> <li><a href="#">(1) Eka alkio</a></li> <li><a href="#">(1) Toka alkio</a></li> <li><a href="#">(1) Kolmas alkio</a></li> </ul> </li> <li> Toinen valikko. </li> <li> Kolmas valikko. </li> </ul> </nav> 33
Esimerkki, listan tyylittely valikoksi <nav> <ul> <li><a href="#">eka alkio</a></li> <li><a href="#">toka alkio</a></li> <li><a href="#">kolmas alkio</a></li> </ul> </nav> Muutetaan listan rivit inline-elementeiksi, poistetaan pallukat, määritellään listan tausta vihreäksi ja täytettä reunoille (0.5 fonttikorkeutta vertikaalisessa ja 1 fonttikorkeus horisontaalisesssa suunnassa) nav li { display: inline; list-style-type: none; nav ul { background-color: LightGreen; padding: 0.5em 1em; 34
Listan tyylittely valikoksi.. Muutetaan listanalkio vahvennetuksi san-serif-fontiksi ja poistetaan linkille oletusarvoisesti annettava alleviivaus. nav li {.. font-family: "Helvetica", "Arial", "sans-serif"; font-weight: bold; nav a { text-decoration: none; Listan alkioille ei voi määritellä täytettä, kun muutimme elementit inline-elementiksi. Muutetaan navin sisällä olevat listanalkiot inline-block-elementiksi, niin täytteen antaminen onnistuu. Lisätään vielä kaksi mouse-over-efektiä (hoover-pseudoluokkavalitsimella), listanalkio-elementin taustavärin muutos, ja kallistus. nav li { display:inline-block; padding: 1em; nav li:hoover { text-decoration: none; 35
Asemointi: float vs. display o Elementti asemoidaan sivulle elementtivirrasta sen mukaan onko se lohko- vai sisäelementti o Elementin oletusasemointia voidaan muuttaa display-ominaisuuden arvoa muuttamalla (kuten edellä nähty) o Myös muita tapoja muuttaa oletusasemointia vanha tapa asemoinnin toteuttamiseksi oli kellutus (float) elementin kellutus vetää sen pois elementtivirrasta ja sen voi asemoida joko vasemmalle tai oikealle (left, right) div { float: left; muut elementit asemoituvat muuten normaalisti, mutta väistävät kellutetun elementin kellutettua elementtiä seuraava elementti asemoituu joskus ei-toivotusti kellutetun elementin kanssa limittäin sen estämiseksi voi käyttää clear-sääntöä 36
Modernimpi tapa: inline-block o Edellisen kaltaisen asemoinnin voi tehdä myös displayominaisuuden avulla.box { display: inline-block; o Elementille voi antaa leveyden ja korkeuden ja määritellä se inlineblock elementiksi o Ei tarvetta käyttää clear-ominaisuutta, riittää kun asettaa elementille display-arvoksi block.on-its-own { display: block; 37
Yhteenvetona display-ominaisuuden käytöstä o display: inline marginaali ja täyte määräytyvät automaattisesti, niitä ei voi itse asettaa muiden elementtien sallitaan asemoitua elementin eteen tai jälkeen o display: block marginaali ja täyte voidaan asettaa pakotettu rivinvaihto elementin jälkeen o display: inline-block muiden elementtien sallitaan asemoitua elementin eteen tai jälkeen marginaalit & täytteet ja leveys & korkeus voidaan asettaa 38
position: static / relative / absolute / fixed div { position: static relative avsolute fixed; o position: static oletusarvo elementti asemoituu elementtivirrassa display-ominaisuuden arvon mukaisesti) o position: relative elementtiä siirretään suhteessa oletussijaintiinsa o position:absolute sijoittaa elementin suhteessa äitielementtinsä sijaintiin o position:fixed sijoittaa elementin suhteessa selainikkunaan 39
Liikettä sivulle CSS3-ominaisuuksilla o CSS3:n mukana on tulossa käyttöön tyyliominaisuuksia, joiden avulla wwwsivuille saa suoraan liikettä ja jonkinasteista interaktiivisuutta ennen tarvittu joko JavaScriptia tai Flashiä liikkeen saamiseksi www-sivuille edellä käytetty transform esimerkki yhdestä uudesta CSS3-tyyliominaisuudesta o Valitsimen avulla määrättyä elementtiä voidaan kiertää paikallaan halutun astemäärän verran o Muita transform funktioita, esim. scale, skaalaus, elementin koon muuttaminen translate, siirtäminen paikaltaan o Elementin ominaisuuden animoitu muutos transition, tyylin arvosta toiseen animate, animointipolussa useampia avainkehyksia (keyframes) elem { transform: rotate(10deg); elem {transform: scale(x,y); elem {transform:translate(x,y); elem {transition: width 2s; 40
Tekstin palstoitus (CSS3) o Tekstin jakaminen palstoihin voidaan kiinnittää palstanleveys column-width tai palstojen lukumäärä column-count o Palstojen välille voidaan määritellä väliin jätettävä leveys: column-gap Mahdollisen palstanjakoviivan ominaisuudet: column-rule useamman palstan yli jatkuva elementti: column-span (vrt taulukon solun span-ominaisuus) 41
Flexbox (CSS3) o Maalaisjärkisempi tapa joustavien asemointien tekemiseksi kehyksen sisällä joko horisontaalissa tai vertikaalissa (!) suunnassa siksi ei puhuta leveydestä ja korkeudesta, tarvitaan uudet termit sijoittelun pääsuunta, main axis ristikkäinen suunta, cross axis o Kehykselle määritellään kehys boksi div-fl-kehys { display: flex; 42
Flexbox 2 (CSS3) flex-direction: row flex-direction: column o Asemointiin voi vaikuttaa (kehyksen) ominaisuuksilla paljon mahdollisuuksia, tässä vain osa asemointisuuntaan (flex-direction) asemoitavien elementtien rivitykseen (flex-wrap), = vaihdetaanko riviä (saraketta) kun eivät mahdu vai kutistetaanko niitä asemoitavien sijoitteluun pääsuunnassa (justify-content), vasempaan tai oikeaan suoraan, keskitettynä, välistettynä, jne. o Asemoitavalle elementille ei tarvitse määritellä tyyliominaisuuksia paitsi, jos haluaa yksittäisen boksin käyttäytyvän muista poikkeavasti esim. muut kutistuvat sivua kavennettaessa, mutta yksi ei hyvä tutoriaali 43
Uusi mittayksikkö: viewport-prosentti o Mittayksikkö, joka suhteessa viewport-ikkunan leveyteen (viewport on selainikkunassa näkyvä sivun osa): vw, vh, vmin, vmax o Pienissä laitteissa viewport usein kapeampi kuin selainikkuna ikkunaa selataan pyyhkäisyllä sivusuunnassa o Esimerkiksi 1vw = 1/100 nykyisen viewport-leveydestä (1%) 15vh = 15/100 nykyisen viewport-korkeudesta (15%) o Helpottaa elementtien korkeuden säätelyssä Erityisesti elementtien korkeuden säätely vanhoillakin prosenttimitoilla mahdollista mutta hankalaa joutuu huolehtimaan että äiti-elementillä on korkeus koska (width ja height) eivät ole periytyviä ominaisuuksia Esimerkki halutaan määrätä kuvan korkeus, mutta sitoa se sivun leveyteen, ei korkeuteen 44