Designing websites using CSS preprocessors

Full text

(1)UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO RAČUNALNIŠTVO IN INFORMATIKO. DRAGO MIKLAUC. OBLIKOVANJE SPLETNIH STRANI Z UPORABO PREDPROCESORJEV CSS. DIPLOMSKO DELO. Maribor, avgust 2019.

(2) UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO RAČUNALNIŠTVO IN INFORMATIKO. DRAGO MIKLAUC. OBLIKOVANJE SPLETNIH STRANI Z UPORABO PREDPROCESORJEV CSS. DIPLOMSKO DELO. Maribor, avgust 2019.

(3) OBLIKOVANJE SPLETNIH STRANI Z UPORABO PREDPROCESORJEV CSS DIPLOMSKO DELO. Študent:. Drago Miklauc. Študijski program:. Univerzitetni študij Medijske komunikacije. Smer:. Vizualna komunikacija. Mentor:. doc. dr. Sašo Karakatič. i.

(4) ZAHVALA. Rad bi se zahvalil docentu dr. Sašo Karakatiču, za vso strokovno svetovanje, potrpežljivost, zelo hiter odziv na vsa vprašanja, ter predvsem spodbudo pri nastajanju diplomskega dela.. Zahvalil bi se tudi prijateljem in sošolcem ki so mi izboljšali ter polepšali dosedanja študijska leta.. Največja zahvala pa gre seveda celotni družini za vso podporo skozi vsa leta šolanja.. ii.

(5) OBLIKOVANJE SPLETNIH PREDPROCESORJEV CSS. STRANI. Z. UPORABO. Ključne besede: CSS, CSS predprocesor, LESS, SASS, Stylus, spletna stran, oblikovanje. UDK: 004.774.6:004.4'427(043.2). Povzetek:. V diplomski nalogi je predstavljeno oblikovanje spletnih strani z različnimi CSS predprocesorji. Vključeni so CSS predprocesorji SASS (SCSS), LESS, Stylus ter tudi sam CSS3. V začetku naloge je opisana zgodovina nastanka spletnih strani. Opisane so tudi vse komponente, ki so potrebne za izdelavo in oblikovanje spletnih strani, torej predvsem HTML, CSS in JavaScript. V nadaljevanju je poudarek predvsem na razlikah in podobnostih med CSS predprocesorji. Na koncu naloge pa je primerjava le-teh izvedena skozi praktični del, ki ga sestavljajo štiri spletne strani. Ugotovljeno je bilo, da se kljub močnim podobnostim CSS predprocesorji med seboj kar v nekaj primerih zelo razlikujejo.. iii.

(6) DESIGNING WEBSITES USING CSS PREPROCESSORS. Key words: CSS, CSS preprocessor, LESS, SASS, Stylus, web site, design. UDK: 004.774.6:004.4'427(043.2). Abstract:. The thesis presents the designing of web pages with usage of different CSS preprocessors. It includes CSS preprocessors SASS (SCSS), LESS, Stylus and CSS3 itself is also included. Thesis begins with the history of web design, followed by description of all components that are required to create a web page design, like HTML, CSS and JavaScript. In the next chapters thesis concentrates on differences and similarities of CSS preprocessors. In the end, there is comparison of them trough practical part of thesis which includes four web pages. It has been found that CSS preprocessors may look very much alike, but are really different from one another.. iv.

(7) KAZALO VSEBINE 1. 2. UVOD ................................................................................................................... 1 1.1. Predstavitev ciljev ................................................................................................... 1. 1.2. Predstavitev hipotez ................................................................................................ 2. 1.3. Predstavitev uporabljenih metod ............................................................................. 2. TEORETIČNI DEL .................................................................................................... 3 2.1. Nastanek spletnih strani .......................................................................................... 3. 2.2. Razvoj oblikovanja spletnih strani skozi leta ............................................................. 4. 2.3. HTML ...................................................................................................................... 6. 2.4. HTML 5.................................................................................................................... 8. 2.5. JAVASCRIPT ........................................................................................................... 11. 2.6. CSS ........................................................................................................................ 13. 2.7. CSS 3 ..................................................................................................................... 14. 2.8. CSS PREDPROCESORJI ............................................................................................ 16. 2.8.1. SASS ............................................................................................................................ 17. 2.8.2. STYLUS ........................................................................................................................ 18. 2.8.3. LESS............................................................................................................................. 19. 2.9. 3. 4. GULP ..................................................................................................................... 20. PRIMERJAVA CSS PREDPROCESORJEV.................................................................. 21 3.1. FUNKCIONALNOSTI ................................................................................................ 21. 3.1. PODPORA V BRSKALNIKIH...................................................................................... 22. 3.2. TEŽAVNOSTI UPORABE .......................................................................................... 22. 3.3. PRILJUBLJENOST .................................................................................................... 23. PRAKTIČEN PRIMER ............................................................................................ 25 4.1. Izgled spletne strani ............................................................................................... 25. 4.2. Vse datoteke spletnih strani .................................................................................. 27. 4.3. Sintaksa ................................................................................................................ 28. 4.4. Spremenljivke in njihova uporaba .......................................................................... 29. 4.5. Razredi Mixin ........................................................................................................ 30. 4.6. Pogojni stavki ter zanke ......................................................................................... 31. 4.7. Generiranje naključnih številk in barv..................................................................... 33. v.

(8) 4.8. Gnezdenje selektorjev ........................................................................................... 33. 4.9. Uvoz datotek ......................................................................................................... 33. 5. ZAKLJUČEK .......................................................................................................... 35. 6. VIRI IN LITERATURA ............................................................................................ 37. vi.

(9) KAZALO SLIK. Slika 2.1 Barnersov koncept .................................................................................................. 3 Slika 2.2 Primer tabele ........................................................................................................... 5 Slika 2.3 Sintaksa HTML ......................................................................................................... 7 Slika 2.4 Primer Javascript ................................................................................................... 12 Slika 2.5 Primerjava strani z in brez uporabe CSS ............................................................... 13 Slika 2.6 Tekstovne sence .................................................................................................... 14 Slika 2.7 CSS3 Selektorji ....................................................................................................... 15 Slika 2.8 CSS primeri barv .................................................................................................... 15 Slika 2.9 SASS sintaksa ......................................................................................................... 17 Slika 2.10 Stylus sintaksa ..................................................................................................... 18 Slika 2.11 LESS sintaksa ....................................................................................................... 19 Slika 3.1 Priljubljenost CSS predprocesorjev ....................................................................... 23 Slika 3.2 Priljubljenost SASS in LESS med letoma 2016 in 2019 .......................................... 24 Slika 4.1 Vrhnji del spletne strani ........................................................................................ 25 Slika 4.2 Osrednji del, najnovejša novica............................................................................. 26 Slika 4.3 Osrednji del, aktualne novice ................................................................................ 26 Slika 4.4 Noga spletne strani ............................................................................................... 26 Slika 4.5 Datoteke spletnih strani ........................................................................................ 27 Slika 4.6 Sintaksa ................................................................................................................. 28 Slika 4.7 Spremenljivke ........................................................................................................ 29 Slika 4.8 Uporaba Calc ......................................................................................................... 30 Slika 4.9 Razredi Mixin ......................................................................................................... 31 Slika 4.10 Pogojni stavek if .................................................................................................. 32 Slika 4.11 Uporaba import ................................................................................................... 34. vii.

