Passing A Variable to a CSS 2

iaresean · Feb 10, 2004

Hi All!

I have just started using CSS, and I must say; I wish I started using it earlier, it is a great time saver and excellent for creating a standard.

I just want to know if it is possible to send a variable to a CSS script so I can use a different font size. For example by passing the variable like so:

<link rel="stylesheet" type="text/css" href="../scripts/common.css?size=$size">

$size is a variable in my perl cgi script. It can have a value of 10,11, or 12.

What do I write in the CSS script to handle the catching of this variable and then implimenting it as well. A brief example would be much appreciated.

Enkosi Kakhule!

Sean.

gacaccia · Feb 10, 2004

you can't pass a variable into CSS. however, you can do something even better. by using the browser dom and scripting, you can change CSS values on the fly. for example, if you wanted to change the font size as specified for the <body> tag, you could have something like...

Code:

<html>
<head>
<title>DOM TEST</title>
<style type=&quot;text/css&quot;>
<!--
body {
		 font-size: 32;
}
-->
</style>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
function process() {
				 alert(&quot;ready to change font size&quot;);
				 document.body.style.fontSize = &quot;78&quot;;
}
//-->
</script>

</head>
<body onload=&quot;process()&quot;>
<p>here is some text</p>
</body>
</html>

replace the "78" for font size with your $size variable and you should be good to go.

glenn

ChrisHunt · Feb 10, 2004

There's no way to pass variables into a css style sheet, as far as I know.

If $size can only ever be to be 10, 11 or 12, you could write three different versions of your style sheet, call them common10.css, common11.css and common12.css . Then put this in your script:
[tt]
<link rel="stylesheet" type="text/css" href="../scripts/common$size.css">
[/tt]
Alternatively, you could write a cgi script to generate your style sheet dynamically. Just be sure to send the text/css mime type, and a suitably long expires header to get the result to cache on the user's machine. Your code would thus be
[tt]
<link rel="stylesheet" type="text/css" href="/cgi-bin/common.pl?size=$size">
[/tt]
common.pl would print the CSS definitions, tweaking the size as required. You could also make it sniff out the type of browser being used and make appropriate changes to the CSS being served - e.g. serve up a simpler style sheet for NS4 users.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

iaresean · Feb 10, 2004

Thanks guys,

Both of your ideas are great.

Enkosi Kahule! (Thank you very much! - Xhosa, South Africa)

Sean.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Passing A Variable to a CSS 2

iaresean

Programmer

gacaccia

Technical User

ChrisHunt

Programmer

iaresean

Programmer

Similar threads

Part and Inventory Search

Sponsor