CSS

Okrem aktuálnych štandardov sa musíte povenovať aj úprave samotného kódu. Tieto úkony sú často integrované v nástrojoch, frameworkoch, ktoré pri vývoji používate.

Prefixy

Rôzne CSS pravidlá v starších obdobách prehliadačov neboli plne podporované. Prehliadače ich zapracovávali nezávisle od seba a každý si mohol vyžadovať iný prefix. Dobrou ukážkou je “flexbox layout”. To je vymoženosť, ktorú ako front-end developer využívate pre zarovnávanie, usporiadanie elementov. Nie vždy to však takto bolo možné. Kým bol postupne “flexbox layout” 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ť 2 spôsobmi. Buď váš výsledný CSS kód “preženiete” nejakým autoprefixer-om online alebo takýto autoprefixer zapojíte do build procesu v gulp, webpack. V oboch prípadoch si nastavujete aj parameter, ktorý určuje, koľko úrovní dozadu chcete ošetriť. Za dlhé roky vývoja webových technológií sa nespočet funkcionalít podarilo plne implementovať, je teda nezmysel ošetrovať nekompatibilitu spred 10-tich rokov.

Predvolené štýly

Okrem iného si prehliadače aplikujú vlastné štýly na väčšinu základných prvkov. Odsadenia, veľkosti, typy písma, farby, zaoblenia rohov a podobné. Aby ste udržali jednotu vzhľadu a uistili sa, že všade bude platiť rovnaká sada pravidiel, najlepšie je načítať pred vašim CSS súborom takzvaný “CSS reset”. Existujú ľudia, ktorí si dali tú námahu skontrolovať, kde tieto rozdiely vznikajú a vám stačí len importovať 1 súbor. Veľmi známy je normalize.css, no pri hľadaní “css reset” v Google vám nájde viac relevantných výsledkov. Bootstrap, najpoužívanejší css framework, má okrem svojich štýlov už implementovaný aj takýto css reset.

Responzivita

Stále viac ľudí sa pripája do internetu cez mobilné zariadenia. CSS ako také je na toto pripravené a pre akúkoľvek variantu rozlíšenia, či už 320px × 500px alebo hoc aj 3840px × 2160px, viete zadať jej vlastné, exkluzívne štýly, ktoré ovplyvnia iba dané rozlíšenie. Možné je zamerať napríklad aj: iba šírku, iba výšku, iba telefóny v landscape režime. Viac o media queries tu.

Nie všetky funkcie, ktoré vidíme na počítačovej obrazovke je dobré zobrazovať na mobile. Smartfóny majú spravidla menší výkon, najmä keď užívateľ používa nejaký low-end alebo zastaralý model. Niektoré efekty, ako napríklad pohyblivé pozadia, je dobré nahradiť statickými, jednoduchšími. Určite je lepšie obetovať trocha z čarovného vizuálu, než prísť o klienta, ktorý zo stránky odíde, pretože je pocit z jej prehliadania nepríjemný, sekavý.

Tiež musíte počítať s tým, že ak sa človek pripojí cez mobilné dáta, rýchlosť  načítania stránky môže byť naozaj pomalá. Je preto dobré zachovať mobilnú verziu webu čo najmenej objemnú. Čo je možné docieliť práve vyhodením, resp. nepoužitím JavaScript funkcionalít či nahradením zdrojových ciest obrázkov za alternatívy s menším rozlíšením.

Animácie

Animácie je možné ošetrovať pomocou CSS aj JavaScriptu. Pre plynulý chod animácií je dobré animovať CSS vlastnosti, ktoré vie prehliadač podporiť hardvérovou akceleráciou. Stručná ukážka – miesto posunutia doprava pomocou left: 10px, margin-left: 10px alebo padding-left: 10px, je lepšie použiť transform: translateX(10px). Samozrejme okolo kvalitne vymakaných animácií je celá veda. Viac k efektívnym, hardvérovo akcelerovaným animáciam sa dočítate v našom ďalšom pripravovanom článku.