sunnuntai, lokakuuta 15, 2006

CSS taikatemppu

Infoikkunan koko muuttuu sisällön mukaan. Siksi sen ääriviiva joudutaan muodostamaan 12 erillisestä png-kuvasta . Yksi jokaiselle kulmalle jne. Varjon muodostamiseen tarvitaan toiset 12 tiedostoa.

Joku todellinen fakiiri Googlella on onnistunut kehittämään säädettävän infoikkunan, jonka lähtökohtana on yksi ainut png-kuva. Siitä muodostetaan myös välilehdillä varustetut ikkunat ja uutuutena vielä lyhyt tai pitkä nokka. Asiasta kertoi Joel, joka antoi lyhyen ja ytimekkään kuvauksen teknisestä toteutuksesta: with a little CSS magic. Varjon muodostaminen vaatii toisen png-kuvatiedoston.

Uusi menetelmä pienentää latausta noin viidellä kilolla ja ratkaisee samalla joitakin IE:tä vaivanneita bugeja Se on käytössä versiosta 2.65 lähtien (ensi viikon oletusrevisio).

Yksi monista Firefoxin hauskoista pikkujipoista on median osoitteen näyttäminen. Kuvatiedostot löytyivät helposti:
http://www.google.com/intl/en_ALL/mapfiles/iw1.png
http://www.google.com/intl/en_ALL/mapfiles/iws2.png