CSS: Any way to use variables or constants?

C

Curtis

CSS: Any way to use variables or constants?

I'm still on the uphill part of the CSS learning curve, but
in designing template/theme/skins for a couple of CMSs, I
keep wishing that CSS were a programming language instead of
a markup/style language. Perhaps there are techniques of
which I'm unaware. If so, someone please clue me in.

What I'd like to see goes something like this:

At the top of a CSS file, one would declare a few of "master
colors" (for example) as constants. For example, in my
header, sidebar, and footer I use the same color of blue as
a background color.

So, as in PHP, we might declare a global

$master_color = thevalue;


then at

..header
{
background-color: $master_color;
}

and

..left_sidebar
{
background-color: $master_color;
}

etc.

Moreover, one might call functions to process $master_color
mathematically to obtain color-complementary or harmonious
shades with functions for font colors, etc., like so:

..left_sidebar .title
{
background-color: title($master_color);
}

where title($parm) would be a function that proportionally
subtracts from R, G, and B to get a darker form of
$master_color, which might be used a dozen places on a
stylesheet--headlines, table-borders. Similarly, one might
get lighter and darker alternating colors of table rows,
etc.

The upshot is, one could do a blue-themed template and
change it to (say) a gray or burnt-orange or purple by
simply changing a couple of constants.

This raises two questions:

1. Are there existing CSS techniques whch would allow
something like this, at least in part? (I'm aware of some
ability to use percentages for some aspects of certain
elements.)

2. If not, is it theoretically possible to generate CSS
sheets with PHP, which would allow the declaration and use
of constants and functions?

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.
 
M

Mark Parnell

Deciding to do something for the good of humanity, Curtis
1. Are there existing CSS techniques whch would allow
something like this, at least in part?

You can specify multiple things at once, e.g.

..header, .left_sidebar
{
background-color: #059FBA;
}
2. If not, is it theoretically possible to generate CSS
sheets with PHP, which would allow the declaration and use
of constants and functions?

Absolutely, as long as it sends the correct mime type (text/css). E.g.

<?php
header("Content-Type: text/css");
$masterColour = "#F830C2";
?>

* {background-color: <?php print($masterColour); ?>;}

etc.
 
C

Curtis

message
et.au...
Deciding to do something for the good of humanity, Curtis


You can specify multiple things at once, e.g.

.header, .left_sidebar
{
background-color: #059FBA;
}

Sure, I've been doing a bit of that. Might be handy to move
the "globals" to the top as a section, then alphabetize all
the selectors (including the expanded versions of .header,
etc.) below.

Absolutely, as long as it sends the correct mime type (text/css). E.g.

<?php
header("Content-Type: text/css");
$masterColour = "#F830C2";
?>

* {background-color: <?php print($masterColour); ?>;}

etc.

In the markup language we're writing, we've created a macro
feature--creating styles for the page elements is one of the
things it currently does, using reserved class words. It
should not be too difficult (time-consuming, perhaps) to
pass some selected PHP features through to allow computed
variables such as the color thing I was describing--assuming
we're not suffering from a case of featuritis.

But the notion of 'computed CSS sheets' wholesale for
theme/template/skins has a certain appeal. Anyone know of
who might be doing this already, as opposed to using PHP to
gen the HTML page which in turn calls an ordinary CSS?

Perhaps some "engine" or "framework" I'm not aware of?

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.
 
T

Toby Inkster

Curtis said:
But the notion of 'computed CSS sheets' wholesale for
theme/template/skins has a certain appeal. Anyone know of
who might be doing this already, as opposed to using PHP to
gen the HTML page which in turn calls an ordinary CSS?

I used to a while ago. (Though I used CGI/Perl, not PHP.) There's nothing
difficult about it. Just set the right MIME type and you're away.
 
G

Greg N.

Curtis said:
But the notion of 'computed CSS sheets' wholesale for
theme/template/skins has a certain appeal. Anyone know of
who might be doing this already, as opposed to using PHP to
gen the HTML page which in turn calls an ordinary CSS?

Under PHP, I found it makes little sense to call external style sheets.
Rather, I use inline style sheets which are generated through PHP
along with the rest of the page.
 