(10) 1 UVOD Od prvih začetkov oblikovanja spletnih strani vse do danes so se oblike in kompleksnost spletnih strani močno spreminjale. Na začetku so bile spletne strani statične in čisto preproste. Skozi leta so postajale vedno bolj uporabnikom prijazne, vključenih je bilo vedno več funkcionalnosti, s katerimi lahko uporabnik na spletnih straneh deluje ne samo kot bralec vsebine, ampak tudi kot kreator le-te. Danes so spletne strani že zelo kompleksne in funkcionalne. Večina pomembnih spletnih strani je prešla iz statičnih spletnih strani na dinamične. Dinamične spletne strani so tiste, na katerih lahko uporabnik sam dodaja slike, video posnetke vsebine pa tudi komentira. K temu je pripomogel razvoj raznih jezikov tako za oblikovanje kot tudi programiranje spletnih strani.. Pri oblikovanju izgleda spletnih strani pa je zadnjih nekaj let veliko govora o uporabi CSS predprocesorjev. CSS Predprocesor je program ki s svojo unikatno sintakso nadgradi CSS. Za razliko od enostavnih spletnih strani je kompleksne, bolj napredne strani, zelo težko oblikovati samo z uporabo CSS ukazov. CSS predprocesorji dodajo globino temu, kar bi se dalo narediti s CSS. Funkcionalnosti, ki jih predprocesorji prinesejo z IF/ELSE stavki ter zankami, pripomorejo k večji moči spletne strani.. Danes imamo na voljo že kar nekaj CSS predprocesorjev. Veliko programerjev se zato zelo težko odloči, katerega uporabiti, saj se kljub veliko podobnostmi CSS predprocesorji po uporabnosti zelo razlikujejo.. 1.1. Predstavitev ciljev. Cilj te diplomske naloge je ugotoviti, kako pomembna je uporaba CSS predprocesorjev v sodobnem oblikovanju spletnih strani, katere so temeljne razlike in podobnosti med pri uporabnikih najbolj priljubljenimi CSS predprocesorji ter njihova primerjava s CSS tretje verzije. 1.

(11) 1.2. Predstavitev hipotez. V diplomski nalogi sta bili raziskani naslednji hipotezi:. Hipoteza 1: CSS predprocesorji so nepogrešljiv del oblikovanja sodobnih spletnih strani. Hipoteza 2: CSS predprocesorji se kljub navidezni podobnosti med seboj kar razlikujejo.. 1.3. Predstavitev uporabljenih metod. Pisanje se je pričelo po skrbnem izboru primerne literature, ki je potrebna za razumevanje celotnega oblikovanja spletnih strani. Sledil je izbor treh predprocesorjev, ki se primerjajo skozi celotno diplomsko delo. Izbrani so bili SASS (SCSS), LESS ter Stylus; temu je bila prilagojena tudi kasnejša literatura in viri. Hipoteze so bile najprej obravnavane teoretično s pomočjo literature, kasneje pa tudi skozi praktični del. Pridobljene ugotovitve so zapisane v zaključku diplomskega dela.. 2.

(12) 2 TEORETIČNI DEL 2.1. Nastanek spletnih strani. Razvoj in oblikovanje spletnih strani se je začelo v poznih 80. letih prejšnjega stoletja. Glavno vlogo pri tem je imel Sir Tim Berners-Lee. Berners-Lee je angleški računalniški znanstvenik. Rojen je bil staršema, ki sta tudi sama bila računalniška znanstvenika in sta sodelovala pri razvoju prvih računalnikov. Tim je opazil, da se je s takratno tehnologijo zelo težko sporazumevati in deliti informacije. Glede na to, da je bilo tisti čas preko interneta povezanih že veliko računalnikov, je videl možnost oz. rešitev, da bi se informacije lahko delile preko nastajajoče tehnologije imenovane Hypertext. Leta 1989 je predstavil svojo vizijo o tem, kako bi lahko izgledal splet. Sprva njegovi predlogi niso bili sprejeti. Kljub temu je vztrajal in septembra naslednjega leta po odobritvi vodilnih, začel delati na svoji ideji. Uporabljal je enega izmed prvih računalnikov Steva Jobsa, imenovanega NeXT [1].. Slika 2.1 Barnersov koncept Vir: http://msuconman.pbworks.com/w/page/25660697/. 3.

(13) Do oktobra 1990 je spisal tri temelje tehnologij, na katerih še dandanes sloni splet [1].. -. HTML: HyperText Markup Language; oblikovalni jezik za ustvarjanje spleta.. -. URI: Uniform Resource Identifier; naslov, ki je edinstven in se uporablja za identifikacijo vsakega spletnega vira na spletu, lahko ga imenujemo tudi URL.. -. HTTP: Hypertext Transfer Protocol; omogoča nalaganje povezanih spletnih virov.. Tim Berners-Lee je med drugimi spisal tudi prvi urejevalnik/brskalnik spletnih strani, imenovan WorldWideWeb.app, kot tudi prvi spletni strežnik httpd. Proti koncu devetdesetih je bila ustvarjena prva spletna stran za odprti internet. Leto kasneje pa so bili k novi spletni skupnosti povabljeni tudi ljudje izven CERN [1].. Ko se je splet začel zelo hitro širiti, so Berners-Lee in njegovi sodelavci uvideli, da se pravi potencial spleta lahko realizira zgolj, če bi do njega imeli možnost dostopati vsi, brez plačila in ne da bi morali prositi za dovoljenje. Ravno to pa jim je uspelo leta 1993, ko je CERN sprejel odločitev, da bo osnovna koda na voljo brezplačno. S tem so sprožili val kreativnosti in inovacij, ki smo jim priča še danes [1].. 2.2. Razvoj oblikovanja spletnih strani skozi leta. Začetek spletnega oblikovanja je bil precej temen, saj so bili zasloni povsem črni, poživelo pa jih je le nekaj monokromatskih pikslov. Oblikovanje je bilo predvsem na osnovi simbolov in tabulacije [2]. To je bilo predvsem zato, ker takrat ni bilo visoke hitrosti pri internetnih povezavah, in temu primeren je moral biti izgled spletne strani [3].. Rojstvo brskalnikov, ki bi lahko prikazovali slike, je bil prvi korak v spletno oblikovanje, kot ga poznamo danes. Leta 1995 je bila najbližja opcija za strukturiranje informacij koncept tabel, ki pa je že obstajal v HTML. Začelo se je mešanje statičnih celic s fluidnimi 4.

