ansaurus

Question

Is it possible to use string macros in CSS?

Answer 1

+5 A:

CSS itself doesn't do this, but you can always serve the CSS from a PHP script or similar, doing the macro processing server-side to generate the separate rules from a list of countries.

RichieHindle 2009-05-11 12:03:03

Sorry, a Javascript solution will just not be feasible for this project.It seems that PHP will be generating my CSS for now.

espais 2009-05-11 14:52:34

Answer 2

+1 A:

Since CSS itself does not have itself a macro system, you always have to write all the rules explicitly. Hence you may choose the server side solution (which adds an extra overhead to the loading), or using your text editor's macro or snippet facilities, you can easily generate the rules by yourself.

An interesting thing would be, if CSS had support for string concatenation and the attr() function to be used outside the content property, so someone could write:

.languages {
    background-image: attr(id) ".jpg";
}

Török Gábor 2009-05-11 12:23:58

Answer 3

A:

One of the possible solutions:

<!-- our lovely list-style-image function -->
<script>
  function set_list_country(list, country) {
    list.style.list-style-image = 'url("'+country+'.png")';
  }
</script>

<!-- country list -->
<ul>
  <li id="at">Austria</li>
  <li id="de">Germany</li>
</ul>

<!-- country list styling -->
<!-- note: this goes below your list, or else create onload function -->
<script>
  set_list_country(document.getElementById('at'), 'at');
  set_list_country(document.getElementById('de'), 'de');
</script>

Regards.

2009-05-11 12:34:37

With JavaScript disabled, visitors won't see any country images.

Török Gábor 2009-05-11 12:38:08

Plus: `style` and `image` cannot be substracted from `list.style.list`. ;)

Gumbo 2009-05-11 12:47:03

how many sites are usable with Javascript disabled?

Adrian 2009-05-11 13:28:21

I scorn sites that are unusable with Javascript disabled. I will intentionally disable Javascript to see how good of a job the developers did.

MiseryIndex 2009-05-11 13:36:12

I tend to agree with MiseryIndex...I would rather avoid a Javascript solution.

espais 2009-05-11 13:39:47

I didn'y said that I like this solution. This is just an answer.IMHO, I'll better copy-paste for ten minutes on css file with further modification, than putting this into my code.

2009-05-17 14:49:43

Answer 4

A:

No, you can't do this in plain CSS because the CSS language hasn't control structures or anything like that wich will allow you to dinamically generate CSS code.

Instead, you can use a javascript solution as Andrejs pointed or a solution based on CSS variables coded in PHP.

eKek0 2009-05-11 12:48:34

Answer 5

+1 A:

Short answer: No.

Longer Answer: You should not rely on JavaScript for such a feature, since not everyone has JavaScript enabled and it would be like breaking a fly on a wheel...

Except for generating it via PHP, Perl, Python (live on serverside, or just once on your PC and save the file as *.css) or something there isn't anything you can do to save you the hassle of copy / pasting this 3 lines and changing them for each country.

So, just do it the annoying way ;) If it's only those three lines i think you'll have your list put together very fast.

lx 2009-05-11 13:19:10

Answer 6

A:

Whilst generating the CSS server side in script is an option. I prefer simple javascript here.

Some commenters have pointed out that if JS is not available then users wont see the flags....but what else wont work if js is disabled - just about every '2.0' web site!

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <title>Untitled Page</title>
  <script type="text/javascript">

     function initFlags() {

      var flagListItems = document.getElementsByTagName("li");

      for (var i = 0; i < flagListItems.length;  i++ )
      {
         var li = flagListItems[i];

        // use any prop you want to build the url - i used an expando one
        // just because i thought it made the code more readable.


        var f = li.getAttribute("flag");

        if (f == "" || f == null)  continue;

        li.style.listStyleImage = 'url(' + f + '.png)';

       }

    </script>
    </head>
    <body onload="initFlags()">
      <ul>
        <li id="at" flag="au">Austria</li>
        <li id="de" flag="de">Germany</li>
      </ul>
    </body>
</html>

Adrian 2009-05-11 13:31:04

ansaurus

tags:

views:

answers:

Is it possible to use string macros in CSS?

related questions