Novinky Odborné články 19.5.2020

Ako na cross browser kompatibilitu: návod pre developerov (2. časť – CSS, responzivita, mobilné dáta)

V prvej časti tejto série blogov sme si povedali, na čo všetko treba pamätať ešte pred samotným vývojom webovej stránky s cross browser kompatibilitou. 

Vieme, že programujeme pre širokú škálu používateľov a nie pre seba, pripomenuli sme si, že hlavný boss je klient a preto ho treba pozorne počúvať. Tiež by sme mali používať overené HTML 5 štandardy a nemali by sme zabúdať ani na realistický odhad času, ktorý nám vývoj zaberie.

V tejto časti sa dozviete: 
  • Niečo o CSS
  • Aké prefixy by ste mali používať
  • Čo je to „CSS reset”
  • Aká dôležitá je responzivita na mobilných zariadeniach
  • Že mobilná verzia webu by kvôli mobilným dátam nemala byť objemná

Okrem aktuálnych štandardov nezabudnite ani na úpravu samotného kódu. Tieto úkony sú často integrované v nástrojoch či frameworkoch, ktoré pri vývoji používate.

Aké prefixy by ste mali používať?

Rôzne CSS pravidlá v starších verziách prehliadačov neboli plne podporované. Prehliadače ich zapracúvali nezávisle od seba a každý si mohol vyžadovať iný prefix. Dobrou ukážkou je „flexbox layout”.

CSS Flexible Box layout modul. Zdroj: SCR technologies

Je to vymoženosť, ktorú ako front–end developer využívate pre zarovnávanie a usporiadanie elementov. Nie vždy sa to dalo spraviť týmto spôsobom. Kým bol „flexbox layout” postupne integrovaný, musel byť zapísaný v rôznych alternatívach:

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

Aby ste nemuseli vypisovať každú jednu alternatívu ručne, môžete si prácu uľahčiť dvomi spôsobmi:

  1. výsledný CSS kód necháte prejsť online autoprefixerom,

alebo

  1. autoprefixer zapojíte do build procesu v Gulp/Webpack.

V oboch prípadoch nezabudnite na nastavenie parametru, ktorý určuje, koľko úrovní chcete spätne ošetriť. Mnoho funkcionalít sa v priebehu vývoja webových technológií  podarilo plne implementovať, nemá teda zmysel riešiť nekompatibilitu spred desiatich rokov.

Urobte CSS reset

Prehliadače automaticky aplikujú vlastné štýly na väčšinu základných prvkov. Mám na mysli odsadenia, veľkosť, typ a farbu písma/fontu, zaoblení rohov a podobne.

Aby ste udržali jednotný vzhľad a uistili sa, že rovnaké pravidlá budú platiť všade, odporúčam, aby ste ešte pred vaším CSS súborom načítali takzvaný „CSS reset”.

Existujú totiž šikovní ľudia, ktorí si dali tú námahu skontrolovať, kde tieto rozdiely vo vzhľade vznikajú. Vám stačí len importovať jeden súbor. Veľmi známy je napríklad normalize.css, no Google vám po zadaní kľúčového výrazu „css.reset“ ponúkne viac relevantných výsledkov, ktoré sa vám môžu hodiť. Napríklad najpoužívanejší css framework Bootstrap má okrem vlastných štýlov implementovaný už aj vlastný CSS reset.

Myslite na responzivitu

Stále viac ľudí sa pripája do internetu cez mobilné zariadenia. CSS je na tento trend pripravené a je vhodné pre akýkoľvek variant rozlíšenia obrazovky či displeja.

Naviac, môžete zadať aj vlastné, exkluzívne štýly, ktoré ovplyvnia iba dané rozlíšenie, môžete sa zamerať iba na šírku, výšku či na telefóny v landscape režime. Viac o responzívnom web dizajne a media queries sa dočítate napríklad TU.

Berte do úvahy fakt, že nie všetky funkcie, ktoré vidíte na monitore desktopu je vhodné zobrazovať na mobile. Smartfóny majú spravidla menší výkon, týka sa to najmä lacnejších či starších modelov. Niektoré efekty ako napríklad pohyblivé pozadia je dobré nahradiť statickými a jednoduchšími prvkami.

Radšej uberte z namakaného a nablýskaného vizuálu, než by ste mali prísť o používateľa, ktorý zo stránky odíde, lebo sa mu načítava pomaly a nemá z jej prehliadania dobrý pocit.

Nezabúdajte na mobilné dáta

Ak sa používateľ pripojí cez mobilné dáta, rýchlosť  načítania stránky môže byť pomalá a závisí od mnohých premenných (hustota pokrytia, pohyb používateľa a krátkodobé výpadky dátovej služby, operátor, 3G/LTE a mnoho ďalších). Myslite aj na to, že nie každý človek má predplatený 15-gigový dátový balík.

Preto odporúčam zachovať mobilnú verziu webu čo najmenej objemnú. Môžete to docieliť práve vyhodením, resp. nepoužitím rôznych JavaScript funkcionalít, ktoré pre samotnú stránku nie sú nevyhnutné, či nahradením zdrojových ciest obrázkov za alternatívy s menším rozlíšením.

Začíname s animáciami

Animácie môžete riešiť pomocou CSS aj JavaScriptu. Pre plynulý chod animácií je dobré animovať CSS vlastnosti, ktoré vie prehliadač podporiť hardvérovou akceleráciou.

Ukážeme si to na príklade: miesto posunutia doprava pomocou left: 10px, margin-left: 10px alebo padding-left: 10px, je lepšie použiť transform: translateX(10px). Samozrejme, urobiť kvalitnú animáciu nie je jednoduché.

V pokračovaní blogu sa budem venovať efektívnym, hardvérovo akcelerovaným animáciám, JavaScriptu, testovaniu, optimalizácii a chybám, na ktoré môžeme počas vývoja naraziť.

 

Autor: Ľubo, front-end developer, SCR technologies
scr@scr.sk

Sledujte SCR technologies na FacebookuLinkedIn a Instagrame

Komentovať

Ďalšie Aktuality

VIDEODISKUSIA SME: Priemysel musí byť po kríze viac smart

Čítaj viac

Vyhlásenie zástupcov zamestnávateľských združení a digitálnych platforiem na Slovensku k Plánu obnovy a zvýšenia odolnosti SR (RRF)

Čítaj viac

ITAS: Kapitola o digitalizácii je v reformnom dokumente MF SR problematická

Čítaj viac

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