HTML, CSS i kaos standarda

Godina je, recimo, 1998. Tvoj šef je jučer bio na nekom seminaru gdje mu je čovjek u odijelu rekao da firma „mora na internet”, i sad ti na stolu stoji zadatak: napravi stranicu. Nema brief-a (dokumenta koji bi ti rekao što uopće treba napraviti), nema wireframe-a (skice kako će to izgledati), nema smisla — samo osjećaj panike koji se širi cijelim uredom kao da je netko pustio plin. I ti sjedneš, otvoriš Notepad, i za dva sata imaš nešto što izgleda kao da je cirkus eksplodirao u kutiji za alat.

Tekst koji trepće. Tekst koji se vrti po ekranu s lijeva na desno kao da je alarm za požar. Brojač na dnu stranice koji ponosno javlja da si posjetitelj broj 000042, kao da je to postignuće vrijedno urezivanja u kamen. GIF čovječuljka s lopatom i natpisom „Under Construction”, kao da cijeli internet nije, u biti, jedna velika gradilišna zona bez inspekcije.

Izgleda šaljivo danas. Nije bilo šaljivo tada — bilo je to jedino što je tehnologija dopuštala, i svi su to znali, i svi su to koristili, jer alternativa je bila prazna bijela stranica, a prazna bijela stranica se u to doba smatrala porazom.

Ispod te šarene katastrofe, dok korisnik gleda kako mu se naslov trese kao da je pod strujom, vodi se rat za koji korisnik nema pojma. Netscape i Internet Explorer — dva programa kojima se, baš kao i danas, otvaraju web-stranice, ono što danas zovemo preglednici ili „browseri” — ne nadmeću se samo tko je brži ili ljepši. Nadmeću se tko će prvi izmisliti tag koji drugi nema, ugurati ga u svoj preglednik i natjerati pola interneta da u konkurenciji izgleda razbijeno. Rezultat: developer ne piše jednu stranicu. Piše dvije. Jednu za jedan preglednik, jednu za drugi, i onda se moli da korisnik odabere onaj koji si mu ti, iz nekog razloga, odlučio favorizirati.

I sad zamisli da uopće nisi bio tu, da si samo netko izvana, netko tko gleda ekran prekriven trepćućim natpisima i pomisli — čekaj, ovo mora da je bilo namjerno? Netko je sjeo, razmislio i rekao: da, ovo je dobra ideja, neka nam stranica trepće kao neonska reklama u kvartu s lošim glasom?

Pa hajde da to pitanje konačno postavimo iskreno, umjesto da ga samo šapućemo sami sebi svaki put kad naiđemo na stari CSS hack u produkcijskom kodu. Sjedni. Pitaj. Netko će ti odgovoriti — pošteno, bez sažaljenja i bez pretjeranog uljepšavanja onoga što je, priznajmo, bilo dobrim dijelom čista improvizacija.

Tko je ovo, uopće, ovako smislio? Odlično pitanje. Sjedni, objasnit ću ti — pitaj sve što te muči, glupih pitanja ovdje nema, samo pitanja na koja još nitko nije htio pošteno odgovoriti.

Dobro, kaže mi jedan poznanik koji nije programer nego samo čovjek koji svaki dan koristi internet, imam pitanje. Gledam ja tu jednu staru stranicu iz devedesetih, arhiviranu na Wayback Machineu — to je onaj digitalni muzej interneta gdje su spremljene stare verzije stranica, baš da možeš danas otvoriti nešto što je izgledalo kao internet prije trideset godina — i vidim da je pola tagova napisano naopako, nezatvoreno, kriva slova, a stranica svejedno radi. Kako to? Zar to nije kao da programski jezik ignorira pola svojih pravila i onda kaže sve je u redu?

E, dobro pitanje. Bolje nego što misliš, zapravo — pogodio si u srž cijele ove priče iz prve. Odgovor je: da, HTML doslovno radi tako. I to nije greška u sustavu. To je, koliko god čudno zvučalo, namjerno.

