CSS Variables?

[kevin]

That's OK, my solution for you doesn't require you to know C, but it uses the macro facility of the C preprocessor.

This is easy, btw... Here's how:

I'll use a simple example css file (test.css) with only four lines in it:

a:link {color:#2f78c0;}
a:visited {color:#2f78c0;}
a:hover {color:#2fc0c0;}
a:active {color:#2fc0c0;}

Notice how in this contrived example, we want to use the same colour a couple of times. In fact, we want to do this for a couple of colours.

OK, rename the file to test.cssp (or something).

Modify it as so:

#define LINK_COLOUR	2f78c0
#define HOVER_COLOUR	2fc0c0

a:link {color:#LINK_COLOUR;} 
a:visited {color:#LINK_COLOUR;} 
a:hover {color:#HOVER_COLOUR;} 
a:active {color:#HOVER_COLOUR;}

See what we've done? We've defined macros that the C preprocessor will expand.

Use this command line:

gcc -E -x c -P test.cssp > test.css

This will expand the macros and create a file called test.css for you, with your colour values inserted in the right place.

Let me know if you need more info.

I really think you're using a sledgehammer to fix a problem.

Although your example is simplified in CSS you can group multiple items together:

a:link, a:visted {color:#2f78c0;}
a:hover, a:active {color:#2fc0c0;}

there, each color used once. same effect, except to test your site you don't need to run a make step.

 

[logical muse]

I really think you're using a sledgehammer to fix a problem.

Although your example is simplified in CSS you can group multiple items together:

a:link, a:visted {color:#2f78c0;}
a:hover, a:active {color:#2fc0c0;}

there, each color used once. same effect, except to test your site you don't need to run a make step.

It was a simplified example, as you rightly point out. Don't underestimate the technique's power though. I kept the example as simple as possible to demonstrate the technique.

It really comes into its own when values need to be calculated. You can't solve that problem by groupling multiple items together.

Have a look at the m4 example I gave in this message.

 

[kevin]

No doubt it's a flexible method, but as I said I dislike web solutions that require a separate make step. They make testing harder.

Additionally for your other example, how frequently do you need calculated values in CSS? You use column widths as an example, but if you're changing columns widths so frequently that calculating them yourself takes too long then there is something wrong with your website. Not to mention I hate fixed width sites period. They don't render properly when I'm using a small virtual connection to browse (many support sites suck in these scenarios) or they waste tons of space when I'm browsing on my big monitors at work.

I would see value in something like this for a consultant that was making modifications to a standard CSS file to would provide customized solutions for many different customers. For one person maintaining a website, wrong solution. IMO of course.

 

[logical muse]

No doubt it's a flexible method, but as I said I dislike web solutions that require a separate make step. They make testing harder.

Thanks for your comments. Yes, it is flexible. I don't agree that it makes testing harder. If anything, it can reduce the potential for errors.

Additionally for your other example, how frequently do you need calculated values in CSS? You use column widths as an example, but if you're changing columns widths so frequently that calculating them yourself takes too long then there is something wrong with your website.

I didn't say that you'd be changing column widths for your web site frequently. Take a look at a typical article on CSS multi-column layouts. Several calculations are required. The preprocessor automates the process.

Not to mention I hate fixed width sites period. They don't render properly when I'm using a small virtual connection to browse (many support sites suck in these scenarios) or they waste tons of space when I'm browsing on my big monitors at work.

Thanks for your opinion on fixed width sites, but please allow me to say that it's irrelevant to this discussion. I could have just as easily used a liquid layout, or fluid layout. The choice of a fixed width layout in my example has absolutely no bearing on the validity or usefulness of the technique. If I had used a liquid layout as an example, someone else would have made the comment that they hate web sites that expand to the full width of the window as it makes text lines too long to read easily. Let's not make this about fixed versus liquid layouts.

I would see value in something like this for a consultant that was making modifications to a standard CSS file to would provide customized solutions for many different customers. For one person maintaining a website, wrong solution. IMO of course.

With a little imagination, you can see that this can be used for HTML as well as CSS. Are there any repetitive tasks that consume your time when developing web sites? How about the navigation on each page? One of my web sites has hundreds of static pages. Two new pages are added every week, and hundreds of pages need to be modified to include links to the new pages. I don't use Dreamweaver or any other package, I develop my sites just using a text editor. Using techniques similar to those described above, adding new pages to this site takes almost no time. Literally, just seconds, and all the relevant pages are automatically regenerated with links to the new pages.

There is no doubt there is value in this method. Maybe not for you, but I've saved lots of time in development, maintenance and testing using something similar to this. My requirements may be more demanding than most, though. If it's not for you, that's fine. It may be useful to others.

Happy developing!

 

[kevin]

my websites are dynamically driven html with static css. reversing that, static html with dynamic css, seems, well, backwards to me.

I'm not trying to argue you out of something you seem to think is a good idea, it's just a solution i wouldn't implement.

 

[logical muse]

my websites are dynamically driven html with static css. reversing that, static html with dynamic css, seems, well, backwards to me.

I'm not trying to argue you out of something you seem to think is a good idea, it's just a solution i wouldn't implement.

Fair enough, but you're misrepresenting the technique.

None of my web sites are static html with dynamic css. That's completely missing the point.

Some of my web sites are dynamic driven html with static css, just as yours are.

Some of my web sites are static html and static css.

In fact, using a preprocessor makes sense for static sites, as I mentioned in one of my posts above. Someone else was proposing PHP for CSS variables, which didn't make sense to me.

PHP is for dynamic sites, preprocessing is for static sites (or files), as I've already mentioned.

I use this technique for my sites to great effect. Not for CSS, for HTML.

Here's a question for you. Let's say you have a client who wants a static html site and you code it all in a text editor, and there are, say, eight pages on the site. There's a menu on the left hand side with eight links.

The client wants a change, maybe an additional page. How long does it take you to do it? Do you have to edit each existing page's html file to add the link to the new page? And remember, the navigation code is different for each page as the current page's menu item needs to be highlighted.

The client's phone number changes. Do you know on how many pages the phone number appears? How long does it take to change them all?

Using a macro preprocessor, these changes are made in seconds. I can add a new page to a web site by adding one line to a text file and running my program. The line I add is the name of the page, something like:

about

By doing that, and only that, all the pages of the site are rebuilt, all linking to the new page, the new page is created and ready for me to add some content.

If there is some content that is used multiple times over a few pages, I create a macro for it. The content is defined in one place, and changes can be easily made.

It's a remarkably powerful system that I've developed for radidly creating and maintaining web sites, that incorporates macro expansion and templating. Just because I showed some examples of using m4 for css doesn't mean that's the only use for this kind of technology.

Mind you, I've never used Dreamweaver or Frontpage or whatever it is that web designers use, so I don't know how they handle these tasks.




eta: OK I won't say any more on this matter as I'm giving away my competitive advantage!

 

[RSLancastr]

Instead of using variables, you could simply specify common properties (such as colours) for multiple elements in one statement:

D'oh!!

This will solve some, though not all of my CSS-color problems.

And I knew about it, but didn't consider using it for this!

Thanks!