Dupa inca o noapte pierduta aiurea sapand in HTML m-am convins ca e o minune ca merge.
Se da problema cea mai simpla a unui site de web: ai aproape intotdeauna un header comun, un meniu de navigatie, content si footer. Cum poti sa faci ca headerul si footerul, cel putin, sa fie o singura instanta si nu o copie in fiecare pagina, in HTML?
- server side: ASP "include virtual" si gata, s-a rezolvat. Dar merge doar server side si numai daca este activat. Daca serverul e mai chior, gen SharePoint, slabe sperante
- client side: e o ciorba.
1. Faci o pagina cu header, meniu si footer si cu contentul iframe. Cu toate neajunsurile posibile, gen acelasi link pentru toate paginile, paginarea aleatorie per browser, lipsa suport in HTML5. Ciobaneala, dar in general merge.
2. Javascript. Ex. Ars Technica foloseste metoda asta ca sa incarce headerul. Dar Javascript nu e tocmai HTML si nu functioneaza daca e dezactivat din browser.
3. <embed type="text/html" src="header.html"> Functioneaza partial, dar are probleme majore.
a) In primul rand ca ia continutul gata formatat, nu poate sa aplice CSS la continut; header.html trebuie sa fie gata formatat. Se rezolva, dar nu e elegant.
b) este chiar embedded, adica nu porneste din coltul ecranului, are offset de 1 pixel. Si uneori da pe-afara din ecran si creaza scrollbar care nu vrea sa se ascunda. Se rezolva cu multa rabdare in a seta dimensiuni, pargini, padding etc
c) este chiar embedded, adica un click in meniul de navigatie se va deschide in acea bucata de ecran de header, nu in tot documentul. Nu se poate rezolva decat probabil cu Javascript, dar atunci nu merita folosit <embed> ci direct Javascript
d) daca ai un <embed> la sfarsitul documentului, gen footer, nu se poate scapa de scrollbar.
e) Comportamentul IE9 e complet diferit de Opera si Chrome: fara structura completa HTML in fisierul inclus nici unul nu aplica CSS, iar cu structura completa Opera si Chrome merg impecabil, dar IE9 nu mai pune nici macar continutul neformatat.
4. <object name="foo" type="text/html" data="foo.inc"/>. Gasit pe net, nu am reusit sa il fac sa mearga altfel decat <embed>, are aceleasi probleme.
Au adaugat <header> si <footer> in HTML5, dar sunt inutile in a rezolva problema. Sunt doar chestii cosmetice minore folositoare daca ti-e lene sa scrii <div id="footer"> si scrii doar <footer>. Wtf?