detect screen change stylesheet

[Michael Hill]

I have a perl script that i use to render a html page. In that page i
call out a stylesheet. If the user has a 800x600 display the fonts are
really too big.

Since screen resolution is a function of the client and I have this
javascript ot detect the srecc size:
function ck_res()
{
if ( (screen.width != 1024) && (screen.height != 768) )
{
alert(" This graphic is best viewed at 1024 x 768 ! ");
// use a different stylesheet
}
}

How would I go about changing the style sheet that is being called on
the page?

Mike

 

[Lasse Reichstein Nielsen]

I have a perl script that i use to render a html page. In that page i
call out a stylesheet. If the user has a 800x600 display the fonts are
really too big.
....

How would I go about changing the style sheet that is being called on
the page?

Before answering, I would first suggest that you just don't set the font
size in the style sheet. No matter what resolution, monitor size, and
browser size, the user is likely to have set up his browser, so that
the default font fits him. If you just use the default font size, the
font will be satisfactory to the user. Even if he has bad eyesight and
a 24pt font on a 18 inch monitor at 800x600.

Now, if you insist on having different stylesheets, I recommend having
a default stylesheet that is always loaded, and separate stylesheets
that are added with Javascript, and which overload only what they need
to. That way the page will also work without javascript.

<script type="text/javascript">
if (screen.width <= 800) { // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
</script>

/L

 

[Michael Hill]

See comments below, Mike

Before answering, I would first suggest that you just don't set the font
size in the style sheet. No matter what resolution, monitor size, and
browser size, the user is likely to have set up his browser, so that
the default font fits him. If you just use the default font size, the
font will be satisfactory to the user. Even if he has bad eyesight and
a 24pt font on a 18 inch monitor at 800x600.

Yes I have a default style sheet being loaded now that specifies many
attributes about that tag, the color, etc...

So yes if the user has his browser set-up to use his fonts, then it will
over-ride those I am using. But it doesn't over ride the size I am using
does it?

For example:
If a user is using 1024x768 I'd like to use font size 14, but if they are
using 800x600 then use 12. I would do this by something like you script
below, i.e.

<script type="text/javascript">
if (screen.width <= 800)
{ // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
else
{
document.write("<style type='text/css' src='default.css'><\/style>");
}
</script>

Doesn't this sound like a good practice?

 

[Lasse Reichstein Nielsen]

Yes I have a default style sheet being loaded now that specifies many
attributes about that tag, the color, etc...

So yes if the user has his browser set-up to use his fonts, then it will
over-ride those I am using. But it doesn't over ride the size I am using
does it?

My browser does. I have a CSS rule in my user style sheet that says
body {font-size:100% !important;}
That means that any font size change you try on the body element will
fail, and I get my preferred font size.

For example:
If a user is using 1024x768 I'd like to use font size 14, but if they are
using 800x600 then use 12.

What if they are using 800x600 on a 10 inch screen?
What if they are using 1025x768 on a 28 inch screen?
What if they are near sighted and want larger fonts?
What if ... you catch the drift! You can never predict how the user
wants their fonts, or which fonts will even be readable for them.
The factors are not only screen resolution, but also screen size,
eyesight and preferences.

<script type="text/javascript">
if (screen.width <= 800)
{ // or some other arbitrary condition
document.write("<style type='text/css' src='lowres.css'><\/style>");
}
else
{
document.write("<style type='text/css' src='default.css'><\/style>");
}
</script>

Doesn't this sound like a good practice?

No. But I will claim that changing the font size is never good practice,
so I'm hard to convince.

If you *also* have a non-JS-inserted style sheet that makes the page
usable for people without javascript, then adding finishing touches
like the above will do what you ask for.

/L

 

[Lasse Reichstein Nielsen]

Ok, so alot of "bad" things I am doing here, what do you do?

I don't set the font size. If I do, I use percentages or em's, so
the new font size is relative to the default font size. And then
I try to make a page design that doesn't break if the fonts are
particularly large or small.

Ofcourse, I am *not* a graphical designer
Try changing the font size on <URL:http://www.infimum.dk/> (in Danish,
so you won't worry about the contents ). The design and decoration
(ugly as it might be) scales to fit the font, not the other way around.

It is not perfect in IE, probably due to limitations in its CSS
support, but it looks as designed in Opera and Mozilla.

(We are getting off-topic for this group. Is there a web design group
this discussions should be moved to?)
/L