HTML nije programski jezik u smislu u kojem je to, recimo, C ili Python. Tamo fali jedna zagrada i cijeli program puca, prevoditelj ti baci grešku i kaže ne ide dalje dok ne popraviš. HTML nije to. HTML je uputa. Prijedlog. Dogovor koji kažeš browseru: evo, ovo bi trebao biti naslov, ovo bi trebao biti paragraf, budi dobar pa to tako i prikaži. Konkretno, to izgleda ovako: napišeš „<p>ovo je paragraf</p>”, i browser zna da sve između tih dviju kvačica treba prikazati kao običan tekstualni odlomak. A browser? Browser sluša koliko hoće.

Zamisli da pišeš pismo nekome na stranom jeziku koji ne govoriš baš tečno. Napraviš gramatičku grešku, propustiš zarez, možda čak zabrljaš red riječi. Osoba koja čita to pismo — ako je pametna, a browseri jesu pametni na svoj čudan način — neće baciti pismo u koš samo zato što nedostaje jedna kvačica. Pročitat će što si mislio reći i nastaviti dalje. Upravo to rade browseri s HTML-om. Vide da nedostaje zatvarajući tag, slegnu ramenima i pokušaju pogoditi što si htio.

To sam ti već spominjao u poglavlju o Berners-Leeu i prvim danima weba — ta tolerancija na greške nije slučajnost, nego feature, ugrađen u samu prirodu jezika od prvog dana. I zvuči kao lijepa, plemenita odluka: neka web bude dobrostiv, neka ne kažnjava ljude koji nisu programeri, a htjeli su svoju stranicu o mačkama. I jest bila lijepa odluka. Samo, kao i svaka lijepa odluka u informatici, ima cijenu, i tu cijenu netko plaća deset, dvadeset, trideset godina kasnije.

Cijena je ovo: kad jezik ne kažnjava grešku, ljudi rade greške. Puno grešaka. I preglednik mora nekako pogoditi što si mislio, ali svaki preglednik pogađa malo drugačije. Jedan zaključi da nezatvoreni <b> vrijedi do kraja odlomka, drugi da vrijedi do kraja stranice. I odjednom imaš dva različita rezultata iz istog, tehnički pogrešnog, koda. Dobrodošao u ono što se u »frontend« folkloru — frontend je onaj dio programiranja koji se bavi svime što ti kao korisnik vidiš i klikaš u pregledniku, za razliku od backenda koji radi iza kulisa — zove tag soup, tag-juha: hrpa markupa koji je otprilike ispravan, otprilike smislen, i otprilike radi, u većini slučajeva, na većini preglednika, uz malo sreće.

I evo ključne stvari koju laik mora shvatiti, jer je ovo temelj cijelog poglavlja koje slijedi: HTML se nije pokvario s vremenom. HTML je od prvog dana bio dizajniran da bude popustljiv, a popustljivost bez ikakvog centralnog nadzora, bez netko-je-glavni, znači da svatko radi po svom. Nema policije koja provjerava tagove. Nema kompajlera — onog strogog programa koji bi ti kod vratio uz poruku »ovo ne valja, popravi« — koji odbija loš kod. Postoji samo hrpa različitih firmi koje su tumačile isti dogovor na svoj način — i to, prijatelju moj, nije kvar sustava. To je sustav.

Pa dobro, kažeš ti, ali netko je taj HTML valjda izmislio i propisao kako treba izgledati? Jest. I baš tu počinje zabava. Jer dok je jedna organizacija pisala pravila polako, s povjerenstvima, dokumentima i sastancima, druge dvije firme su se već tukle na terenu, izmišljale nove tagove preko noći — a to nas vodi do sljedećeg pitanja, koje je, vjeruj mi, još bolje od ovog.

Dobro, kaže laik, ali tko je onda uopće smišljao te tagove? Postoji neki odbor, valjda? Ljudi u odijelima, s pravilnikom, koji sjednu i kažu — evo, ovo je nova oznaka, zove se ovako, radi ono? Sjedni. Skoro cijelo desetljeće nije postojao nikakav odbor. Postojale su dvije firme koje su se mrzile, i tko je brže ugurao svoju ideju u preglednik koji ljudi koriste, taj je pisao pravila. Ne odbor. Utrka.

