Change Stylesheet definition based on browser resolution

[techie]

Hi All,
I have a portal working on an intranet for a company. The portal was
designed keeping in mind the resolution of 1024*768. I am including a
..css file in all the files. Now i have to make the file compatible for
both 1024*768 and 800*600 resolutions. I don't want to change all the
files to include an alternate css. Can i write some javascript
conditions in the css files to change the class definitions based on
resolutions. I am not an expert in Stylesheets and did not find any
matching discussions on google for my problem.

Please do help. Thanks in Advance.
Techie

[Mikko Rantalainen]

techie wrote:

Hi All,
I have a portal working on an intranet for a company. The portal was
designed keeping in mind the resolution of 1024*768. I am including a
.css file in all the files. Now i have to make the file compatible for
both 1024*768 and 800*600 resolutions. I don't want to change all the
files to include an alternate css. Can i write some javascript
conditions in the css files to change the class definitions based on

CSS files cannot contain javascript (though, it might be possible to use
some bug in MSIE to emulate such feature). I'd suggest you to rewrite
the CSS style so that the site scales well for any resolution but you
probably don't know CSS well enough.

IF you KNOW for sure that javascript solution is ok and you can do that,
then proceed with a text editor that can do search/replace for multiple
files.

Without seeing the markup in the HTML I'd guess that the markup would
need fixing anyway so you'd need to modify every file in any case.

Please, setup followups to either .stylesheets or .javascript depending
on which solution you want to discuss about.

--
Mikko

[Brian]

If you cross-post -- and I don't think you needed to -- at least set
followups. (set to ciwas)

techie wrote:

I have a portal working on an intranet for a company.
Thus this is not a www question, but ok.
The portal was designed keeping in mind the resolution of 1024*768.
I am including a .css file in all the files. Now i have to make the
file compatible for both 1024*768 and 800*600 resolutions. I don't
want to change all the files to include an alternate css.

< http://www.allmyfaqs.com/cgi-bin/wiki.pl?AnySizeDesign >

--
Brian
follow the directions in my address to email me

[Lasse Reichstein Nielsen]

as**********@yahoo.com (techie) writes:

I have a portal working on an intranet for a company. The portal was
designed keeping in mind the resolution of 1024*768. I am including a
.css file in all the files. Now i have to make the file compatible for
both 1024*768 and 800*600 resolutions.
That is why targeting one resolution is a bad idea. It is inflexible.
Two isn't better. At some point your compagny will want to access the
intranet on their cell phones, and you are at it again.
I don't want to change all the files to include an alternate css.
A competent search and replace program should be able to do that
easily.
Can i write some javascript conditions in the css files to change
the class definitions based on resolutions.

No. Style sheets are static, and have no methods of scripting.

I suggest you change the style sheet link to a Javascript file,
and let that document.write the correct style sheet link.

Since you can probably assume that Javascript is enabled, you might
even omit a default style sheet.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Lasse Reichstein Nielsen]

Mikko Rantalainen <mi**@st.jyu.fi> writes:

CSS files cannot contain javascript (though, it might be possible to
use some bug in MSIE to emulate such feature).

The original poster didn't say that it was for IE only (but I guess
it can be assumed in this case).

And, yes, there is an MSIE hack:

body {
background-image: url("javascript:document.styleSheets[0].href='badCSS2.css';");
}

Tested in IE6.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Stan Brown]

In article <d7**************************@posting.google.com > in
comp.infosystems.www.authoring.stylesheets, techie
<as**********@yahoo.com> wrote:

I have a portal working on an intranet for a company. The portal was
designed keeping in mind the resolution of 1024*768.
Well, there's your first mistake. Designing with _any_ specific
resolution in mind is just wrong.
I am including a
.css file in all the files. Now i have to make the file compatible for
both 1024*768 and 800*600 resolutions.
And this is _why_ designing for a particular resolution is wrong.
The better adapted it is to a particular resolution, the worse it is
for any other resolution. Since there are many different resolutions
and window sizes in use(*), you MUST make your design adaptable.

(*) not to mention text-only browsers, aural browsers, and such.

First thing is, NEVER make text size in pixels or points; ALWAYS use
ems or percents. Same for margins, heights, widths, etc.
I am not an expert in Stylesheets and did not find any
matching discussions on google for my problem.

Really? "Resolution" limited to *.stylesheets brought up nothing
useful? I'm skeptical.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Stan Brown]

In article <k7**********@hotpop.com> in
comp.infosystems.www.authoring.stylesheets, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:

I suggest you change the style sheet link to a Javascript file,
and let that document.write the correct style sheet link.

Sorry, but this is a _terrible_ suggestion. It ensures that everyone
running with JavaScript turned off will get a totally unstyled page.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Lasse Reichstein Nielsen]

Stan Brown <th************@fastmail.fm> writes:

Sorry, but this is a _terrible_ suggestion. It ensures that everyone
running with JavaScript turned off will get a totally unstyled page.

Generally, yes. In that case, you should have a default style sheet.

