Blog

Vývoj webstránky s ohľadom na cross-browser kompatibilitu, časť 1.

Know-how Technológie
6.3.2020
Podarilo sa vám niekedy vytvoriť web-stránku či web-aplikáciu, ktorá funguje a vyzerá ako má bez ohľadu na to, či ju prezeráte vy na vašom pracovnom zariadení, klient na svojom najnovšom iPhone alebo užívateľ z obyčajného kancelárskeho notebooku?

Tvorba takéhoto webu nie je nemožná, no jednoznačne je potrebné držať sa pravidiel a princípov, na ktoré sa teraz spolu pozrieme.

Image

Zdroj

Všetko nie je len o písaní kódu. Celú problematiku je možné rozdeliť do 3 skupín, ktoré si postupne objasníme.

  1. Plánovanie
  2. Vývoj s ohľadom na kompatibilitu
  3. Testovanie & optimalizácia

Plánovanie

Predstavte si situáciu – veľmi dobrý kuchár, s top zariadením a surovinami, pripraví svoju špecialitu ako obed pre 20 náhodne vybraných ľudí z celého sveta. Zaručujú jeho skúsenosti a vybavenie spokojnosť všetkých 20 ľudí? Vzhľadom na to, že každý z nich môže mať rôzne chuťové preferencie, alergie, či stravovacie návyky, nie je úspech vôbec zaručený.

Rovnako tak skúsený developer môže pochybiť  v prípade , že si neuvedomuje, kto bude jeho produkt používať. Operačné systémy (Windows, MacOS, Linux distribúcie, Android, iOS…), webové prehliadače (Safari, Firefox, Chrome, Explorer, Edge, Opera…) a veľkosti, resp. rozlíšenia obrazoviek od malých telefónov po 4K monitory. Na všetky tieto elementy a ich kombinácie je potrebné prihliadať.

Čo s tým teda? 

 

Zdroj

Ešte pred samotným vývojom, je vhodné si spolu s klientom definovať, ktoré platformy bude projekt podporovať. Pri hybridných aplikáciách je potrebné určiť aj verziu operačného systému, napr. iOS 12+, štandardne však stačí zvoliť verzie iba pre jednotlivé prehliadače.

S jasnými požiadavkami a cieľovou skupinou je možné pristúpiť k výberu technológií. Je potrebné si dávať pozor na množstvo JavaScript knižníc. Každá z nich je totiž závislá na jej autorovi a na jeho dobrej vôli ju aktualizovať. Je dobré mať projekt čo najviac pod kontrolou a miesto “hipster-cool-modern-animate-library.js ver. 1.0.12” skôr použiť známejšiu, komerčnú alternatívu alebo ideálne nakódiť niečo vlastné.

Každá knižnica, framework má v dokumentácii spomenuté, kde funguje, kde len čiastočne a kde vôbec nefunguje. Spravidla platí, čím používanejšia a známejšia knižnica je, tým má lepšiu spätnú podporu. Štúdium dokumentácie a fóra so zoznamom otvorených/vyriešených chýb je ale veľmi dôležité.

 Vývoj

HTML

Image

Zdroj

Pokiaľ ide o funkčnosť, stačí sa držať HTML 5 štandardov a nepoužívať to, čo je ešte len v štádiu experimentovania/vývoja.

Výzvou môže byť jednotnosť vzhľadu niektorých HTML komponentov, napríklad video prehrávač <video>. Pri tých momentálne platí, že každý prehliadač si ich vykreslí po svojom a tým sú obmedzené aj možnosti štýlovania. Pokiaľ potrebujete úplne totožný vzhľad pre všetky prehliadače, musíte sa vzdať predvoleného ovládacieho panelu (play, pause, volume…) a naštýlovať, naprogramovať si vlastné UI, ktorým bude užívateľ spúšťať jednotlivé akcie. Nejedná sa v zásade o nič zložité, avšak ide o čas, s ktorým je potrebné počítať už pri úvodných odhadoch práce.

V ďalšej časti nášho seriálu si povieme viac k CSS, prefixom, predvoleným štýlom, responzivite a animáciám.

 

Ľubo
Front-end Developer

Používate zastaralý prehliadač. Môžete si ho aktualizovať na tejto stránke.