Uzmimo `<blink>`. Da, onaj tag koji je tjerao tekst da trepće kao neonski natpis pred kvarnim motelom. Netscape ga je ubacio u svoj preglednik 1994. — i evo šokantne stvari, nitko ga nije naručio, nitko nije sazvao sastanak da odluči je li to dobra ideja. Lou Montulli, jedan od inženjera, izmislio ga je jedne večeri u baru s kolegama, kao vic.¹ Netko je rekao „ono bi bilo smiješno” i sutradan je to bio kod u produkciji. Ne prototip. Produkcija. I onda je taj vic živio na milijunima stranica sljedećih petnaestak godina, jer developeri vole viceve isto koliko i njihovi šefovi koji im plaćaju satnicu.

Microsoft, koji nikad nije htio biti drugi, nije mogao dopustiti da Netscape ima monopol na ružne animirane tagove. Pa je izmislio `<marquee>` — tekst koji se ne trese na mjestu, nego klizi lijevo-desno preko ekrana, kao burzovna vrpca u lokalnoj mesnici. Nijedan od ta dva taga nikad nije bio dio ikakvog službenog standarda. Radili su samo u browseru koji ih je izmislio. Napišeš `<blink>` u Internet Exploreru — ništa se ne dogodi. Napišeš `<marquee>` u Netscapeu — isto ništa. Web tad nije bio jedna stvar. Bio je dva paralelna svijeta koja su nosila isto ime.

OK, kaže laik, a gdje je onda bio taj W3C, ono povjerenstvo koje bi trebalo paziti na sve to? Zašto nije rekao — dosta, stanite, dogovorite se? Prvo da razjasnimo o čemu pričamo: tag je ona osnovna cigla od koje je sagrađena svaka web stranica, komad teksta u kutnim zagradama koji kaže pregledniku što da radi s onim što je unutra — napišeš, recimo, <p>ovo je paragraf</p> i preglednik zna da je to običan tekstualni odlomak, a ne slika, naslov ili gomila trepćućih slova. W3C je osnovan 1994., baš kad je ovaj cirkus krenuo, i imao je isti problem koji ima danas svaki zakon o tehnologiji — piše se nakon što je šteta već napravljena. Browseri su izbacivali nove tagove u ritmu izlazaka verzija, a W3C je pokušavao to sve poslije dokumentirati i uglaviti u nešto što zvuči kao pravilo. Nisu bili policija. Bili su povjesničari koji su trčali za automobilom i vikali neka barem svi vozimo istom stranom ceste.

A tu dolazi i fraza koju vrijedi zapamtiti, jer se u informatici vraća svakih par godina pod drugim imenom: embrace, extend and extinguish, „prihvati, proširi i uništi”. Zvuči kao zagrljaj, a zapravo je hvat oko grla. Prihvatiš postojeći standard, javno kažeš da ga poštuješ, pa mu dodaš svoje ekstenzije koje rade samo u tvom proizvodu. Developer koji ih koristi zaključan je unutar tvog ekosustava, a da nikad nije ništa potpisao. Microsoft je to radio Netscapeu, i devet od deset stranica na webu imalo je natpis: „Ova stranica najbolje izgleda u [browser po izboru]”. To ti nije bila preporuka. To je bila kapitulacija.

Pa dobro, pita laik, tko je onda pobijedio tu utrku tagova? Nitko. Ili, ako baš hoćeš točan odgovor — pobijedio je kaos, a developeri su platili račun. Pisali su dvije verzije svake stranice, testirali u dva browsera i molili se da treći baš ne postoji. `<blink>` i `<marquee>` — tagovi koji su tekst na stranici trepćući odnosno vukli preko ekrana kao pokretnu traku, umjesto da ga pametno prikažu — danas su fosili, ali princip iza njih, svatko gura svoj tag i zove ga standardom, nije nikad zapravo umro. Samo se preselio u nove ratove, s novim imenima taktike, ali istim starim mirisom.

