pokušavam napraviti layout koji će imati sticky header, footer i sidebar.
Zahtjev koji želim postići je da sve bude zadano na način, tako da:
-ako se promjeni visina headera ili footera, da se visina contenta automatski prilagodi
-ako se promjeni širina sidebara, da se širina contenta automatski podesi.
Pod automatski ne mislim da se taj automatizam ugrađuje u javascript, koji bi hvatao promjene i prilagođavao layout …nego da je layout opisan samo sa CSS-om i da se elementi iz tih pravila automatski prilagođavaju jedni drugima.
Dosta sam se mučio sa jednom “sitnicom”, da bi na kraju skužio da imam zapravo funkcionalan layout, ali funkcionalan samo za Chrome.
Uglavnom, sve je isto osim što sada ima i scrollbar u FF-u.
Ali problem je što se iz nekog razloga istisne footer iz ekrana…
Kada se stavi
.sticky_sidebar_layout_content.height = 50%
…i da se ispisuje samo 15 linija contenta…onda se prikazuje sve ispravno.
(Naravno, osim što content ispuni samo 50% umjesto 100% svog prostora)
No problem nastaje kada se podigne broj linija sa 15 na 30…itd. Onda se iz nekog nepoznatog razloga footer istisne iz layouta mada content i dalje zadržava svojih 50% po visini…
Nakon dosta borbe, poprilično sam zadovoljan ishodom
Doduše, iskopao sam neko rješenje koje je bilo djelomično ono što sam gore tražio, ali je radilo. Doduše nisam kužio zašto radi, dok je moje prethodno išlo na istu foru, a pucalo.
I onda sam još to rješenje bez problema nadoštukao sa svim svojim djelovima…i onda sam se još razbacao sa par noviteta koji bi mogli biti korisni. Tako da layout sada izgleda ovako:
Znači osim glavnog headera i footera, postoji još mogućnost da se ubace i headeri i footeri posebno za sidebar dio…i posebno za content dio.
Pri tome, cijeli layout je potpuno DRY free…koja god veličina da se promjeni (bilo kroz css ili dodavanjem sadržaja) …ostatak će se samostalno pravilno prilagoditi.
I još k tome je modularan, koji god dio da se izbaci od spomenutih headera/footera …sve ostalo će ostati na svome mjestu.
A da…sve ovisi o ozbiljnosti zadatka. Za neki prosjek mi je uvjet da radi na Chrome i FF …tek u nekoj kasnijoj fazi razmisljam sto je sa ostalim preglednicima, ako dodje do te faze
Ne znam koliko su razvijeni alati sljedećeg tipa, ali rješenje ovog problema leži u preprocesoru css-a.
Isto kao što postoji preprocesor koji kompajlira scss u css, tako može postojati i preprocesor koji će kompajlirati napisani css u varijantu koja je kompatibilna sa vodećim browserima.
Taj preprocesor bi automatski mogao izbaciti i warning ako se koristi sintaksa koja se jednostavno ne moze prilagoditi za neki browser …tj. developer bi dobio izvještaj s kojim browserima je kompatibilan i sa kojima to nije postignuto. Isto kao što bi developer kroz konfiguraciju postavki tog toola mogao birati do kuda želi ići sa kompatibilnosti. Jer nema potrebe da se tera mak na konac i pokušava biti dobar sa IE8 naprimjer.
Ono što je tu najljepše…kada bi se pojavilo neko pucanje te kompajlirane sintakse na određenim browserima, problem bi se jedino trebao istjerati na enginu tog preprocesora, dok bi source css code (ukoliko je ispravno pisan) mogao ostati kakav i je bio.
A to je target…da css bude normiran i da se greške ne popravljaju tako da se treba popravljat ispravan css/scss (kao što to činimo nažalost danas)
I time bi source css code izgledao puno lijepše …jer u startu nebi morali pisati duplu sintaksu da pokrijemo različite browsere.
To će tako sigurno biti, a poprilično sam uvjeren da već danas ima alata koji idu u tom smjeru…iako još to nisam istraživao.
Ali nije mi se još desilo da vidim jasno nešto, što već ne postoji. Barem u svojim začecima.
Možda nekome bude korisno, ali generalno volim da bude sve na jednom mjestu. (Kada izgubim svoju lokalnu dokumentaciju, kopam po forumima i sakupljam djelove )
Samo preventivno, jer nisam još nikada izgubio.
Svejedno volim imati sve na dva mjesta, pogotovo tamo gdje je neka tema otvorena, volim da je na istom mjestu i završena.
Koliko ja znam Safari, Chrome, Opera, Edge su webkit browseri stoga ne trebas nikakvih 6 prefixa. Ono sto trebas je za Safari na iOS koristiti samo prefikse kod nekih novijih stilova obzirom da Apple uvijek kasni oko 6mjeseci sa standardiziranjem svojeg browsera. Jedini browser koji koristi svoj engine koji se poluraspada je Mozzila Firefox. Drugi browseri su nebitni jer nisu dovoljno popularni ni koristeni da bi bili relevantni.