(14) celicami. Čeprav to ni bil najbolj pameten način, saj so tabele v glavnem namenjene strukturiranju številk, je bil uporabljen za večino strani tistega časa [2].. Naslednji problem, s katerim so se srečevali oblikovalci, je bila težava vzdrževanja ter krhkih struktur. Oblikovalci so naredili izjemne postavitve, vendar je bilo potem vse na razvijalcih, da so te postavitve razbili na majhne delce ter iz njih poskušali narediti čim več, kar se je dalo [2].. Po drugi strani so imele tabele kar nekaj zelo dobrih funkcij. Imele so možnost poravnavanja stvari vertikalno, lahko pa so bile tudi določene v pikih ali odstotkih. Največja korist tega pa je bilo to za tisti čas najbližje mreži [2].. Slika 2.2 Primer tabele Vir: http://getwebdesignidea.blogspot.com/2016/05/simple-history-of-web-designget-web.html. Veliko stvari je kasneje lahko rešil JavaSript. Bil je odgovor na omejitve HTML. Na primer, če je bilo treba narediti pojavno okno ali dinamično spremeniti vrstni red nečesa, so se oblikovalci in razvijalci obrnili k Javascriptu [2].. Omejitve obstoječega spletnega oblikovanja je prekinila nova tehnologija, ki je obljubljala svobodo, kot je še ni bilo nikoli prej. Oblikovalec je lahko s to tehnologijo 5.

(15) oblikoval vse oblike, postavitve, animacije ter uporabil katerokoli pisavo. Gre za orodje Flash [2].. Tri leta kasneje pa se je pojavil CSS. CSS je bil s tehničnega vidika veliko boljši od Flasha glede strukturiranega oblikovanja. Temeljni koncept na katerem je deloval CSS, je ločevanje vsebine od predstavitve [2].. Leto 2007 velja za leto, ko se je veliko oblikovalcev in razvijalcev začelo srečevati s problemi dostopanja do spletnih strani prek mobilnih telefonov. Največji problem je bila postavitev strani za različne velikosti zaslonov mobilnih naprav. Prvi korak k rešitvi je bila razdelitev dvanajstih stolpcev. To so nato oblikovalci začeli uporabljali vedno pogosteje [2]. Naslednji korak je bil standardiziranje najbolj pogosto uporabljenih elementov, kot so navigacija, obrazci ter gumbi.. Tri leta kasneje je Ethan Narcitte spodbil obstoječi pristop, tako da je predlagal uporabo iste vsebine, vendar z drugačno postavitvijo. S tem je ustvaril izraz »Responsive web design« [2].. 2.3. HTML. HTML je računalniški jezik, oblikovan za ustvarjanje spletnih mest [4]. Spletne strani ustvarjene s HTML si lahko ogleda kdorkoli, ki je povezan z internetom. Jezik je dokaj lahek za učenje, je na voljo vsem ter je zelo močan za ustvarjanje spletnih strani. Skozi leta se je HTML nenehno razvijal, da bi ustregel zahtevam naraščajočega internetnega občinstva, in sicer pod nadzorom W3C organizacije, ki je zadolžena za oblikovanje in vzdrževanje jezika [4].. Vse od začetka do leta 1999 je HTML zamenjal štiri verzije. Leta 2004 je organizacija W3C začela opuščati HTML z namenom ustvarjanja XHTML. XHTML bi imel predvsem 6.

(16) bolj striktno in dobro oblikovano kodo. Zato je bila istega leta ustanovljena skupina WHATWG, ki je želela naprej razvijati HTML. S kasnejšimi uspehi so pridobili tudi podporo W3C. A z leti so se mišljenja teh dveh organizacij začela oddaljevati. V letu 2012 pa so se tudi dokončno razšli [6]. HyperText je metoda, s katero se uporabnik pomika po spletu. S klikom na posebna besedila, imenovana hiperpovezave, jih le-ta pripeljejo na naslednjo stran. To omogoča dostop do vseh mest na internetu samo z klikom na povezavo. HTML uvrščamo med jezike, saj ima ključne besede in sintakso kot kateri koli drug jezik [4].. Slika 2.3 Sintaksa HTML. Vir: http://www.natickhighwebdesign.com/anderson/fall2017.html. 7.

(17) 2.4. HTML 5. HTML 5 je najnovejša različica računalniškega jezika imenovanega HyperText Markup Language (HTML). Z drugimi besedami je to koda, ki opisuje spletne strani. HTML5 se običajno uporablja skupaj s CSS, ki poskrbi za predstavitev, ter Javascriptom, ki spletnim stranem prinese dodatne funkcionalnosti [5].. HTML 5 je bil zasnovan tako, da omogoča skoraj vse, kar bi si želeli storiti na spletu, ne da bi pri tem potrebovali dodatno programsko opremo, kot so na primer vtičniki brskalnika. Omogoča vse, od animacij, do glasbe in filmov. Poleg tega omogoča izdelavo izjemno zapletenih aplikacij, ki se izvajajo v brskalniku. Glavna prednost HTML5 je, da ni zaščiten, kar pomeni, da za uporabo ni treba kupiti licence. Smatra se kot navzkrižna platforma, zaradi česar je čisto vseeno, ali se uporablja za tablični računalnik, prenosni računalnik, pametni telefon itd [5]. Najpomembnejši novi HTML5 elementi so: -. novi semantični elementi: <header>, <section>, <article> in <footer>. -. novi atributi elementov obrazca: date, number, range, time in calendar. -. novi grafični elementi: <svg> in <canvas>. -. novi multimedijski elementi: <audio> in <video>. Z novo različico HTML pa so bili nekateri elementi izbrisani. Mednje spadajo naslednji: <acronym>,. <applet>,. <basefont>,. <big,. <center>,. <dir>,. <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>.. Na prvi sliki je vizualno prikazano, kaj naj bi predstavljali novi semantični elementi in kako jih je najbolje logično razporediti pri oblikovanju spletne strani. Druga slika pa prikazuje, kako v osnovi izgledajo vsi atributi elementov obrazca narejenega s HTML5 [7]. 8.

(18) Slika 4 Semantični ukazi HTML5 Vir: https://www.w3schools.com/htmL/html5_semantic_elements.asp. Slika 5 Elementi obrazca HTML5 Vir: http://www.zeldman.com/2010/11/25/finally-cross-browser-visual-control-overforms/ 9.

(19) Z uporabo HTML5 se posnetki na spletnih straneh izvajajo nemoteno in gladko. Ključno je predvsem to, da omogoča integracijo zvoka ter video posnetkov v brskalniku, ne da bi pri tem uporabnik potreboval zunanje vtičnike. Uporabnik s tem doživi boljšo izkušnjo brskanja po spletu brez kakšnih zamud [10].. Velika prednost je tudi lokalno shranjevanje. Bolj napredni brskalniki si po koncu našega brskanja ali med osvežitvijo strani zapomnijo, kaj smo tipkali pred tem. Kljub temu da večina brskalnikov že podpira lokalno shranjevanje, lahko med njimi najdemo tiste brskalnike, ki tega ne podpirajo. Isto velja tudi za starejše verzije brskalnikov, katerih novejše verzije to že podpirajo [8]. Največji problem na splošno z novimi HTML5 elementi pa ima brskalnik Internet Explorer. Vse različice Internet Explorerja pred različico 9 potrebujejo HTML5shiv [9].. Po vsem zgoraj navedenem se lahko sklepa, da je HTML5 najbolje pripravljeno orodje za prihodnost. Predvsem ker se spletna mesta vedno pogosteje obiskujejo s pomočjo mobilnih telefonov [10].. Spodnja slika prikazuje brskalnike, njihove verzije ter njihovo podporo lokalnemu shranjevanju.. Slika 6 Podpora lokalnega shranjevanja brskalnikov Vir: https://sites.google.com/site/azswiki/html5-localstorage?source=post. 10.