Dobro, kaže laik, HTML je tag-juha, jasno, browseri su radili što su htjeli, kužim. Ali zašto onda postoji CSS? Zašto nije bilo dovoljno samo — ne znam — dodati još tagova za boju i font, pa gotovo?

E, tu dolazimo do jedne od rijetkih točaka u ovoj priči gdje su ljudi imali stvarno pametnu ideju, i to na vrijeme. Håkon Wium Lie i Bert Bos 1994. predlažu nešto što danas zovemo separacija sadržaja od prezentacije. Zvuči kao fraza s kutije softvera iz devedesetih, ali koncept je genijalno jednostavan: HTML govori ŠTO je nešto — naslov, paragraf, popis. CSS govori KAKO to izgleda — boja, font, razmak. Dokument opisuje strukturu, stylesheet opisuje stil. Dva različita jezika za dva različita posla, umjesto da sve guraš u jedan te isti tag i moliš se da ostane tako.

Razlog je bio, ozbiljno, plemenit. Prije CSS-a, ako si htio da tekst na cijelom webu bude plave boje, otvorio bi svaku pojedinu HTML datoteku i ručno mijenjao `<font color=blue>` na tristo mjesta. Jedan dan kasnije šef odluči da plavo ipak ne valja — i ideš ispočetka. CSS je to riješio jednom rečenicom u jednoj datoteci. To nije ćaskanje o estetici, to je inženjerski razlog, čist kao suza: održivost. I zato je CSS, unatoč svemu što ćemo sad reći, jedna od boljih ideja u povijesti weba.

OK, kaže laik, zvuči pametno. Zašto onda svi mrze kad ga moraju koristiti? Zašto CSS ima reputaciju — da citiram jedan meme koji si vjerojatno vidio — jezika koji te tjera da plačeš u tri ujutro jer div neće da se centrira?

I tu je problem, jer web to ubrzo prestaje biti. Web postaje aplikacija. Ljudi žele stupce, gridove, bočne trake, elemente koji se lijepe jedni uz druge kao slagalica — a alat koji im je dan za taj posao dizajniran je za slaganje paragrafa jedan ispod drugog. To je kao da si dobio čekić za zabijanje čavala i onda od njega tražiš da ti sastavi cijelu kuću. Tehnički moguće. Užasno neugodno.

Pa što su onda radili? — pita laik, i već se sluti da odgovor nije lijep.

Koristili su float. To je svojstvo koje je CSS imao ugrađeno da tekst može teći OKO slike — zamisli članak u novinama gdje fotografija stoji lijevo, a tekst se lijepo obavija oko nje. Elegantno, za tu jednu svrhu. Developeri su ga uzeli i pretvorili u alat za slaganje cijelih layoutova stranica, jer — nije postojalo ništa bolje. Stavljao si float na stupac, pa na drugi stupac, pa se molio da se treći ne slomi i padne ispod prva dva zbog jednog piksela viška negdje u marginama. A onda bi zaboravio staviti clear na roditeljski element i cijeli sljedeći dio stranice bi se — bez ikakvog upozorenja, bez greške u konzoli, bez ničega — jednostavno raspao. Ne pukne. Ne baci error. Samo tiho, sramotno, klizne gdje ne treba.

Zašto je to trajalo toliko dugo? — pita laik, i pitanje je dobro. Zato što je najprije morala nastati specifikacija (dogovoreni „recept” kako nešto treba raditi), zatim su svi preglednici morali tu specifikaciju ugraditi u sebe, a onda se svi ti preglednici morali složiti da im implementacije znače isto — a to je, sjetimo se prošlog poglavlja, upravo posao koji nitko nije žurio raditi. Flexbox stiže tek 2012., Grid tek 2017. Dvadeset godina su developeri gradili moderni web — trgovine, banke, društvene mreže — alatom projektiranim za obavijanje teksta oko slike u novinskom članku. To nije mala greška u dizajnu. To je grijeh začeća cijele struke, i frontend ga plaća kamatama do danas, svaki put kad netko od mlađih kolega naiđe na stari kod i zapita se koji je bolesnik smislio da se layout radi float-ovima.

