NetFront 3.5 CSS and JavaScript quirks

Posted 2008-02-25 in Mobile Web by Johann.

NetFront 3.5 on Windows Mobile is giving me some headaches. If you’ve read Linking CSS for handheld devices revisited, you know I’m using JavaScript to prevent the few JavaScript enabled mobile browsers from reading the screen style sheet.

This works well in NetFront 3.1 and 3.3 but not in NetFront 3.5. You can see in this log file snippet that both the screen style sheet and the (large) JavaScript are loaded:

… "GET /blog/…go.html HTTP/1.0" 200 11629 "-" "Mozilla/5.0 (PDA; NF35WMPRO/1.0; like Gecko) NetFront/3.5)"
… "GET /favicon.ico HTTP/1.0" 200 4150 "-" "Mozilla/5.0 (PDA; NF35WMPRO/1.0; like Gecko) NetFront/3.5)"
… "GET /resources/css/handheld.css HTTP/1.0" 200 939 "-" "Mozilla/5.0 (PDA; NF35WMPRO/1.0; like Gecko) NetFront/3.5)"
… "GET /resources/css/screen.css HTTP/1.0" 200 7499 "-" "Mozilla/5.0 (PDA; NF35WMPRO/1.0; like Gecko) NetFront/3.5)"
… "GET /resources/js/jb.js HTTP/1.0" 200 27880 "-" "Mozilla/5.0 (PDA; NF35WMPRO/1.0; like Gecko) NetFront/3.5)"

I was testing the code but the JavaScript works fine.

If I change the well-known linking code from

<script type="text/javascript">
if (/(NetFront|PlayStation)/i.test(navigator.userAgent))
    document.write(unescape('%3C') +
    'link rel="stylesheet" href="handheld.css"\/' + unescape('%3E'));
if (/(hiptop|IEMobile|Smartphone|Windows CE|NetFront|PlayStation|Opera Mini)/i
    .test(navigator.userAgent))
    document.write(unescape('%3C%21--'));
</script>

<style type="text/css">
@import url("handheld.css") handheld
</style>

<link rel="stylesheet" type="text/css"
    href="screen.css" media="screen,tv,projection,print"/>

<!-- -->

to

<script type="text/javascript">
if (/(NetFront|PlayStation)/i.test(navigator.userAgent))
    document.write(unescape('%3C') +
    'link rel="stylesheet" href="handheld.css"\/' + unescape('%3E'));
if (/(hiptop|IEMobile|Smartphone|Windows CE|NetFront|PlayStation|Opera Mini)/i
    .test(navigator.userAgent))
    document.write(unescape('%3C%21--'));
</script>

<style type="text/css">
@import url("/resources/css/handheld.css") handheld
</style>
<link rel="stylesheet" type="text/css"
    href="/resources/css/screen.css" media="screen,tv,projection,print"/>
<script type="text/javascript" src="/resources/js/jb.js"></script>

<!-- -->

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/resources/css/ie.css"/>
<![endif]-->

then NetFront 3.5 will at least skip the screen style sheet (but will still load the large JavaScript file).

I don’t want to rely on JavaScript to get the CSS file on the page so NetFront 3.5’s behaviour is not exactly what I’ve expected. Does anyone have more experience with scripting NetFront?