(20) 2.5. JAVASCRIPT. JavaScript je poleg HTML in CSS tretje, a nič manj pomembno orodje za oblikovanje spletnih strani. Je eden izmed najbolj priljubljenih objektno usmerjenih skriptnih jezikov. Z njim spletne strani postanejo interaktivne. To so spletne strani, ki naredijo nekaj več, kot da čakajo in prikazuje statične podatke, ki jih uporabnik samo gleda. Vsebujejo kompleksne gumbe, animacije, pojavne menije itd [11].. Razvijalci uporabljajo JavaScript pri osnovnih, preprostih nalogah kot tudi spletnih straneh, ki delujejo kot namizne programske aplikacije [12].. JavaScript koda je večinoma odprta za vpogled. Skripte, ki so vneseni na HTML stran, lahko vidijo in kopirajo drugi. Za razvijalce je to lahko tudi prednost, saj se lahko napredne JavaScript kode učijo oz. jih preučujejo iz drugih spletnih strani [13].. Primeren je za tiste razvijalce, ki radi pišejo kodo na svoj način, saj je eden izmed bolj prilagodljivih jezikov. Vendar ravno zaradi tega nekateri menijo, da je nedefiniranost jezika in ne čista koda slabost jezika. Mnenja se med razvijalci glede tega problema delijo [14].. Kljub temu da ima JavaScript podobno ime kot programski jezik Java, se od njega bistveno razlikuje. Java spada med programske jezike OOP, to so jeziki ki služijo objektno usmerjenem programiranju. Medtem ko je JavaScript skriptni jezik OOP. Oba jezika zahtevata čisto drugačne vtičnike [12].. Na spodnji sliki je prikazano, kako zgleda zelo enostavna JavaScript koda, implementirana v HTML spletno stran.. 11.

(21) Slika 2.4 Primer Javascript Vir: https://netbeans.org/kb/73/ide/javascript-editor.html. Če upoštevamo, kako se je »otroški« jezik razvil v zelo močno orodje za izdelavo spletnih strani, ki se ga poslužuje zelo veliko programerjev in razvijalcev, lahko trdimo, da ima JavaScript pred seboj lepo prihodnost. JavaScript ima tudi zelo močno skupnost razvijalcev, ki vsakodnevno preizkušajo in testirajo nove stvari. Trenutno ga uporablja in podpira veliko število tehnoloških in ne tehnoloških podjetij.. 12.

(22) 2.6. CSS. Cascading Style Sheets je zelo pomemben jezik za oblikovanje spletnih strani, saj vsebuje slogovne liste. Ti listi se uporabljajo za vizualni izgled in oblikovanje HTML. Poleg HTML je CSS eden izmed lažjih jezikov za učenje. Na spletu lahko najdemo veliko navodil, kako se naučiti oblikovati s pomočjo CSS. Najbolj priljubljena stran za to je W3Schools [15].. Na spodnji sliki je mogoče videti, kako izgleda stran YouTube z in brez CSS. Leva stran ima popoln CSS. Na desni sliki pa je ista stran prikazana brez CSS datoteke.. Slika 2.5 Primerjava strani z in brez uporabe CSS Vir: https://html.com/wp-content/uploads/css-on-off.jpg. 13.

(23) 2.7. CSS 3. Ko so razvijalci uvideli, da CSS2.1 ne ustreza več njihovim potrebam, se je kmalu razvil CSS3, ki je najnovejša različica Cascading Style Sheets. Prinaša več kot 50 novih funkcionalnosti. Mednje lahko štejemo sence, animacije, nove postavitve itd. Več o novih funkcionalnostih bo predstavljeno v nadaljevanju. Poleg vseh novosti pa je CSS3 obdržal skoraj vse funkcije, ki jih je imela njegova predhodna različica CSS2 [16]. Kot že omenjeno, je jezik enostaven za razumevanje, k temu pa je pripomoglo tudi ločevanje standardov v ločene module. Za razvijanje CSS3 skrbi W3C [17]. Med največje novosti, ki jih je prinesla nova verzija, lahko štejemo:. -. večje število slik ozadja,. -. obrobljeni robovi,. -. tekstovne sence,. -. CSS3 barve,. -. radialni gradienti,. -. CSS3 selektorji.. Na naslednjih slikah je prikazanih nekaj od zgoraj omenjenih novosti, ki jih prinaša CSS3.. Slika 2.6 Tekstovne sence Vir: https://freefrontend.com/css-text-shadow-effects/ 14.

(24) Slika 2.7 CSS3 Selektorji Vir: https://www.w3schools.com/cssref/css_selectors.asp. Slika 2.8 Primer CSS barv Vir: https://www.pinterest.com/pin/668292032174890186/?lp=true. 15.

(25) 2.8. CSS PREDPROCESORJI. Kljub temu da je mogoče s CSS3 narediti veliko stvari, to za bolj napredne spletne strani ter zapletene projekte ni dovolj. Ravno iz tega razloga so bili ustvarjeni CSS predprocesorji (angl. CSS preprocessors). Predprocesorji imajo vgrajene funkcije, ki razvijalcu spletne strani pomagajo pri pisanju kode za večkratno uporabo ter mu povečajo produktivnost. Predprocesorji, kot so SASS, LESS in Stylus, s spremenljivkami, interpolacijami, funkcijami itd. bistveno razširijo CSS [18].. CSS predprocesorji temeljijo predvsem na tem, da razvijalcu kode, ki jo želi uporabiti večkrat, ni treba pisati vedno znova. To jim zelo olajša delo, kot tudi prihrani veliko časa. Ker iste kode ni treba pisati večkrat, je napisana koda veliko bolje organizirana pri uporabi predprocesorjev kot samem CSS. Tudi pri kasnejših spremembah kode, je le-to treba spremeniti le enkrat. Pri uporabi velikih stilnih listov vam jih predprocesorji pomagajo vzdrževati, tako da jih lahko razvijalec uporabi, kadarkoli je to potrebno [19].. Za enkrat CSS predprocesorji še nimajo neposredne podpore brskalnikov, zato jih je potrebno pretvoriti v standardni CSS. Kljub temu se vedno več oblikovalcev spletnih strani dan danes odloči za uporabo enega izmed njih [19].. CSS predprocesorjev je danes na trgu že kar veliko, vendar pa se programerji večinoma odločijo za uporabo enega izmed treh najbolj priljubljenih. Med te CSS predprocesorje spadajo SASS, LESS in Stylus. Vsi trije imajo bolj ali manj podobne lastnosti, podrobneje pa bodo predstavljeni v naslednjih poglavjih.. 16.