Dobro, kaže laik, znam da pitanje zvuči naivno — ali kako su ljudi uopće sastavljali te stranice, praktično, s ovim alatima? Jer float i dva stupca zvuči teško, ali cijele stranice s desetak sekcija?

Baš to pitanje nas vodi dalje — jer odgovor je još ružniji nego što misliš, i uključuje riječi »tablica« i »spacer.gif«, pojmove koje bi svaki frontend developer danas prepoznao kao trigger za noćnu moru.

Dobro, kaže laik, sad me zbunio si još više. Ako CSS layout u to doba nije radio kako treba, a flexbox i grid su tek dvadeset godina kasnije — kako su onda ljudi fizički napravili stranicu koja izgleda kao dvije kolone i header? Jesu li crtali po ekranu prstom?

Skoro. Odgovor je jedna riječ koja će svakog frontendovca s dovoljno godina natjerati da problijedi: tablice. Ne CSS tablice, ne dizajnerski trik — HTML `<table>`, isti tag kojim danas prikažeš tablicu s cijenama u nekom Excel-sličnom prikazu, ovdje korišten da simulira layout cijele stranice. Header je jedan `<tr>` (red u tablici). Lijevi meni je `<td>` (ćelija u tom redu) širine točno 200 piksela. Glavni sadržaj je `<td>` pored njega. Cijela stranica je, u suštini, Excel tablica koju je netko obojao i pretvarao se da je dizajn.

I sad dolazi genijalno-glupi dio: kako natjeraš prazan `<td>` (praznu ćeliju tablice) da ostane baš 200 piksela širok, a da se ne raspadne ovisno o tome koliko sadržaja u njega staviš? Rješenje: ubaciš u njega sličicu koja se ne vidi. Providan GIF, veličine jedan piksel, koji razvučeš na 200×1. Ta sličica ima ime koje je postalo folklor cijele generacije: spacer.gif. Nije radila apsolutno ništa, osim što je postojala i držala razmak — digitalna verzija stiropora kojim ispuniš kutiju da se paket ne rasklima u transportu.

A dizajn, pita laik, tko je smišljao kako to uopće treba izgledati? Odgovor: Photoshop, i tehnika koja se zvala slice-ovanje (od engleskog slice — »isjeckati«). Dizajner bi napravio cijelu stranicu kao jednu sliku — logo, meni, boje, sve — u Photoshopu, kao da crta plakat. Onda bi tu sliku isjeckao na desetke pravokutnih komadića, i svaki komadić spremio kao zasebnu sličicu koju bi developer poslije poslagao u — pogodi — tablicu, komadić po komadić, piksel savršeno do piksela. Tekst na stranici? Često nije bio tekst. Bio je slika teksta, jer se font koji je dizajner htio nije mogao garantirano prikazati na tuđem računalu. Da, čitač ekrana za slijepe osobe nije mogao pročitati ni riječi od toga. Ne, nikoga to tada nije previše brinulo.

I sad dolazi rečenica koju je svaka stranica tog doba imala negdje na dnu, tiho, kao upozorenje na kutiji cigareta: best viewed at 800×600 (»najbolje se gleda na 800×600«). Prijevod: ova stranica je fiksno dizajnirana za točno tu rezoluciju ekrana, i ako imaš veći ili manji monitor — tvoj problem. Nije bilo »responsive« (automatskog prilagođavanja stranice veličini ekrana, ono što danas svaka stranica radi kad je otvoriš na mobitelu umjesto na kompjuteru). Bilo je »nadaj se«.

