29. december 2004 13.40 WEB
Štýlopis pre PocketIE
Chyba PocketIE pri vkladaní štýlopisov spočíva v tom, že ignoruje definované media handheld pri použítí @import. Naproti tomu však správne vkladá štýlopisy pre jednotlivé média pri použití link.
Z toho vyplýva tip na vkladanie individualizovaného CSS pre media handheld práve s ohľadom na PocketIE (nadpolovičná väčšina zariadení tohto typu)
<style type="text/css" media="all">@import "main.css";</style>
<link rel="alternate stylesheet" type="text/css" media="screen" title="PC" href="pc.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="pda.css" />
Pokiaľ budete chcieť prispôsobovať CSS pre PocketIE v zariadeniach s WM2003, pomôže tabuľka podporovaných vlastností CSS.
Svoje mobilné zariadenie môžete preskúšať na testovacej stránke media type screen a handheld a zistíte aké metódy pripojenia CSS môžete bezpečne použiť.
Príspevok vznikol ako reakcia na Individualizace stylopisů k eliminaci chyb prohlížečů - praktické postupy roku 2004 Jana Biena.
pošli do vybrali.sme.skKomentáre k obsahu príspevku:
Chcete napísať nesúhlasný komentár? Prosím, zvážte nasledovné: je šanca, aby niekto zmenil Váš názor alebo chcete iba trvať na svojom? V prvom prípade sú Vaše slová vítané.
Chcete urážať? Nepíšte sem urážky a invektívy. Každý, kto na týchto stránkach publikuje je automaticky (doplňte vhodný výraz). Takže už to všetci vopred vieme, čo si myslíte a preto sa neopakujte.
Rony, a čo takéto niečo?
V HTML:
V main.css:
@import 'handheld.css' handheld;
Načíta PocketIE štýly v handheld.css?
Ďalej je pravda, že PocketIE zobrazuje priamo v stránke XML prolog (napr. )?
BTW: Kedy sa dočkáme vizuálnej zmeny aj na stránkach s príspevkami? Chodím Ťa čítať z RSS a rád by som sa ocitol v príjemnejšom prostredí akým je napr. domovská stránka :)
Nezobrazilo sa to, ale v tom HTML mal normalne byt nacitany main.css cez link.
@import praveze WM 2003 nevie. O PPC 2002 sa nemusime bavit, tam je to zasa inak ;-)
ale su asi tieto zasady preco sa prplat s CSS na WM2003
1. jedine cez CSS ide odsiahnut, aby bola diakritika v zobrazenom dokumente spravne. V cistom HTML to nejde (niektore znaky sa nezobrazia spravne), vysledkom je: musime nejake CSS pre dokument pripravit
2. pre WM2003 zarucene funguje vkladanie CSS cez link s parametrom media handheld.
3. pokial chcem nejake styly "odrezat" od WM 2003 tak je bezpecne to urobit linkom s media screen.
4. pouzitie @import ma bug, kde to nerespektuje definovane media a nacitava to aj media screen
5. spravne navrhnuty dokument nie je problem prestylovat pre media handheld, problem moze byt sirka dokumentu, mam pocit, ze WM2003 pri definovani width:100% a vypnutom (fit to screen) si sirku urci vacsiu ako je skutocna sirka viewportu. Pevne definovat sirku na 240px je podla mna blbost.
6. CSS pre media handheld musi obsahovat tie iste prikazy ako pre media screen, aspon v mojom pripade mi to najprv prejde CSS pre media screen a nasledne zmeni hodnoty v nom nastavene podla media handheld.
7. CSS stelujem hlavne pre WM2003 a PPC2002 sa CSS nespracovava, cize tam treba mat len dobre spraveny dokument
Samotne prispevky viacmenej chcem mat taketo jednoduche, mam na to viac dovodov:
- sablona uvodnej stranky je podla mna prilis zlozita, prilis vela dalsich bajtov
- prave pre ludi z RSS je stranka upravena tak, aby vyzerala pekne aj v citacke (cize co najvyssie text)
XML prolog... preto nepisem stranky v XHTML 1.1 ani v UTF, pretoze s takymito strankami mam v PDA trosku problem. Aj ked sa niekomu zda, ze je to minorita, proste mi to vadi ;-)
Pokial ide o zobrazenie v PDA, tak sablona stranok s prispevkom je urobena pre PDA dobre - mam to odskusane a funkcne. Vcera som este cvicne urobil aj media handheld pre WM 2003 na uvodnu stranku, tam mi to funguje dobre s Fit to screen.
Ked uz ide o porovnanie @import a link, tak ja osobne som si viacej zvykol na link.
Zakoncim to takto: Byt webdesignerom, tak uvazujem s tromi mediami: screen, print, handheld
a pokial sa mi nechce prplat s testovanim pre handheld, tak nadpolovicna vacsina su PocketPC, postaci vediet fintu: Stiahnem si IE na PC na uzke okno a kvoli testovaniu si CSS pre handheld prepisem v kode na media screen. Nie je to absolutne 100% ale zasadne veci, co sa tyka pouzitelnosti stranky na PDA to vykryje skvele.
Urcite by som vsak media handheld nevynechaval, tak ci onak ide len o to povyhadzovat/pomenit niektore CSS vlastnosti z media screen CSS.
Dik za podrobny komentar. Este vyvstava otazka ako sa vyrovnat s limitmi uzkej a malej obrazovky a ci sa to da vzdy zvladnut s jednym len rozne ostylovanym HTML dokumentom - co napr. velke obrazky, viacstlpcove tabulky (myslim s tabulkovymi datami)?
[4]
velke obrazky: pIE v WM 2003 ich vie pri Fit to screen umelo nazoomovat. Bohuzial v CSS som neprisiel na moznost zmensit obrazok proporcionalne na zlomok jeho velkosti ako to vedia parametre IMG
priklad: IMG SRC="a.gif" WIDTH="100px"> zmensi aj HEIGHT primerane.
Pokial ale obrazky definujes v CSSku, nie je problem pripravit zmenseniny. Horsie je to s obrazkami vkladanymi za pomoci IMG. Mozes ale urobit aspon to, ze v CSS pre handheld das pre vsetky obrazky jednotnu velkost a dosledne budes na stranky obrazky linkovat. pre PDA je ale mozne proste vsetky obrazky aj CSSkom skryt.
Tabulky: problem, ale pokial proste musim mat tabulku, tak uz majitel PDA vie pochopit, ze musi rolovat doprava a dolava. Ale strategiu pri tabulkach by som riesil globalne tak, aby boli postavene skor na dlzku ako na sirku. Treba pocitat s tym, ze niektore proxy pre PDA vedia rozbijat tabulky ale nespoliehal by som sa na to.
Ulohu "urobme to aj pre handheld media" by som si vzdy stanovil dopredu:
1. stoji mi za to venovat tomu vela casu?
a) ano; v tom pripade riesim najprv CSS pre handheld a pripadnu moznost generovania dokumentu "pre male obrazovky" by som si ponechal, pokial to ma ucel.
b) nie; v tom pripade zoberiem do editora CSS pre screen a "deletujem" :)
2. ma moja stranka svoj vyznam, aby na nu prisiel aj clovek s PDA?
a) ano; v tom pripade nevaham :-)
b) neviem; tu je asi nutne prakticky vyznam webu nejako zistit, ale nie na zaklade statistiky navstevnikov ;-)
c) nie; preco nie?
3. chapem rozdielnost PDA a PC?
a) ano; clovek na PDA ma este menej casu a chuti, lenze ma omnoho vyssie potreby "nieco zistit" alebo chce utratit cas.
b) nie; naozaj to nie je rovnake, padaju tu napriklad naroky na vizualnu vernost stranky, nejake spolocne prvky pre corporate identity treba primerane potlacit v prospech pouzitelnosti (take to logo na pol tej malej obrazovky nicomu nepomoze).
V sucasnosti sa aj prehliadace "WAP" v mobiloch skulturnuju a zvladaju XHTML a CSS v obmedzenej miere. Preto nie je uz nezvycajne, pokial by som sa otvoril poskytovaniu obsahu aj pre mobilne zariadenia.
Celkom urcite uz nie je ta klasicka doba "sedych pocitacov" s velkymi monitormi, rychlymi linkami a prehliadacom "proklate maximalizovanym".
Je cas uvazovat pri zobrazovani obsahu pruzne - doslovne ale aj prenesene k layoutu stranky. Pokial ma uz predtym presvedcili prednosti fluidnych layoutov, lahsie pochopim potreby majitelov handheldov.
To proporcionalne zmensovanie funguje aj cez CSS (napr. width: 100px) v IE, Opere, Firefoxe, ale predpokladam, ze Ty myslis, ze to nejde v PocketIE.