Implementáció-függő

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.

Hibajelenség Firefox 3.6-ban
DIABOLICAL LAUGHTER

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.

Nfol

12 hozzászólás

  1. 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 #
  2. 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.

    EdBoyWW #
  3. @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ő. :)

  4. 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.)

  5. @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.

  6. Jéééééj müx! :)

    EdBoyWW #
  7. Ezeket a bejegyzéseket nem szoktam elolvasni, mert nem értem.

  8. @Zsubi:
    A még részletesebb okfejtéstől azért vonakodom, mert abból kiderülne, hogy én sem értem.

  9. 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.

  10. Gratz, kiraly lett. iPaden tokeletesen jelenik meg. :)

  11. @bachterman: Jogos, felírtam.

    @Mefi: Köszi, igyekeztem. :)

  12. ja, meg valami persistent cookie-t wordpress "mintára" (khm), hogy a hozzászólásnál megjegyezze a nevet és a címet.

    bachterman #

Itt lehet puttyogtatni!

Told ki Twitterre, oszd meg Facebookon vagy írj hozzászólást!