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.

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 tingimus" – defineerib ära erinevad pildi allikad sõltuvalt ekraani laiusest. Sõidab üle src atribuudi ehk src atribuudi väärtust (pilti) ei näitada brauseris, vaid srcset poolt seatud pilti.

Näide srcset atribuudist koos ekraani laiuse tingimustega

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

Põhimõtteliselt, mida see kood teeb on see, et 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 suurem tingimus (ehk praegusel juhul 800w), siis brauser näitab kõige suurema tingimusega pilti. Praegusel juhul pilt_800.jpg.

Soovitavalt võiks olla tingimuste suuruseks vastava pildi laius, sest siis on kindel, et pildi resolutsioon ei muutu liiga häguseks.

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

srcset suudab veel ühte asja ja see on pikslitihedus (pixel density). Ühesõnaga tähendab see seda, et tingimustes ei ole mitte ekraani suurus, vaid kui palju piksleid mahub ekraanile.

See tähendab seda, et kui me suumime näiteks sisse 200%, siis ekraanile mahub kaks korda rohkem piksleid.

Ja sellest suudab sõltuda ka srcset.

Näide srcset atribuudist koos pikslitiheduse tingimustega

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

See kood toimib nüüd nõnda, et kui piksleid mahub ekraanile 100% ehk 1 korda, siis näita pilti pilt_1x.jpg.

Kui aga piksleid mahub ekraanile 200% ehk 2 korda, siis näita pilti pilt_2x.jpg, mis peaks olema pildist pilt_1x.jpg kaks korda suurema piksli tihedusega.

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

Pikslitihedus tingimusena srcset on väga kasulik erinevates seadmetes, sest pikslite arv ekraanil võib erineda.

Ennist ütlesin, et srcset sõidab üle src atribuudi, kuid ma soovitaksin (õigemini see on HTMLis kohustuslik) jätta alles src atribuut, et kui srcset peaks midagi juhtuma, siis src on tagavara variant (fallback option).

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

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

srcset on ka väga kasulik sellepoolest, et brauseris laaditakse ainult valitud pilt, mitte kõik pildid. See aitab väga palju laadimisaegu (eriti nutiseadmetes) kokku hoida.

 

Teine RWD atribuut, mille ma välja toon <img> juures on sizes="väärtus".

sizes põhieesmärgiks on panna paika kui suurelt näidatakse srcset pilti sõltuvalt ekraanist.

sizes kasutatakse viewport unit‘eid (vw – viewport width või vh – viewport height; CSSi mõõtühik, mis sõltub ekraani suurusest).

Kuna RWD on seotud väga palju just ekraani laiusega, siis kasutatakse tihedamini vw’d kui vh’d.

Näiteks kui sizes="50vw", siis see tähendab seda, et srcset pilte näidatakse alati 50% ekraani laiusest.

Ja täpselt samamoodi kehtib ka teiste väärtuste korral – kui sizes="25vw", siis näidatakse srcset pilte alati 25% ekraani laiusest jne.

See aitab väga palju kaasa just RWD’es, et pilt säilitaks oma õige suuruse ükskõik, mis ekraanis.

sizes on veel tegelikult üks komponent ja see on media queried (otsetõlkes meedia päringud). Põhimõtteliselt suudavad (CSSis) media queried tuvastada ekraani suurusust ja teha vastavalt otsuseid.

Neid võib pidada teatud moodi CSSi tingimuslauseteks (ekraani suuruse kohapealt).

sizes atribuudis saab media query taha panna vw väärtusi.

See tähendab seda, et vw väärtus kehtib ainult siis, kui media query on tõene.

Kui media query on väär, siis seda vw väärtust ei lisata ning (kui on olemas muu väärtus) lisatakse mõni muu väärtus.

Näide sizes atribuudist koos media queriedega

<!--Kui ekraan on väiksem kui 500px näita srcset pilte terve ekraani laiuselt-->
<!--ja kui ekraan on suurem kui 500px näita srcset pilte poole ekraani laiuselt-->    
sizes="(max-width: 500px) 100vw,
  50vw"

<!--Kui ekraan on suurem kui 500px näita srcset pilte terve ekraani laiuselt-->
<!--ja kui ekraan on väiksem kui 500px näita srcset pilte poole ekraani laiuselt-->   
sizes="(min-width: 500px) 100vw,
  50vw"

Media queriesid 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 tuleb media query panna sulgude sisse ja sulgude järele väärtus, mille suuruselt tahetakse srcset pilte näidata.

Ja nüüd et defineerida teisi media querisid, siis tuleb need eraldada komadega (pärast väärtust).

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

<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 sizes atribuut määrab ära, kui suurelt peaks pilte näitama.

 

<picture></picture> – see element on just mõeldud RWD jaoks. Seda kasutatakse koos <source> ja <img> elemendiga (need on <picture> lapselemendid). Sõna picture on ingliskeelne sõna ja eesti keele 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 ekraanis suurusest sõltuva pildi. Nagu näed ei ole see nii sujuv kui <img> elemendi srcset ja sizes.

Nimelt muutub ekraani suuruse muutmisel pildi teema ja ka suurus, kuid seda tehes fikseeritud suurustele (nt. kui ekraani laius on alla 1000px, siis pilt koheselt hüppab 640 piksli peale – seda saab CSSiga loomulikult ennetada).

 

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

  • srcset="URL" – paneb paika, mis pilti kasutatakse <picture> elemendis. srcset kasutatakse <source> ühe korra, sest <source> elemente saab <picture> elemendis olla mitu ja seega ka srcset. Kohustuslik atribuut.
  • media="media query" – defineerib ära media query, millal srcset pilti näidatakse.

<img> elementi kasutatakse <picture> tagavara plaanina, juhul kui peaks midagi <source> elementidega juhtuma.

 

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äidis veebilehte 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 *