A najbolji dio dolazi na kraju, kaže laik, jer valjda su bar preglednici to nekako pametno rješavali? Ne baš. Kad su preglednici kasnije počeli truditi se poštivati standarde, otkrili su problem: cijeli internet bio je izgrađen na njihovim starim bugovima. Ako Internet Explorer 6 popravi svoj pogrešan način računanja širine neke kutije na stranici, milijuni stranica se raspadnu preko noći, jer su developeri (svjesno ili ne) dizajnirali baš oko tog buga. Rješenje je bizarno i genijalno istovremeno: preglednik danas namjerno simulira svoje vlastite stare greške, ovisno o tome je li stranica označila da je „stara” ili „nova”. To se zove quirks mode — kvazi način rada — i to je, u praksi, arheologija ugrađena direktno u produkcijski kod svakog preglednika koji koristiš. Ispod tvog Chromea ili Firefoxa i danas leži sloj koda čija je jedina svrha glumiti bugove iz devedesetih, jer je negdje, na nekom serveru, još živa stranica koja se na njih oslanja.

Laik se počeše po glavi. Dobro, kaže, sve mi je to jasno — tag-juha, dva preglednika u ratu, izmišljeni tagovi preko noći, tablice umjesto pravog layouta. Ali mora postojati happy end. Mora postojati trenutak kad su se svi dogovorili i rekli: ok, dosta, radimo po pravilima. Kad se to dogodilo?

Kratki odgovor: kad je Microsoft prestao pobjeđivati. Dugi odgovor je malo tužniji, jer standardi na webu nikad nisu pobijedili zato što su bili bolja ideja. Pobijedili su zato što je monopol koji ih je ignorirao — pao. Pamtiš iz četvrtog poglavlja tu priču? Internet Explorer je zgazio Netscape, sjeo na devedeset i nešto posto tržišta, i onda — mirovao. Pet godina bez ozbiljne nove verzije. Zašto bi Microsoft trošio resurse na poštivanje preporuka W3C-a (organizacije koja, otprilike, propisuje kako bi web „trebao” izgledati, ali nema nikakvu moć nikoga na to natjerati) kad je već imao sve korisnike na svijetu? Standardi su lijepa stvar kad te netko tjera da ih poštuješ. Kad te nitko ne tjera, standardi su papir.

Ono što je promijenilo stvar nije bio dekret nekog povjerenstva, nego hrpa ljudi koji su se, iskreno, naljutili. Taj pokret danas zovemo »pokret za web standarde«, a najglasniji je bio jedan tip po imenu Jeffrey Zeldman — dizajner koji je otvoreno pisao da je pravljenje stranica pomoću tablica i sličica-praznina (tzv. spacer.gif) sramota struke, i da bi developeri to trebali odbiti raditi. Ne moliti Microsoft da promijeni preglednik — nego promijeniti način na koji se stranice pišu, javno, glasno, kroz knjige i konferencije, dok firme same ne počnu tražiti ljude koji znaju taj novi način rada. Aktivizam odozdo, protiv korporacije koja nije ni primijetila da je rat počeo. I znaš što? Upalilo je. Rijedak slučaj da gomila developera odluči da će nešto raditi ispravno — i onda to stvarno i napravi, bez čekanja dozvole.

Dobro, kaže laik, ali onda je bar sad sve uređeno? Sad imamo pravila, imamo dogovor, imamo — flexbox, grid, sve to o čemu pišete? Zašto onda i danas svaki frontendovac psuje CSS kao da je 1998.?

Zato što je web dizajniran da bude kaotičan — ne kao greška, nego kao cijena ulaznice. Svatko može napisati HTML stranicu i staviti je na internet, bez da ikoga pita za dozvolu, bez provjere certifikata, bez da mu netko odobri format. To je razlog zašto je pobijedio Gopher, sustav za organiziranje dokumenata na mreži koji je bio uredniji, stroži, elegantniji — a danas ga se sjeća možda pet ljudi na fakultetu. Isti je razlog zašto je Flash, koji je nudio pikselski precizan, potpuno kontroliran raspored gdje ništa ne pluta i ništa se ne slama, danas mrtav kao Gopher, zakopan negdje u dvadeset i drugom poglavlju ove enciklopedije. Uredni sustavi umiru kad im vlasnik odluči da ih više nije isplativo održavati, ili kad platforma koja ih pokreće nestane. Web nema vlasnika. Web ima gomilu neposlušne djece koja pišu svoj HTML kako im god padne na pamet — i upravo zato je još živ trideset godina poslije, dok su njegovi uredniji rođaci u grobu.