(26) 2.8.1. SASS. SASS je razširitev CSS. Osnovnemu jeziku doda potrebno eleganco in moč za izdelavo naprednih spletnih strani z dobrim izgledom. SASS uporablja knjižnico, ki deluje v stilu kompasa. Z njim ostanejo veliki stilni listi zelo dobro organizirani ne glede na velikost. Manjše stilne liste pa poganja zelo hitro [20].. Uradna spletna stran SASS CSS predprocesorja: https://sass-lang.com/. SASS je zasnoval Hampton Catlin, nato pa ga je od leta 2006 naprej razvijala Natalie Weizenbaum [22]. SASS ima pri pisanju kode na voljo kar dve različni sintaksi. Prva sintaksa služi kot razširitev CSS. To je sintaksa Sassy CSS, oziroma skrajšano SCSS. Druga sintaksa imenovana SASS pa zagotavlja bolj jedrnat način pisanja kode. Ta sintaksa je starejša od SCSS. Predprocesor SASS je popularen tudi zato, ker se lahko uporablja kot samostojen Ruby modul, kot vtičnik za katerikoli okvir ali kot orodje za ukazno vrstico. [20] Ko se pojavi želja po dobri odzivnosti spletne strani, je integriranje medijskih poizvedb v SASS veliko bolj integrirano kot pri samem CSS. Njegov pristop k odzivnim mejnim vrednostim je tudi čistejši, kot ga ima Bootstrap [21].. Slika 2.9 SASS sintaksa Vir: https://sass-lang.com/documentation/syntax 17.

(27) 2.8.2. STYLUS. Stylus je dinamičen jezik za obdelavo stilnih listov CSS. Ustvarjen je bil s pomočjo ustvarjalca jezika Luna, TJ Holowaychuka. Na razvoj Stylusa sta vplivala predvsem SASS in LESS. Prvič se je pojavil leta 2010 [24].. Uradna spletna stran Stylus CSS predprocesorja: http://stylus-lang.com/. Za razliko od ostalih že dobro uveljavljenih CSS predprocesorjev, je Stylus precej nov. Stylus je narejen v Node.js, spisan pa je z JavaScriptom in ima JavaScript API, kar je za nekatere razvijalce velik plus [23]. Sintaksa Stylus je izjemno dopustna. To je lahko tako dobra kot slaba stvar, vse je odvisno od tega, za kakšen projekt se Stylus uporablja. Odvisno je tudi od tega, ali se v skupini več razvijalcev uporablja zelo stroge smernice pisanja kode ali ne [23]. Stylus ne uporablja oklepajev in podpičij, spremenljivke in razredi Mixin pa ravno tako ne potrebujejo predznaka. Te njegove lastnosti oblikovalcu omogočajo večjo svobodo, a hkrati povečajo možnost morebitnih napak pri pisanju kode.. Slika 2.10 Stylus sintaksa Vir: http://stylus-lang.com/docs/css-style.html 18.

(28) 2.8.3. LESS. Leaner Style Sheets oz. LESS je obratno združljiva jezikovna razširitev za CSS. Jezik je oblikoval Alexis Sellier, razvijal pa ga je tudi Dmitry Fadeyev. Prvič se je pojavil leta 2009. Prvotno je bil spisan v programskem jeziku Ruby, kasneje pa je Ruby zaradi zastarele verzije zamenjal JavaScript [25].. Uradna spletna stran LESS CSS predprocesorja: http://lesscss.org/. LESS ima zelo podoben izgled stilnemu jeziku CSS, kar pomeni, da učenje jezika ni velik napor. CSS jeziku doda le nekaj dodatkov. Sintaksa LESS je bila kasneje tudi zelo vplivna pri oblikovanju SCSS sintakse jezika SASS [25].. Njegova sintaksa je ravno zaradi tega zelo podobna sintaksi SCSS. Sintaksi se razlikujeta predvsem pri uporabi različnih predznakov. LESS ima za razliko od nekaterih drugih CSS predprocesorjev dokaj stroga pravila pri pisanju kode. Njegova največja prednost pred konkurenco pa je širok izbor barv in mešanje le teh.. Slika 2.11 LESS sintaksa Vir: http://lesscss.org/ 19.

(29) 2.9. GULP. Problem, ki nastane pri uporabi predprocesorjev, je ta, da brskalniki sami po sebi ne podpirajo jezikov, kot so LESS Stylus ali SCSS. Le-te je treba pretvoriti v standardni jezik CSS. Tukaj pridejo do izraza sistemi za pretvorbo, eden izmed teh je Gulp. Gulp ni edini, je pa eden izmed bolj priljubljenih sistemov za to pretvorbo. Temelji na jeziku Javascript, uvrščamo pa ga med odprtokodne sisteme. Pretvorba kode v CSS pa je zgolj ena izmed veliko možnosti, ki jih ponuja sistem Gulp [29]. Z Gulpom se lahko:. -. nestandardni jeziki pretvarjajo v standardne,. -. optimizira, testira ter zmanjša koda,. -. združujejo datoteke,. -. zmanjšajo in prilagodijo slike,. -. iščejo napake,. -. osveži brskalnik,. -. ustvarijo HTML predloge. -. in še mnogo več.. Torej Gulp omogoča avtomatiziranje teh nalog. Potrebna je le enkratna namestitev in nastavitev ukazov. Z njim si razvijalec prihrani veliko časa, njegov razvoj dela pa je veliko bolj organiziran. Je zelo priporočljivo orodje za vsakega oblikovalca ali razvijalca spletnih strani.. Gulp pa je le eden izmed mnogih sistemov, med njegove alternative lahko prištevamo Webpack, Grunt, Brunch, Feri, Lineman in še vrsto drugih [29].. 20.

(30) 3 PRIMERJAVA CSS PREDPROCESORJEV 3.1. FUNKCIONALNOSTI. CSS predprocesorji so si, kot je bilo povedano že v prejšnjih poglavjih, zelo podobni. Vendar se kljub vsemu po funkcionalnostih med seboj razlikujejo. [18]. Spremenljivke se v vseh predprocesorjih razlikujejo med seboj. Spremenljivka pri SASS se začne z znakom $, pri LESS se začne z znakom @, Stylus pa pri definiranju spremenljivke nima nobenega znaka[18]. Tudi CSS lahko uporablja spremenljivke, le te pa se začnejo z znakoma --.. Gnezdenje povečuje vizualno hierarhijo in povečuje berljivost. SASS in LESS imata zelo podoben način gnezdenja, medtem ko Stylus ne uporablja znakov { in }[18].. Med drugimi SASS razširja vse primere razširjenih selektorjev, ki vključujejo njegov otroški (child) selektor in njegove podedovane lastnosti. Z LESS pa lahko izberete vse primere razširjenih selektorjev z dodanim atributom ALL. S tem lahko razširimo metodo ali pa samo glavni primerek [18].. Vsi trije predprocesorji imajo barvne funkcije. Čeprav te funkcije niso med pomembnejšimi, jih je za oblikovanje dobre spletne strani uporabno imeti. Z njimi se lahko osnovne barve osvetlijo ali nasičijo. Poleg tega pa imajo tudi možnost mešanja ene ali več različnih barv med seboj [18].. SASS in Stylus imata normalno podporo pri uporabi IF in Else pogojnih stavkov. LESS pa za uporabo pogojev potrebuje CSS Guard. Isto velja za uporabo zank. CSS Guard je poenostavil uporabo pogojnih stavkov in zank. Njegova uporaba pa je postala mogoča z LESS različico 1.5.0. [18].. 21.

