Ismét weboldal készítésébe vágtam a fejszémet. Plain HTML és CSS, a lehető legkevesebb JS-sel, esetleg egy kis PHP, hogy ne kelljen annyit Copy-Paste-elni. Ezúttal semmi Ajax, azzal mindig csak a gond volt: trükközni az oda-vissza nyilakkal meg a belső oldalra hivatkozásokkal, megnyitással új fülön/ablakban.

Első lépésben néhány képernyőtervet akartam készíteni, hogy a megrendelővel legyen miről beszélni. Nem vagyok grafikus, az efféle feladatokra az Adobe Flash-t használom, ott mindennek lehet méretet adni, vannak szimbólumok,néhány egyszerű filter és gradiensek. Ezúttal azonban úgy döntöttem, hogy legyen rögtön HTML és CSS, akkor nem dolgozom kétszer.

Első feladatom egy kerek-sarkú doboz lett volna. Mivel régóta nem foglalkoztam komolyan CSS-sel, gondoltam, talán most már van ilyen. És láss csodát, tényleg van. A CSS 3-val elérkezett a web-fejlesztők Kánaánja. Kerekített sarkok, szegélyként használható képek. Nem kell többé minden DIV-et nyolc másikkal körülvenni ahhoz, hogy egy egyszerű mintát adjunk a keretnek.

Egyetlen bökkenő, hogy Microsoft megint egy lépéssel le van maradva, a minden más böngészőnél jobb CSS 3 támogatást biztosító IE 9 még nem jött ki. A kerek kereteket támogatja a Safari, az Opera és a FireFox, még a Chrome is, de a megrendelőnek ez feltehetően nem lesz elegendő.

Másoknak is nagyon hiányozhatott a kerekítés, mert készült egy htc amely képes lefaragni a csúnya szögleteket. De mint minden IE hack, ez sem működik kifogástalanul. Például nem működik z-index megadása mellett. Pedig z-index kell, ha egy fontos DIV-et egy kevésbé fontos DIV előtt szeretnék lebegtetni, hiszen ha úgy oldom meg az elé kerülést, hogy a HTML kódban később szerepeltetem, akkor CSS nélkül a fontos DIV (jelen esetben a menü) ami a HTML kódban később kap helyet, felolvasó programmal vagy egy karakteres, esetleg mobil böngészőben megtekintva csak a legvégén jelenik meg, ami frusztráló lehet.

A forrásban alulra kerülő menüre megoldás persze egy láthatatlan DIV, ami szintén tartalmazza a menüt, hiszen ha nincs CSS, megjelenik rögtön a cím alatt, ha van CSS, akkor nem jelenik meg. De szerettem volna efféle trükkök nélkül megúszni a weblap-fejlesztést, tisztán tartani a markup-ot. És persze az IE-s htc valamit a pozicionálásban sem szerethetett, mert a lebegő kerek-sarkú DIV-em rendre hátulra került.

Marad a háttérkép, akkor legalább van filter-ek nélkül is gradiensem meg árnyékom.

A bejegyzés trackback címe:

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.