HTMLi kursus #6.3 – RWD meediaelemendid

HTMLi kursus #6.3 – RWD meediaelemendid

Eelmine osa: HTMLi kursus #6.2 – keerulised meediaelemendid

Selles meediaelementide õpetuspostituses räägin ma RWD meediaelementidest.

Ja nagu ikka on olemas näidisleht, mille interaktiivne versioon asub siin ja ka konspekt, mille interaktiivne näide asub siin.

Näidisleht

RWD’est üldisemalt

Enne kui ma räägin RWD meediaelementidest ja nende atribuudidest, teen ma selgeks, mis RWD üldse on.

RWD (Responsive Web Design) ehk skaleeruv veebidisain on veebidisain, kus veebileht muudab oma väljanägemist olenevalt ekraani suurusest.

Maakeeli öeldes tegeleb RWD veebilehtede ehitamisega, mis sobivad igale platvormile (arvutile, tahvelarvutile ja nutitelefonile).

Näiteks võib tuua minu firma kodulehe ja sellesama blogi disaini. Brauseri suurust muutes, muutub ka veebilehe disain ja väljanägevus.

Ma teen siinkohal ka päris julge oletuse. Nimelt ma arvan, et nii pea sa RWD ei kasuta, sest RWD on seotud väga palju CSSiga (ja ka vahest) JavaScriptiga.

Ma toon need elemendid ja atribuudid välja sellepärast, et kunagi kui RWD’ga rohkem kokku puutud, siis juba tead, mis asjaga on tegemist.

RWD meediaelemendid (või atribuudid) seletatult

Kõik atribuudid, mis ma siin välja toon, kuuluvad elementidele, mida ma seletasin postituses HTMLi kursus #6.1.

<img> elemendil on kaks RWD’ga seotud atribuuti – srcset="URL" ja sizes="väärtus".

srcset="URL pildi_laius" – defineerib ära erinevad erineva resolutsiooniga pildi allikad. Sõidab üle src atribuudi ehk src atribuudi väärtust (pilti) ei näitada brauseris, vaid srcset poolt seatud pilti.

Näide srcset atribuudist

srcset="pilt_800.jpg 800w,
      pilt_400.jpg 400w"

800w – nõnda pannakse srcset atribuudis kirja pildi laius.

Põhimõtteliselt, mida see kood teeb on see, et lisab <img> elemendile mitu erineva resolutsiooniga pilti. Kui sul ei ole paika pandud sizes atribuuti (sellest allpool), mis kontrollib, millal mingit pilti näidatakse, siis esimene rida (pilt_800.jpg) ütleb brauserile, et kui brauseri akna laius on väiksem kui 800 pikslit (ehk 800w on tingimus) näita pilti pilt_800.jpg.

Teine rida ütleb sama asja, ainult et kui brauseri akna laius on väiksem kui 400 pikslit, näita pilti pilt_400.jpg.

Kui nüüd brauseri akna laius on suurem kui kõige suurema pildi laius (ehk praegusel juhul 800px), siis brauser näitab kõige suurema resolutsiooniga ehk kõige laiemat pilti, aga seda terve ekraani laiuselt (kui just ei ole kasutatud CSSi, et pildi laius ekraanil paika panna). Praegusel juhul on kõige suuremaks pildiks pilt_800.jpg.

Soovitavalt võiks olla parameetris pildi laiuseks vastava pildi reaalne laius pikslites.

NB! srcset atribuudis võib olla ükskõik kui palju pilte koos laiustega, aga need peavad olema eraldatud komadega.

srcset suudab veel ühte asja ja see on pikslitihedus (pixel density). Ühesõnaga tähendab see seda, et atribuudi teiseks väärtuseks ei ole mitte pildi laius, vaid kui suur on antud pildi pikslitihedus.

See tähendab seda, et kui me suumime näiteks sisse 200%, siis peaks meie pilt ka antud pikslitihedusele vastama.

 

Võib olla järgnev jutt natukene aitab sul pikslitihedust paremini mõista.

Oletame, et meil on kaks ekraani – esimene erkaan on tavalise pikslitihedusega ja teine kaks korda suurema pikslitihedusega, kui esimene.

Järelikult esimesel ekraanil on 320 (CSSi) pikslit võrdne 320 piksliga tegelikkuses – ekraani pikslite ja CSSi pikslite suhe on 1.

Teisel ekraanil on aga 320 (CSSi) pikslit võrdne 640 piksliga tegelikkuses – ekraani pikslite ja CSSi pikslite suhe on 2.

