Since I'm not particularly interested in chasing a moving target, I gave up on trying to make my web page good in Dillo. Then, I found out last night that the Windows port of Dillo is frozen. This in mind, I revised my web design to better accommodate Dillo.
The only CSS that Dillo has a problem with is the complicated CSS on my site map page that Internet Explorer 6 and 7 also have a problem with. Since this CSS is only used on two pages, I have split off the mainstream CSS that Dillo does not have a significant problem rendering; While Dillo doesn't support a lot of this CSS, such as float:, display: none, display: table, or background-image:, the site still reasonably degrades and remains attractive.
Unfortunately, the CSS used only on the site map page looks really bad in any browser that doesn't pass the Acid 2 test. Indeed, I use a combination of the Owen hack and the html>/**/body hack to hide most of this CSS from Internet Explorer 6 and 7. To reduce loading times for most pages without this CSS, it is now in a separate file. While Dillo doesn't render Acid 2, it ignores CSS selectors and parses pretty much everything. So, I added another bunch of CSS which only Dillo sees, which "corrects" the CSS Dillo doesn't properly render so the page looks reasonable.
Here is what the header of my site list page looks like:
We have a special style sheet for small-screen devices, such as smart phones
<link rel="stylesheet" type="text/css" href="samiam_smartphone.css"
media="only screen and (max-device-width: 640px)" />
We have another stylesheet for modern mainstream browsers. We use the "only screen" instead of just "screen" so that older versions of Netscape, Opera, Firefox, and so on do not load the CSS at all
<link rel="stylesheet" type="text/css"
media="only screen and (min-device-width: 641px)"
title="Blue Sky (default)" href="samiam_b5.css" />
Load the special CSS used for the boxes on the the site map page
<link rel="stylesheet" type="text/css"
media="only screen and (min-device-width: 0)"
href="linkbox.css" />
Have Dillo, and only Dillo (or any other browser which doesn't understand media queries in CSS), load some CSS to hide the CSS it can't effectively render in linkbox.css. This is my "Dillo-Win32 hack".
<link rel="stylesheet" type="text/css"
media="only screen and (dillo-hack: 1)"
href="dillo-win32.css" />
Tell small-screen browsers that, yes, I have tailored CSS for a small screen, and there is no need to try and scale the page
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
>
Since older versions of Internet Explorer still have a large market share, I use IE-specific code to load the CSS so the web site looks attractive in these older browsers. In the CSS file, there are a number of selector hacks to hide the CSS IE6 and IE7 can't effectively render from these browsers.
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="samiam_b5.css" media="all" />
<link rel="stylesheet" type="text/css" href="linkbox.css" media="all" />
<![endif]-->
In summary:
- Smart phones get a simple design that works well on a small screen
- Modern desktop web browsers get a nice-looking design that works for anything from a netbook-sized screen up to a super-HD screen.
- Users of rare older browsers (Netscape, older Firefox, ancient Opera releases with ads, etc.) will usually get a version of this site without any CSS which, while not attractive, is perfectly usable.
- The site looks remarkably good on text-only browsers like Links
- The CSS gracefully degrades for users of Internet Explorer 6-8
- Dillo-win32 users get a reasonably nice-looking site.
To post a comment about an entry, send me an email and I may or may not post your comment (with or without editing)