Műhelytitkok
A tegnapelőtti launch óta — ami igazából már múlt pénteken megtörtént — felmerült néhány probléma, amik a figyelmetlenségemből vagy a megfelelő tesztelés hiányából fakadtak. Ezekről lesz most szó, mert egyéb témákról nincs kedvem írni.
Cardinal, the rack!
Edboy jelezte, hogy Androidon nem vált át az oldal a mobilos elrendezésre. Kibővítettem a media query-ket a megfelelő device-width
feltételekkel — okom volt a kihagyásukra, de kikerültem máshogy —, reményeim szerint ennyi volt a gond. Androidos és iOS-es eszköz híján nem tudok erről megbizonyosodni, úgyhogy szóljatok, ha így sem jó.
Fetch... the cushions!
A böngészőprogramok valamilyen megfontolásból az űrlapok gombjai esetében nem a klasszikus dobozmodellt alkalmazzák (hogy ti. a doboz tényleges magassága a doboz definiált magasságának, az alsó és felső eltartásnak, valamint az alsó és felső szegély vastagságának az összegével egyenlő), hanem olyat, amelyben, ha konkrét értékkel definiálod a gomb magasságát, akkor az onnantól kőbe van vésve.
Továbbá bármennyire jó ötletnek tűnik, véletlenül se helyezzetek el a gomb value
attribútumában az alfanumerikusokon kívül eső HTML-entitást (soremelés-jel és társai) díszítés végett, mert attól az Opera egyből kiénekel pár magas hangot — ami még a kisebbik baj, de a gomb feliratát elegánsan ki is tolja a gombon kívülre.
...the comfy chair!
Amikor S@ti felvetette, hogy szokatlan a teljes képernyőt elfoglaló kenyérszöveg, még nem gyanítottam semmit (pedig 640 képpont ezzel a betűmérettel nem a világ), aztán küldött egy screenshotot a szöveget kitakaró zöld logóról, ami azért volt furcsa, mert az elképzeléseim szerint a logó csak akkor ragad meg a bal felső sarokban, ha elég nagy az ablak szélessége ahhoz, hogy elférjen a tartalom mellett, egyébként meg együtt mozog a fejléccel.
Ezt a jelenséget végül a 3.6-os Firefoxszal sikerült reprodukálnom. Az rögtön látszott, hogy az összes doboz úgy jelenik meg, ahogy kell, a bejegyzést tartalmazó article
elemet kivéve, azt ugyanis a neki megadott 640px helyett 880px szélesre renderelte ki a Firefox.
Nem mennék bele abba, hogy hányszor javítottam bele szentségelve a CSS-be, meg hogy hány szál hajam hullott ki attól, hogy az article
elemre alkalmazott tulajdonságok közül mindnek megvolt a maga elvárt hatása, csak a szélességre, margóra, eltartásra vonatkozó beállításoknak nem (pedig utólag végiggondolva ez a kulcs), meg hogy milyen kacifántos keresőkifejezésekkel illettem mindannyiunk közös barátját.
Aztán szöget ütött a fejembe, hogy talán a Firefox ezen verziója még nem támogatja ezt az új, HTML5-ös elemet, de a kompatibilitási táblázat szerint igenis támogatja, csak a stíluslap elején nem árt megadni, hogy blokkszintű elemként legyen kezelve, ezt meg amúgy is megtettem még a kezdet kezdetén.
Azért odagörgettem, végignéztem a szabályhoz tartozó szelektoron, majd szolid, ámde határozott facepalmot követően beírtam a hiányzó vesszőt az abbr
és az article
közé és bumm, így lett a...
I confess!
Ezeket csupán azért meséltem el, mert nehogy már csak nekem fájjon, meg hátha tanulságos, meg hogy sajnáljatok.
EdBoyWW @
Roboton összehúzza, de nem 320 pixelbe, igazából semmi nem változott. Ne szopjál vele szerintem, hacsak nem örömből, mert úgyis feedből olvaslak. Fehér háttérrel gyönyörű a design!
EdBoyWW @
Kis help, ha mégis akarod:
http://dl.dropbox.com/u/149472/temp/snap20110923_110205.jpg
Stock android böngésző Android 2.3-on.
Nfol @
@EdBoyWW:
Köszi a véleményt meg a képet is!
Úgy látom, itt a 900 és 660 képpont közötti szélességre húzott layout érvényesül. Most már azért is utánanézek ennek, biztos itt is kimaradt egy vessző. :)
SztupY @
Szerintem az enyhén sárgászöld háttér szebb, mint a fehér, de úgy látszik ezzel egyedül vagyok.
Androidon amúgy egész jó, csak túl nagy a fehér margó két oldalt, ami felesleges (úgyis az első dolog az ilyenkor, hogy az ember dupla klikkel a szövegen, hogy az legyen csak a képen.)
Nfol @
@SztupY:
A terveim szerint 660px-nél keskenyebb képernyőn kétoldalt csak 10-10px margónak kellene lennie. Ha desktop böngésző ablakát átméretezed, akkor ott látszik is. A linkelt képen viszont azt látom, hogy a browser a tényleges képernyőméretnél szélesebbre veszi a viewportot, az arra vonatkozó media query-t lövi be magának, majd ezt az eredményt kicsinyíti le.
Mindenesetre beírtam a headbe egy viewportos meta taget, hátha az hiányzott.
EdBoyWW @
Jéééééj müx! :)
Zsubi @
Ezeket a bejegyzéseket nem szoktam elolvasni, mert nem értem.
Nfol @
@Zsubi:
A még részletesebb okfejtéstől azért vonakodom, mert abból kiderülne, hogy én sem értem.
bachterman @
implementálhatnál alulra is egy oda-vissza nyilat, mert 320px-ben kutya vicces visszamenni a betűtenger elejére. vagy egy ormótlan "top" linket, felülre ankerrel.
Mefi @
Gratz, kiraly lett. iPaden tokeletesen jelenik meg. :)
Nfol @
@bachterman: Jogos, felírtam.
@Mefi: Köszi, igyekeztem. :)
bachterman @
ja, meg valami persistent cookie-t wordpress "mintára" (khm), hogy a hozzászólásnál megjegyezze a nevet és a címet.