B

Beauregard T. Shagnasty

Greg said:
Under PHP, I found it makes little sense to call external style
sheets. Rather, I use inline style sheets which are generated through
PHP along with the rest of the page.

Doing that penalizes the visitor, who has to download the same styles
with each page. Why not conserve the bandwidth and have your PHP just
generate the <meta ...> line to include the css file? Downloaded once,
and cached.
 
G

Greg N.

Doing that penalizes the visitor, who has to download the same styles
with each page. Why not conserve the bandwidth and have your PHP just
generate the <meta ...> line to include the css file? Downloaded once,
and cached.

"penalize", bull. A style sheet is, what? 1k bytes or so. Even with a
lousy 50kbit tlelphone line, that's less than 1/5th of a second. It
probably takes the UA the same time to process another file request,
even if that request is served from some cache.
 
C

Curtis

1. Are there existing CSS techniques whch would allow
something like this, at least in part? (I'm aware of some
ability to use percentages for some aspects of certain
elements.)

2. If not, is it theoretically possible to generate CSS
sheets with PHP, which would allow the declaration and use
of constants and functions?

Thanks to all for the feedback on these questions. Most
interesting!

--

Curtis

Visit We the Thinking
www.wethethinking.com
An online magazine/forum
devoted to philosophical
thought.
 
B

Beauregard T. Shagnasty

Greg said:
"penalize", bull.

Bull? Is it not true that the styles download for each page? Oh, you
don't think that's a penalty.
A style sheet is, what? 1k bytes or so.

Maybe yours is just 1kb. I tend to put all of the styles in the external
style sheet, unlike yours with all the inline styles in addition to the
<style..> block. From the site in your sig:

<div class=content>
<div style="height:120px; width:95%">
<div class="columns"
style="height:250px; margin-left: auto; margin-right: auto;">

....

<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<span style="background: #ddbb66; font-family:serif; font-size: 10pt;
color:#777777;">
<span style="background: #cccccc;">W3C</span>
<span style="font-size: 8pt;">css</span>
</span></a>

Mine are also quite a bit more complicated than yours.
Even with a
lousy 50kbit tlelphone line, that's less than 1/5th of a second. It
probably takes the UA the same time to process another file request,
even if that request is served from some cache.

Ok then, let's talk about server processor time spent generating it for
every page. One <meta> line in the template would save all of that.
 
G

Greg N.

Bull? Is it not true that the styles download for each page? Oh, you
don't think that's a penalty.

It certainly depends on the individual site. In my case, the inline
styles add 0.01 % to my site's bandwidth requirements. You may call
that a penalty, I say it does not matter. In my case, anyway.
Maybe yours is just 1kb. I tend to put all of the styles in the external
style sheet, unlike yours with all the inline styles in addition to the
<style..> block. From the site in your sig:

<div class="columns"
style="height:250px; margin-left: auto; margin-right: auto;">

Well, these are inline styles for a reason. They are computed by PHP
depending on the size of the individual images being displayed. There
can be dozens of variations of that code on a page. Not really practical
to put that in any style sheet.
Ok then, let's talk about server processor time spent generating it for
every page. One <meta> line in the template would save all of that.

Shifting the critique away from user penalty to server penalty? Again,
we're talking about less than one-tenth of a percent of my server
workload. Peanuts.
 
T

Toby Inkster

Beauregard said:
Bull? Is it not true that the styles download for each page? Oh, you
don't think that's a penalty.

You assume that there even *is* more than one page.

Further, if a site has very few style elements that are common across the
whole collection of pages -- that is, each page has a very different
styling -- then it may indeed be more efficient to include styling
information directly in the pages themselves.
 
B

Beauregard T. Shagnasty

Toby said:
You assume that there even *is* more than one page.

Yep, that was an assumption. I assumed most web sites have multiple
pages.
Further, if a site has very few style elements that are common across
the whole collection of pages -- that is, each page has a very
different styling -- then it may indeed be more efficient to include
styling information directly in the pages themselves.

If there is very little use of CSS, then this could be true.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,997
Messages
2,570,239
Members
46,827
Latest member
DMUK_Beginner

Latest Threads

Top