Võib olla oled kuulnud ka sellisest asjast nagu PPI (pixels per inch) ehk mitu pikslit on ühes tollis. Ehk praeguses olukorras on teisel ekraanil ühes tollis kaks korda rohkem piksleid kui esimesel. Nagu mõistad, siis piksel ei ole selline kindel mõõtühik nagu seda on näiteks meeter – piksel oleneb täiesti ekraanist.

Kui kellegile jäi asi segaseks, siis Tele2’l on olemas täitsa korralik artikkel antud teema kohta (illustratiivsed pildid teevad asja eriti selgeks).

Näide srcset atribuudist koos pikslitihedustega

srcset="pilt_1x.jpg 1x,
      pilt_2x.jpg 2x"

See kood toimib nüüd nõnda, et kui piksleid mahub ekraanile 100% ehk suhe ekraani ja CSSi pikslitel on 1, siis näita pilti pilt_1x.jpg.

Kui aga piksleid mahub ekraanile 200% ehk suhe ekraani ja CSSi pikslitel on 2, siis näita pilti pilt_2x.jpg, mis peaks olema pildist pilt_1x.jpg kaks korda suurema piksli tihedusega (ehk lõppkokkuvõttes kaks korda suurem).

Väärtusteks võib olla ükskõik, mis number – 0.5x, 0.25x, 10x, 2.5x jne.

Pikslitihedus srcset on väga kasulik, kui optimeerid erinevatetele seadmetetele, sest nagu ennist seletasin, siis pikslite arv ekraanil võib kohati erineda.

Mainin ka ära, et kui kasutad srcset atribuuti koos pikslitihedusega, siis ei pea kasutama tingimusi (sizes atribuuti), sest brauser suudab valida õige pikslitihedusega pildi ise.

 

Ennist rääkisin, et srcset sõidab üle src atribuudi, kuid ma soovitaksin (õigemini see on HTMLis kohustuslik) jätta alles src atribuut – kui brauser ei toeta srcset atribuuti, siis src on tagavara variant (fallback option).

Ning srcset kasutatakse tihti ühe ja sama pildiga/teemaga, aga ainult nende piltide suurused on erinevad.

Kui näiteks arvutis on bänneriks pilt lilledest, mille mõõtmed on 1024 ja 768, siis nutiseadmetes näidatakse ka sama pilti, aga ainult selle pildi mõõtmed on väiksemad.

srcset on väga kasulik just sellepoolest, et brauseris laetakse ainult valitud ja sobiv pilt, mitte kõik pildid. See aitab väga palju laadimisaegu (eriti nutiseadmetes) kokku hoida ja muudab veebilehe laadimise kiiremaks.

Vastasel juhul peaksime kasutama suurt ja mahukat pilti nutiseadmetes, mis tegelikult sobib suurele monitorile või isegi telekale. srcset atribuudiga saame aga kasutada erineva suurusega pilte, mis on sobivad erineva suurusega ekraanidele.

Õigemini srcset atribuuti kasutatakse ainult piltide saamiseks. Nagu alguses seletastasin, siis brauser teatud mõttes kasutab srcset parameetrit ka tingimustena, et kui ekraan on väiksem kui pildi laius, siis kasuta parima resolutsiooniga pilti, kuid see ei ole HTMLis ainukene viis asju teha. Lisaks srcset on väljamõeldud atribuut sizes.

Kui sizes jätta defineerimata, siis brauser käitub nagu sizes="100vw" ehk brauser näitab pilti terve ekraani suuruselt ja brauser valib sobivaima pildi ka ekraani suuruse järgi.

 

sizes põhieesmärgiks on panna paika kui suur on <img> element, et brauser saaks valida sobivaima pildi srcset atribuudist.

sizes atribuuti sobivad ükskõik, mis CSSi ühikud (kaasaarvatud viewport ühikud ehk vw ja vh, kuid mitte protsendid).

Näiteks kui paneme sizes atribuudi väärtuseks 1024px, siis on <img> element alati 1024px lai (ja brauser valib alati 1024px või võimalikult sellele lähedase pildi). Nagu just mainisin, siis saab ka sizes atribuudile lisada viewport ühikuid, mis muudab <img> elemendi skaleeruvaks ehk täielikult ekraani suurusest sõltuvaks.

sizes atribuudi juures aga on peamiseks media query‘id (otsetõlkes meedia päringud), mis tegelikult annavadki <img> elemendile skaleeruvuse (kui viewport ühikud välja arvata). Põhimõtteliselt suudavad (CSSis) media query‘d tuvastada ekraani suurust ja teha vastavalt otsuseid.

Neid võib pidada teatud moodi CSSi tingimuslauseteks (ekraani suuruse ja ka mõningate funktsioonide kohapealt).