(31) 3.1. PODPORA V BRSKALNIKIH. Vsaka koda spisana v kateremkoli od omenjenih treh CSS predprocesorjev se sestavi nazaj v standardni CSS. Pretvorba je pomembna predvsem zato, ker brskalniki zaenkrat še nimajo neposredne podpore. Za pretvorbo se lahko uporabi že v zgornjem delu tega dela omenjen Gulp.js.. 3.2. TEŽAVNOSTI UPORABE. Kljub temu da so CSS predprocesorji v primerjavi z drugimi programskimi jeziki dokaj enostavni za učenje, lahko pri učenju le-teh in njihovi uporabi naletimo na določene težave.. Težava, ki nastane pri učenju jezika, je njegova sintaksa.. Vsak izmed treh. predprocesorjev zajetih v tej diplomski nalogi ima svojo unikatno sintakso. Velik problem pri uporabi CSS predprocesorjev je tudi razhroščevanje. Čas kompilacije je zelo počasen, tudi ob uporabi najhitrejših tehnik. Primer tega je, da se ob osvežitvi strani še vedno nič ne spremeni. Kljub temu da so izvorne datoteke precej majhne, je generiran CSS velikokrat zelo velik. Ta pa je tudi tisto, kar na koncu šteje. Razvijalci so pri uporabi CSS predprocesorjev postavljeni pred pogoj, da morajo za uporabo predprocesorjev uporabljati točno določene urejevalnike. [27]. 22.

(32) 3.3. PRILJUBLJENOST. Pri razvijanju spletnih strani se razvijalci odločijo za uporabo različnih CSS predprocesorjev, nekateri pa jih sploh ne uporabljajo.. Po raziskavi, ki jo je opravil Chris Coyier leta 2012, v kateri je sodelovalo 13.000 razvijalcev, je 54 razvijalcev že uporabljalo CSS predprocesorje, 46 pa z njimi še ni imelo opravka. Med tistimi, ki so jih uporabljali, je bil najbolj popularen predprocesor LESS. Prejel je več kot polovico glasov. Takoj za njim pa je bil SASS. [24]. Slika 3.1 Priljubljenost CSS predprocesorjev. 23.

(33) Trenutno stanje pa je nekoliko drugačno. Danes je število uporabnikov CSS predprocesorjev drastično narastlo. Med vsemi predprocesorji največ ljudi uporablja SASS oz. SCSS, ki je najnovejša sintaksa SASS. Na drugo mesto je padel LESS, Stylus pa ostaja kot tretji najbolj priljubljen CSS predprocesor.. Slika 3.2 Priljubljenost SASS in LESS med letoma 2016 in 2019 Vir: https://blog.soshace.com/en/css/sass-vs-less-which-css-preprocessor-to-choosein-2019/. 24.

(34) 4 PRAKTIČEN PRIMER Praktični del diplomskega dela je sestavljen iz štirih spletnih strani. Spletne strani so na pogled skoraj identične, ločuje pa jih koda v ozadju. Vsaka spletna stran je bila narejena s pomočjo enega izmed predprocesorjev, LESS, SCSS ter Stylus. Za primerjavo pa je bila narejena tudi stran z uporabo samo osnovnega jezika CSS 3.. 4.1. Izgled spletne strani. Izgled spletne strani je narejen samo s HTML 5, CSS 3 oz. CSS predprocesorji. Sestavljajo ga naslov spletne strani, ta se zliva z navigacijskim menijem. Pod njim je iskalnik informacij, takoj za njim pa uvodna slika. V osrednjem delu se najprej pojavi najnovejša novica, sledijo pa ji novice, ki so bralcem najbolj zanimive. Stran se zaključi z nogo strani.. Slika 4.1 Vrhnji del spletne strani. 25.

(35) Slika 4.2 Osrednji del, najnovejša novica. Slika 4.3 Osrednji del, aktualne novice. Slika 4.4 Noga spletne strani. 26.

(36) 4.2. Vse datoteke spletnih strani. Vse strani so si zelo podobne tako po izgledu kot tudi po strukturi datotek, ki jih vsebujejo. Stran, ki je oblikovana zgolj s CSS 3 vsebuje bistveno manj datotek, ostale strani pa ločujejo le končnice, s katerimi se datoteke zaključijo. Pri vseh končnicah se datoteke zaključijo s piko, ki ji sledijo Styl, Scss in Less. Vse datoteke so lahko vidne na sledeči sliki.. Slika 4.5 Datoteke spletnih strani 27.

(37) 4.3. Sintaksa. Sintaksa vseh predprocesorjev je med seboj zelo podobna, podobna pa je tudi sintaksi osnovnega CSS 3. vendar jih med seboj ločuje nekaj razlik. Stylus je pri tem praktičnem primeru edini, pri katerem lahko oblikovalec spletne strani napiše kodo, ne da bi pri tem moral uporabljati zavite oklepaje { } in podpičja ; . V osnovi je to mogoče tudi pri SASS, a njegova različica SCSS nima te možnosti. Tudi pri LESS so tako oklepaji kot podpičja obvezni.. To se lahko v nekaterih primerih šteje kot prednost ali slabost. Brez oklepajev in podpičij je koda manj pregledna, a obenem manjša.. Slika 4.6 Sintaksa. 28.

(38) 4.4. Spremenljivke in njihova uporaba. Deklaracija spremenljivk je pri vseh treh predprocesorjih možna, a je sintaksa le-teh pri vseh drugačna. SCSS uporablja znak $, LESS @, Stylus pa ne potrebuje predznaka. CSS3 pa takšne deklaracije spremenljivk za nadaljnjo uporabo ne omogoča.. Slika 4.7 Spremenljivke. Posebnost spremenljivk je deklariranje privzetih spremenljivk. Le-te se nadomestijo z regularnimi, kadarkoli so te deklarirane. To velja za vse omenjene predprocesorje razen za LESS, ki tega ne omogoča. Kljub temu pa se pri spremenljivkah LESS kot edini lahko. 29.

