| Garmt de Vries 2004-11-29, 12:21 pm |
| For a long time, I've used CSS to style my webpages, but only for
media "screen" and "print". Now I've started looking into styling them
for other media like "projection" and "handheld". I'd be happy to hear
your advice on a couple of practicalities.
1. media="all" required?
In the <head> of my pages, I have the following:
<link rel="stylesheet" href="style.css" type="text/css"></link>
And in style.css, I have a couple @media rules like this:
@media print { /* Don't print certain images, good page breaks, etc.
*/ }
@media projection { /* Use sans-serif font for body text, etc. */ }
Most browsers use the @media print rules in my style.css when printing
the page.But now I found out that according to the specs, the value of
the media attribute should default to screen if not specified, so
strictly speaking, my style.css should not be applied when printing
the page.
I will of course add media="all" on all of my pages, but I'd like to
hear how various browsers behave in this respect.
2. Splitting CSS or keeping it together?
I'm also wondering what would be most efficient: keeping all CSS
together, or creating various files: all.css, print.css,
projection.css, etc.?
Most visitors just view the pages with a normal web browser on a
normal PC screen. They don't really need the "handheld" or "braille"
part of the CSS. On the other hand, they may decide to print the page,
or to have it read to them. And then it would be useful to have the
relevant "print" or "aural" parts already available, instead of having
to go back to the server to ask for it. I'd guess that the few extra
bytes needed for these bits of CSS aren't much of a problem for the
average visitor, so I'd rather keep all CSS together in one file. What
are your opinions on this?
3. Handheld CSS?
An exception may be made for handheld devices, which typically have
low bandwidth and small memory. Getting all those CSS parts they don't
need is really a waste, so I had better make a separate file for these
devices. Would you agree?
I test the "handheld" styles using Opera's small-screen mode
(Shift-F11). I noticed that even if I put media="all" in the <link> to
my stylesheet, Opera doesn't apply the "handheld" part when rendering
in small-screen mode. It does use my styles if I explicitly mention
media="all,handheld". It seems that this is in disagreement with the
specs, but it does make some sense. What do other handheld devices do
when they see a media="all" attribute?
4. Testing aural and other style sheets?
The last thing I'd be glad to learn more about, is ways to test my CSS
for several media. It's easy enough to print a page, and Opera lets me
test projection (in full-screen mode) and handheld (in small-screen
mode) with one keystroke. I'm still looking for good,
standards-compliant, and preferably free tools that let me test my
aural, braille, embossed, or other styles.
That's a lot of questions, I hope I'll get some answers (remarks,
suggestions, ...). Thanks!
Garmt de Vries.
|