Skoro sam tražio forum aplikaciju napisanu u ASP VBScript jeziku, za jedan sajt na kojem trenutno radim. Našao sam ono što mi je trebalo i to je Snitz 2000 forum aplikacija. Znam, veoma je zastarela, i mogao sam da uzmem i neki drugi, ali mi trebaju samo osnovne stvari, ne tamo neke fancy gluposti (privatne poruke, rođendani i slično). Kako sam kod nije pisan da po XHTML standardu, očekivao sam da je ono što dobijem bude jako loše. To loše nije zbog toga što kod nije XHTML validan, ni zbog toga što je prepun tabela, već zbog toga što sadrži jako zastareo HTML kod (da, onaj što se ne koristi zbog CSS-a).
Pošto sam morao da se bakćem sa CSS-om kako bih poništio stare vrednosti (font, center, basefont tagovi, i neki atributi, kao bgcolor i slično), sledi tutorijal kako poništiti zastareo HTML korištenjem CSS-a. Verujem da će mnogima koristiti, jer i dalje ima dobro napisanih aplikacija sa veoma loše napisanim HTML-om.
Prvi korak - font tag
Font tag je najzastupljeniji u celoj aplikaciji. Realno, on je meni i najveći problem, jer zbog njega ne mogu da formatiram sadržaj onako kako bih želeo. Prvo što sam dodao u CSS kod je kratka deklaracija:
color: inherit;
To bi (u teoriji) trebalo da poništi bilo kakvo bojenje teksta font tagom. Naravno, Internet Explorer je (i) ovaj put zakazao (odnosno, nisam dobio ono što sam želeo). Tu kao spas dolazi mogućnost korišćenja neke vrste JavaScripta (ispravite me ako grešim) u CSS-u, kao “fantastični” feature IE-a.
color: inherit;
color: expression(this.parentNode.currentStyle['color']);
Ovo rešava taj problem. Sledeći problem odnosi se na samo postavljanje fonta, jer je to i svrha font tag-a. Prvo što sam dodao u font selektor je resetovanje podešene familije fontova. Koristiću skraćenu varijantu (samo font), jer Opera ima problema sa čitanjem font-family atributa.
font: inherit;
font-family: expression(this.parentNode.currentStyle['fontFamily']);
Rešen je i ovaj problem. Jedino što još ostaje je da resetujem veličinu fonta i to bi bilo to, barem što se font taga tiče.
font-size: 100%;
Ova deklaracija radi u svim browserima. Dakle, generalni reset font (i basefont) taga izgleda ovako:
font, basefont {
color: inherit;
color: expression(this.parentNode.currentStyle['color']);
font: inherit;
font-family: expression(this.parentNode.currentStyle['fontFamily']);
font-size: 100%;
}
Success! Uspeo sam da se rešim najdosadnijeg (i najrasprostranjenijeg ako mogu da dodam) zastarelog HTML koda.
Drugi korak - ostali zastareli tagovi
Za svaki slučaj, odlučio sam da poništim još par tagova, kao što su center, u, s, blink, strike, marquee i nobr. Kao i kod resetovanja font i basefont tagova, i ovde se koriste slične tehnike (reset za normalne browsere, a zatim reset i za Internet Explorer).
center {
text-align: inherit;
text-align: expression(this.parentNode.currentStyle['textAlign']);
}
s, strike, u {
text-decoration: inherit;
text-decoration: expression(this.parentNode.currentStyle['textDecoration']);
}
nobr { white-space: normal; }
marquee { overflow: visible; -moz-binding: none; }
blink { text-decoration: none; }
Dakle, ovim sam se rešio i uticaja ovih zastarelih tagova, iako ih u osnovnom kodu aplikacije nema (previše).
Treći korak - atributi
Pod ovime se podrazumeva reset HTML atributa, kao što su bgcolor, valign, border i slični tagovi, koje je zamenio CSS. Prvi od popravljenih je dosadni align atribut, kojeg sam se rešio na sledeći način:
*[align] { text-align: inherit; }
* { text-align: expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); }
Prvi deo se odnosi na ostale browsere, dok se drugi odnosi na Internet Explorer (jer IE ne prepoznaje attribute selektore). Sledeći su atributi za img tagove. Sada želim da se otarasim border, hspace i vspace atributa, koji su postavljeni u HTML kodu.
img { border: none; margin: 0; }
Sada nastaje problem. Vidite, svi browseri čitaju hspace i vspace atribute kao margine, ali ne i Internet Explorer, pa je praktično nemoguće rešiti ovaj problem uz samo CSS, već se može rešiti pomoću JavaScript-a (ko zna kako, neka ostavi komentar).
Sledeće, u duhu popravke zastarelog HTML-a, resetovaću i pozadinsku boju stranice (bgcolor atribut):
body { background: transparent; }
To je sve što se tiče zastarelih atributa. Verovatno ih ima još, ali ovo su svi koji su mi trebali za popravku forum aplikacije.
Poslednji korak - tabele
Kao što sam napomenuo, source aplikacije je prepun tabela, i kao poslednji korak ostavio sam rešavanje i njih kao “minornog” problema. CSS je u ovom slučaju veoma jednostavan, i (za divno čudo) nema nikakvih expression-a.
table, tr, th, td {
width: auto;
height: auto;
background: transparent;
vertical-align: inherit;
border: none;
border-collapse: collapse;
}
Rezime
Ovo je u trenutnom vremenu veoma dobro rešenje. Ipak, trebalo bi razmisliti i stvarno popraviti kod (na pravi način), a ne CSS trikovima. Ipak, kada imate postojeći kod, koji je BTW tuđ i glomazan, ovakvo rešenje je i više nego dobrodošlo.
Možete preuzeti kompletno rešenje (sa komentarima).