(39) odkupi s tako imenovanim lenim pisanjem kode, kar pomeni, da se lahko spremenljivka deklarira tudi po tem, ko je že uporabljena. Uporaba spremenljivk kot del selektorja, neke lastnosti ali vrednosti je mogoča pri vseh predprocesorjih, a ne pri CSS. Podobno temu je pri vseh mogoča tudi uporaba spremenljivk v funkcijah Calc. Razlika se znova pokaže zgolj v njihovi sintaksi.. Slika 4.8 Uporaba Calc. Podobno je tudi s ponovno uporabo selektorjev, ki so nastavljeni v vrednosti. LESS pa znova izpade pri gnezdenju selektorjev, medtem ko ostala dva predprocesorja to omogočata.. 4.5. Razredi Mixin. Uporaba Mixin-ov oz. bolje rečeno razredov, ki vsebujejo metode, ki se lahko uporabijo v drugih razredih, je mogoča pri vseh treh predprocesorjih. Prav tako vsi trije podpirajo večino stvari, ki jih ti razredi ponujajo. Pod to se lahko šteje osnovno vključevanje Mixin razredov, sprejemajo lahko parametre, ki so vanje poslani, parametri so lahko poslani v kateremkoli vrstnem redu, saj se jim lahko določijo imena, prav tako pa ni potrebno določiti števila poslanih argumentov. 30.

(40) Slika 4.9 Razredi Mixin. 4.6. Pogojni stavki ter zanke. Uporaba if stavkov ter zank ima tako v programiranju kot tudi v oblikovanju spletnih strani zelo pomembno vlogo. Ravno zato sta to tudi dve stvari, ki jih CSS predprocesorji ponujajo, saj tega sam CSS v osnovi ne podpira. Medtem ko imata Stylus in SCSS zelo podoben način uporabe pogojnih stavkov ter zank, pa ima LESS zelo nenavadno sintakso in drugačen način uporabe. Ta razlika pride do izraza pri napredni uporabi if stavkov,. 31.

(41) primer tega sta uporaba interpolacije if stavkov znotraj imen lastnosti in interpolacija if stavkov znotraj selektorja.. Slika 4.10 Pogojni stavek if. 32.

(42) 4.7. Generiranje naključnih številk in barv. Večkrat med oblikovanjem spletnih strani pride tudi do potrebe po uporabi naključnih številk ali barv. Ker sam CSS3 na žalost tega še ne ponuja, pa to ponujajo njegovi predprocesorji. SASS oz. SCSS ima kot edini zelo enostavno sintakso, medtem ko ostala dva za uporabo naključnih barv ali številk potrebujeta dodatne funkcije. Pri vseh pa se lahko generirajo številke, ki jim je možno določiti tako zgornjo kot tudi spodnjo mejo vrednosti. Barvam pa se lahko naključno dodeli odtenek ali katera koli druga barvna komponenta.. 4.8. Gnezdenje selektorjev. CSS ne omogoča gnezdenja selektorjev, kar pomeni, da je treba vse selektorje in njihove kombinacije zapisati v svojo vrstico. Stran brez gnezdenja izgleda še vedno enako, vendar lahko pri takšnem pisanjem kode, pri večjem projektu, hitro nastane zmeda. Tu lahko oblikovalca znova rešijo LESS, SCSS in Stylus. Vsi omogočajo gnezdenje selektorjev. SCSS in LESS imata med seboj skoraj identično sintakso, medtem ko Stylus ne uporablja oklepajev.. 4.9. Uvoz datotek. Zelo pomembna prednost CSS predprocesorjev pa je tudi uvoz datotek. To oblikovalcu pride zelo prav pri velikem številu spisane kode, saj je le-to težko imeti pod nadzorom, kadar je shranjena v eni datoteki. Predprocesorji nam nudijo funkcijo import s katero lahko kodo razdelimo v več datotek, ki jih preko ukaza Import kasneje uvozimo v glavno datoteko.. 33.

(43) Slika 4.11 Uporaba import. 34.

(44) 5 ZAKLJUČEK V. začetku smo si postavili dve hipotezi: CSS predprocesorji so nepogrešljiv del. oblikovanja sodobnih spletnih strani ter CSS predprocesorji se kljub navidezni podobnosti med seboj kar razlikujejo.. Prvo hipotezo lahko skozi teoretični in praktični del zavrnemo. Še vedno je na spletu veliko dobrih spletnih strani, ki so narejene zgolj z CSS3. CSS3 je že sam po sebi sposoben narediti ogromno, oziroma večino stvari brez predprocesorjev. Vendar če želimo stran imeti narejeno, je za to kljub temu priporočljiva uporaba CSS predprocesorjev. Le-ti ne samo dodajo CSS3 detajle, ki jih sam ne vsebuje, ampak ga tudi dodobra razširijo. Razširijo pa ga z raznimi funkcionalnostmi. Poleg tega nam predprocesorji olajšajo pisanje kode in le-to poenostavijo, polepšajo in skrajšajo. To nam prihrani čas, reši pa nas tudi velike zmede, ki lahko nastane pri pisanju velikega števila vrstic kode. Tako da kljub temu da CSS predprocesorji pri oblikovanju spletnih strani niso nujno potrebni, so še kako priporočljivi. To nakazuje tudi to, da vedno več oblikovalcev prehaja na pisanje kode s pomočjo predprocesorjev. Lahko rečemo, da so po vsej verjetnosti prihodnost oblikovanja spletnih strani, trenutno pa je oblikovanje spletnih strani še vedno mogoče samo z CSS3.. Drugo hipotezo pa lahko skozi teoretični in praktični del v celoti potrdimo. Čeprav so si na prvi pogled CSS predprocesorji zelo podobni, v nekaterih primerih skoraj identični, jih med seboj ločuje kar nekaj stvari. Nekaterih izmed njih imajo zelo strogo sintakso, medtem ko drugi dopuščajo napake. Že najpomembnejše funkcionalnosti so si med seboj različne, oz. se v nekaterih primerih uporabljajo na različne načine. Medtem pa ima vsak izmed njih nekatere svojevrstne lastnosti, zaradi katerih se oblikovalci odločijo za uporabo ravno tistega CSS predprocesorja. Za bolj kompleksne spletne rešitve je dobro vedeti, kateri predprocesor ponuja katere stvari. Za preprostejše spletne strani pa se lahko uporabi katerikoli izmed njih.. 35.

(45) Skozi praktičen del diplomske naloge, je bilo mogoče kar dobro spoznati CSS predprocesorje. Osebne izkušnje z njimi so zelo pozitive. Ugotovili smo da nam lahko predprocesorji pridejo še kako prav, ko se lotimo kakšnega večjega projekta, ko se pri pisanju kode ne želimo ponavljati in ko želimo na spletni strani imeti še kakšne dodatne funkcionalnosti, ki jih CSS3 ne premore. Zato bi uporabo CSS predprocesorjev priporočili vsem oblikovalcem in programerjem spletnih strani, še posebej tistim ki se pri pisanju kode ne radi ponavljajo.. Ob zaključku diplomskega dela, bi izmed trojice uporabljenih CSS predprocesorjev izpostavili SASS oz. SCSS. Kot večini oblikovalcem je bilo tudi nam delo z njim najbolj pisano na kožo. Vsebuje skoraj vse kar nudijo ostali predprocesorji in temu dodaja še svoje unikatne lastnosti. Njegova sintaksa je enostavna in zelo podobna CSS3. Tako da učenje SASS ne vzame veliko časa.. 36.