Näide:

  
<img 
  src="pilt_tavaline.jpg" //Seda siin ignoreeritakse täielikult (kasutatakse ainult siis, kui srcset ei saa laadida ühtegi pilti)
  alt="Tavaline pilt"
  srcset="
    pilt_500.jpg 500w, //500px pilt; näidatakse, kui ekraani suurus on 400px ja 500px vahel või kui ekraan on suurem kui 800px
    pilt_400.jpg 400w, //400px pilt; näidatakse, kui ekraani suurus on 300px ja 400px vahel või kui ekraan on 700px ja 800px vahel
    pilt_300.jpg 300w" //300px pilt; näidatakse, kui ekraani suurus on alla 300px või kui ekraan on 600px ja 700px vahel
  sizes="(max-width: 500px) 100vw,
    50vw" />

Antud näites toimib järgmine loogika:

  • Kui ekraan on väiksem kui 500px näita srcset pilte terve ekraani laiuselt (brauser valib pildid ekraani suuruse järgi).
  • Kui aga ekraan on suurem kui 500px näita srcset pilte poole ekraani laiuselt – brauser valib pildid poole ekraani suuruse järgi ehk pilt_500.jpg näidatakse siis, kui ekraan on suurem kui 800px (pool ekraani on siis 400px). Õigemini muudetakse <img>, kas terve ekraani suuruseks (kui ekraan on alla 500px) või poole ekraani suuruseks (kui ekraan on üle 500px).

Võib olla aitab järgmine näide paremini asjast aru saada:

<img 
    src="pilt_tavaline.jpg" //Seda siin ignoreeritakse täielikult (kasutatakse ainult siis, kui srcset ei saa laadida ühtegi pilti)
    alt="Tavaline pilt"
    srcset="
        pilt_300.jpg 300w, //300px pilt; näidatakse, kui ekraani suurus on alla 300px
        pilt_400.jpg 400w,  //400px pilt; näidatakse, kui ekraani suurus on 300px ja 400px vahel
        pilt_500.jpg 500w"  //500px pilt; näidatakse, kui ekraani suurus on 400px ja 500px vahel
    sizes="(max-width: 300px) 300px,
           (max-width: 400px) 400px,
           (max-width: 500px) 500px
           0" />

Antud näites toimib järgmine loogika:

  • Kui ekraan on väiksem kui 500px, siis muuda <img> element 500px laiuseks ja näita srcset piltidest 500px pilti
  • Kui ekraan on väiksem kui 400px, siis muuda <img> element 400px laiuseks ja näita srcset piltidest 400px pilti
  • Kui ekraan on väiksem kui 300px, siis muuda <img> element 300px laiuseks ja näita srcset piltidest 300px pilti
  • Kui ekraan on suurem kui 500px, siis ära näita pilti üldse – õigemini muuda pildi laius nulliks

 

Media query‘sid kasutatakse nõnda, et kõigepealt defineeritakse ära meedia tunnusjoon (media feature) ehk tingimus. Järgneb koolon ja tingimuse suurus.

Nagu siin

min-width: 500px

Ma toon selles postituses välja ainult kaks meedia tunnusjoont – max-width ja min-width, kuna neid kasutatakse kõige tihedamini.

max-width on tõene siis kui ekraan on väiksem kui antud suurus.

min-width on tõene siis kui ekraan on suurem kui antud suurus.

Antud suurus on tavaliselt pikslites.

sizes atribuudis tuleb media query panna sulgude sisse ja sulgude järele väärtus (<img> elemendi suurus), mis peab kehtima siis, kui media query on tõene.

Ja nüüd et defineerida teisi media query‘sid, siis tuleb need eraldada komadega (see tähendab pärast väärtust).

Kui sizes atribuudis on media query‘d koos väärtustega ning üks väärtus ilma media query‘ta, siis seda loetakse vaikimisi väärtuseks ehk väärtus kehtib siis kui üksiki defineeritud media query ei ole tõene.

Meeles tuleks pidada ka seda, et media query‘d peaks alati defineerima kasvas järjekorras – see tähendab, et väiksema tingimusega enne ja suuremad pärast.

Näiteks ei tohi max-width: 500px olla enne max-width: 300px, sest brauser valib (sizes atribuudis) alati kõige esimese tõese media query väärtuse. Vastasel juhul jääb max-width: 500px media query kehtima (kui ekraan loomulikult 500px suurem ei ole), kuna igal juhul on ekraan väiksem kui 500 pikslit, mis sest, et see võib olla ka väiksem kui 300 pikslit – nõnda jäävad media query‘d üksteise “varju”.