In this particular case, it was for an intranet, where you can might
know for certain that Javascript is available (as well as what browser
is being used).

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Brian]

Stan Brown wrote:

NEVER make text size in pixels or points; ALWAYS use
ems or percents. Same for margins, heights, widths, etc.

Let's not overstate the case.

div.gallery img {
margin: 5px ;
}

--
Brian
follow the directions in my address to email me

[DU]

Lasse Reichstein Nielsen wrote:

as**********@yahoo.com (techie) writes:

I have a portal working on an intranet for a company. The portal was
designed keeping in mind the resolution of 1024*768. I am including a
.css file in all the files. Now i have to make the file compatible for
both 1024*768 and 800*600 resolutions.

That is why targeting one resolution is a bad idea. It is inflexible.
Two isn't better. At some point your compagny will want to access the
intranet on their cell phones, and you are at it again.

I don't want to change all the files to include an alternate css.

A competent search and replace program should be able to do that
easily.

Can i write some javascript conditions in the css files to change
the class definitions based on resolutions.

No. Style sheets are static, and have no methods of scripting.

Huh... sorry but
- objStyleSheet.disabled = true | false; is dynamically doable
- objStyleSheet.insertRule(objRule) and
objStyleSheet.deleteRule(objRule) are in the specs.
These attribute and methods might not be well supported for now but they
suggest style sheets are modifiable.

I suggest you change the style sheet link to a Javascript file,
and let that document.write the correct style sheet link.

Since you can probably assume that Javascript is enabled, you might
even omit a default style sheet.

/L

I think the correct answer was to create a design which is the most
independent (as possible) of scr. res. and then to provide some
alternate stylesheets to the user. Some browsers already provide
pre-defined user stylesheets (like Opera) or offer the user the ability
to design one (Opera, MSIE 5.5+ and Mozilla-based browsers).

My recommendations:

Designing Sites For All Those Different Kinds Of Monitors:
http://thibs.menloschool.org/~hsu123/20001020.htm

Liquid Web Design: Build it right and it will work no matter what the
container.
http://www.digital-web.com/tutorials..._1999-10.shtml

Open Source Web Design: a collection of webpage designs
http://www.oswd.org/

CSS Layout Techniques: Look Ma, No Tables at glish.com
http://glish.com/css/

CSS Tableless Sites: a collection of tableless design websites
http://www.meryl.net/css/

Web site guide A superb site, highly recommendable
http://www.webstyleguide.com/index.html

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunc...e7Section.html

[Lasse Reichstein Nielsen]

DU <dr*******@hotREMOVEmail.com> writes:

Lasse Reichstein Nielsen wrote:

No. Style sheets are static, and have no methods of scripting.

Huh... sorry but
- objStyleSheet.disabled = true | false; is dynamically doable
- objStyleSheet.insertRule(objRule) and
objStyleSheet.deleteRule(objRule) are in the specs.

These attribute and methods might not be well supported for now but
they suggest style sheets are modifiable.

I was not being clear, sorrt.

Javascript and DOM provides ways of modifying style sheets with scripts.

CSS on it own cannot script anything, which was what the original
poster was asking for.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Alan J. Flavell]

On Fri, Sep 5, Stan Brown inscribed on the eternal scroll:

First thing is, NEVER make text size in pixels or points; ALWAYS use
ems or percents.
For screen display I'd say that's almost always good advice.

Just very occasionally it may be appropriate to display a pixel-sized
object with some closely-associated text sized in pixels; but don't
overlook the possibility (with suitable image material) to size the
image in em units to match the text, rather than sizing the text to
match the image.
Same for margins, heights, widths, etc.

Well now, I think it could be going too far to say that should
_always_ apply.

When normal-sized text is being displayed on an ample-sized canvas,
then it's nice to have good margins, sure, and the same usually goes
for other kinds of content too. However, if someone has to scale-up
the text for poor visual acuity, they likely won't thank you for
scaling-up the empty spaces to match - which is what's going to happen
if you measure the space in em units. I won't claim to have any kind
of magic formula, but it seems to me that for better compatibility
with a wide range of viewing situations, it could make sense for some
elements of margin or padding to be sized in px units, others in more
scaleable units. (Probably with a max linewidth in em units, and auto
margins, for those browsers which support it.)

all the best

[Mikko Rantalainen]

Lasse Reichstein Nielsen / 2003-09-05 20:37:

Mikko Rantalainen <mi**@st.jyu.fi> writes:

CSS files cannot contain javascript (though, it might be possible to
use some bug in MSIE to emulate such feature).

The original poster didn't say that it was for IE only (but I guess
it can be assumed in this case).

And, yes, there is an MSIE hack:

body {
background-image: url("javascript:document.styleSheets[0].href='badCSS2.css';");
}

I mentioned MSIE only because I thought that if there was a single
browser that would *execute* some part of style sheet it would be
MSIE. And look, I was correct. :D

By the way, the 'background-image' property doesn't look like one
intended for loading style sheets so this is probably related some
security issue and the above mentioned code will probably break in
the future.

--
Mikko