(46) 6 VIRI IN LITERATURA. [1] Foundation, W. W. (2008-2019). History of the Web-World Wide Web Foundation. Pridobljeno. iz. History. of. the. Web:. https://webfoundation.org/about/vision/history-of-the-web/ [1.7.2019]. [2] FROONT. (2014). A brief story of web design for designers, Explained with animations. Pridobljeno. iz. A. brief. story. of. web. design. for. designers:. http://blog.froont.com/brief-history-of-web-design-for-designers/ [1.7.2019]. [3] Kelly, M. (2018). A Look Back at 20+ Years of Website Design. Pridobljeno iz A Look Back. at. 20+. Years. of. Website. Design:. https://blog.hubspot.com/marketing/look-back-20-years-website-design [1.7.2019]. [4] Shannon, R. (2000-2019). What is HTML?, Hyper Text Markup Language explained. Pridobljeno iz What is HTML?: https://www.yourhtmlsource.com/starthere/whatishtml.html [5.7.2019]. [5] Marshall, C. (2017). HTML5: what is it?, TechRadar. Pridobljeno iz HTML5: what is it?: https://www.techradar.com/news/internet/web/html5-what-is-it-1047393 [5.7.2019]. [6] Data, R. (1999-2019 ). HTML5 Introduction. Pridobljeno iz HTML5 Introduction: https://www.w3schools.com/html/html5_intro.asp [5.7.2019]. [7] Gray, D. (2015). Slide Player. Pridobljeno iz HTML5 Fundamentals By RaedRASHEED : https://slideplayer.com/slide/4334743/ [5.7.2019]. [8] Way, J. (2011). 28 HTML5 Features, Tips, and Techniques you Must Know. Pridobljeno iz. 28. HTML5. Features,. Tips,. and. Techniques. you. Must. Know:. https://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniquesyou-must-know--net-13520 [13.7.2019]. [9] Data, R. (1999-2019 ). HTML5 Browser Support. Pridobljeno iz HTML5 Browser Support: https://www.w3schools.com/html/html5_browsers.asp [17.7.2019].. 37.

(47) [10] Robinson, D. (2016). Reasons Why HTML5 Is The Future- Top Notch Dezigns. Pridobljeno. iz. Reasons. Why. HTML5. Is. The. Future:. https://www.topnotchdezigns.com/reasons-html5-future/ [17.7.2019]. [11] Mills, C. D. (2005-2019). What is JavaScript? , Learn web development, MDN. Pridobljeno. iz. What. is. JavaScript?:. https://developer.mozilla.org/en-. US/docs/Learn/JavaScript/First_steps/What_is_JavaScript [19.7.2019]. [12] Soltesz, D. L. (2019). What Does JavaScript Do?, Techwalla.com. Pridobljeno iz What Does. JavaScript. Do?:. https://www.techwalla.com/articles/difference-. between-client-side-server-side-programming [22.7.2019]. [13] McFarlin, T. (2016). What is JavaScript? Pridobljeno iz What is JavaScript? : https://code.tutsplus.com/tutorials/what-is-javascript--cms/ [23.7.2019]. [14] QuirksMode. (2018). Javascript-General introduction. Pridobljeno iz JavascriptGeneral introduction: https://www.quirksmode.org/js/intro.html [28.7.2019]. [15] WPBeginner. (2009 - 2019). What is: CSS? How to use CSS in WordPress? Pridobljeno iz What is: CSS: https://www.wpbeginner.com/glossary/css/ [2.8.2019]. [16] Dhawan, S. (2018). What’s new in CSS 3, Beginner's Guide to Mobile Web Development.. Pridobljeno. iz. What’s. new. in. CSS. 3:. https://medium.com/beginners-guide-to-mobile-web-development/whatsnew-in-css-3-dcd7fa6122e1 [2.8.2019]. [17] Inc., T. (2019). Cascading Style Sheets Level 3 (CSS3), Definition frome Techopedia. Pridobljeno. iz. Cascading. Style. Sheets. Level. 3. (CSS3):. https://www.techopedia.com/definition/28243/cascading-style-sheets-level3-css3 [2.8.2019]. [18] Cinarli, B. (2014). An Introduction to CSS Pre-Processors: SASS, LESS and Stylus. Pridobljeno iz An Introduction to CSS Pre-Processors: SASS, LESS and Stylus: https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-lessstylus [2.8.2019].. 38.

(48) [19] Edwards, S. (2018). CSS Preprocessors: What? Why?…How?! Pridobljeno iz CSS Preprocessors:. What?. Why?…How?!:. https://medium.com/@sedwardscode/css-preprocessors-what-why-how7bc5a7a564de [7.8.2019]. [20] Sass, R. (2006–2019). Sass: Documentation. Pridobljeno iz Documentation: https://sass-lang.com/documentation [7.8.2019]. [21] Wodehouse, C. (2019). 6 Reasons Sass Should Be In Every Front-End Developer’s Toolbox. Pridobljeno iz 6 Reasons Sass Should Be In Every Front-End Developer’s Toolbox: https://www.upwork.com/hiring/development/reasonsto-use-sass-css-preprocessor/ [7.8.2019]. [22] Stable, S. (2016). History of sass. Pridobljeno iz History of sass: https://www.sitesbay.com/sass/sass-history-of-sass [13.8.2019]. [23] Aytpaev, E. (2015). Stylus CSS Preprocessor. Pridobljeno iz Stylus CSS Preprocessor: https://www.adcisolutions.com/knowledge/stylus-css-preprocessor [14.8.2019]. [24] Coyier, C. (2012). Poll Results: Popularity of CSS Preprocessors, CSS Tricks. Pridobljeno iz Poll Results: Popularity of CSS Preprocessors: https://csstricks.com/poll-results-popularity-of-css-preprocessors/ [14.8.2019]. [25] Get started , Less. js. (brez datuma). Pridobljeno iz Less: http://lesscss.org/ [15.8.2019]. [26] Hospodarets, S. (2017). It's Time To Start Using CSS Custom Properties-Smashing magazine. Pridobljeno iz It's Time To Start Using CSS Custom Properties: https://www.smashingmagazine.com/2017/04/start-using-css-customproperties/ [15.8.2019].. 39.

(49) [27] Silver, A. (2015). The disadvantages of CSS preprocessors by Adam Silver. Pridobljeno. iz. The. disadvantages. of. CSS. preprocessors:. https://adamsilver.io/articles/the-disadvantages-of-css-preprocessors/ [17.8.2019]. [28] Brandorf, L. (2019). Differences Between Sass and LESS Preprocessors. Pridobljeno iz Sass and LESS Preprocessors: https://www.thebalancecareers.com/sass-vsless-2071912 [17.8.2019]. [29] Purdila, A. (2018). What is Gulp?. Pridobljeno iz What is Gulp?: https://webdesign.tutsplus.com/tutorials/what-is-gulp--cms-30432 [17.8.2019].. 40.

(50)

No results found