<img> elementi koos uute atribuutidega kasutasin enda veebilehes esimese RWD pildina. Ekraani laiust muutes muutub nii pildi teema kui ka pildi suurus.

Kusjuures kõik tomib üsnagi sujuvalt, sest kasutasin viewport ühikuid. Teiste ühikutega (nt pikslitega) nii sujuv see ei ole – pilt “hüppab” ühest suurusest teise.

 

Enne kui liigun <picture> elemendi juurde, mõtlesin, et seletan üldisemalt lahti, kuidas srcset ja sizes töötavad.

Põhimõtteliselt, mida brauser teeb on järgmine:

  1. Saab brauseri/ekraani laiuse
  2. Leiab, milline media query/tingimus on sizes atribuudis kõige esimesena tõene
  3. Saab tõese media query/tingimuse väärtuse
  4. Laeb pildi srcset atribuudist, mis on kõige lähemal tõese media query/tingimuse väärtusele

 

<picture></picture> – see element on piltide multitool, kuna sellega saab HTMLi lisada väga mitmel moel pilte. Seda kasutatakse koos <source> ja <img> elemendiga (need on <picture> kohustuslikud lapselemendid). Sõna picture on ingliskeelne sõna ja eesti keeles tähendab pilti.

<picture> elemendil ei ole ühtegi temale omast atribuuti, küll aga on selle eest <source> elemendil lisa atribuute kui tema emaelemendiks on <picture>.

Enda veebilehes kasutasin <picture> elementi defineerimaks teise ekraanist sõltuva pildi. Nagu näed ei ole see nii sujuv kui <img> elemendi srcset ja sizes, kuna kasutasin seal ainult piksleid. Võib ka näha, et kui ekraan on väiksem kui 1000px, siis näitakase 640px pilti.

Reaalsuses on selliseid “hüppeid” vähem, kuna kas kasutatakse CSSi, viewport ühikuid või on media query‘sid paika pandud täpsemalt (1000px juures näidatakse ka 1000px pilti).

 

Kui <source> elemendi emaelemendiks on <picture>, siis tuleb <source> elemendile juurde kaks atribuuti:

  • srcset="URL" – paneb paika, mis pilti esindab <source> element <picture> elemendis. Siin kasutatakse srcset väärtuseks ainult ühte pilti ilma pildi laiuseta, sest <source> elemente saab <picture> elemendis olla mitu ja järgmine atribuut media paneb paika millal mingit <source> elementi <picture> elemendis kasutatakse. Õigemini võib srcset kasutada ka nagu <img> elemendi juures, et defineerid ära näiteks erineva pikslitihedusega pildid, kuid see ei ole eriti levinud – rohkem on kasutuses ikkagi erinevad <source> elemendid. srcset on kohustuslik atribuut.
  • media="media query" – defineerib ära media query, millal srcset pilti näidatakse. Siingi tuleks jälgida, et media query‘id ei jääks üksteise “varju”.

Lisaks eeltoodud atribuutidele on <source> elemendil ka olemas atribuut sizes, millega saab täpselt samamoodi panna paika tingimused, kui suur on <picture> element erinevate ekraani suuruste korral, kuid jällegi oleks targem siinkohal kasutada atribuuti media ja läbi pildi suuruse ka paika panna <picture> elemendi suurus.

<img> elementi kasutatakse <picture> elemendis tagavara plaanina, juhul kui peaks midagi <source> elementidega juhtuma või kui ühegi <source> elemendi media query ei ole tõene.

<img> element on kohustuslik <picture> elemendis – kui seda ei ole, siis ühtegi pilti (ka <source> defineeritud pilti) ei näidata. Kindlasti jälgi ka seda, et <img> oleks <picture> elemendis viimane, muidu jäävad <source> elemendiga defineeritud pildid näitamata.

 

Ka <area> elemendil on olemas RWD’ga seotud atribuut ja see on media.

Ja nagu arvata võid on selle väärtuseks media query. See täpsustab, millise seadme jaoks on see <area> element mõeldud, kuid erilist efekti see ei anna.

See on lihtsalt mõeldud nõuandvaks atribuudiks ja selletõttu ei ole ma ka seda näidisveebilehte lisanud.

 

Nüüd selle postituse koduse ülesandega on põhimõtteliselt samamoodi, kui eelmise HTMLi kursuse postitusega.

Ma ei ütle, et sa pead seda tegema, aga see tuleks sulle kasuks. Lihtsalt kirjuta elemendid, mida ma siin välja tõin, koodi ümber.

 

Järgmine osa: HTMLi kursus #7 – Formid

 

Kui sul tekkis küsimusi, siis küsi neid julgelt kommentaarides 🙂 !

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *