Is it possible to use string macros in CSS?

Question

There is a portion of my website where I am using a country's flag as an icon for a list element.

For instance, I have:

<ul>
  <li id="at">Austria</li>
  <li id="de">Germany</li>
</ul>

The accompanying CSS looks like this:

#at {
  list-style-image: url('at.png');
}
#de {
  list-style-image: url('de.png');
}

Is it possible to replace this with a macro so that I don't need to redefine the CSS for each country? Something like a C-style macro would be awesome, but I'm not sure if CSS supports this sort of thing.

ie

#_country {
  list-style_image: url('_country.png');
}

RichieHindle · Accepted Answer · 2009-05-11 12:03:03Z

7

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.

answered May 11, 2009 at 12:03

RichieHindle

283k49 gold badges367 silver badges408 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

erik Over a year ago

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

Community · Accepted Answer · 2017-05-23 12:08:12Z

1

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";
}

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered May 11, 2009 at 12:23

viam0Zah

26.4k8 gold badges79 silver badges103 bronze badges

Comments

lx. · Accepted Answer · 2009-05-11 13:19:10Z

1

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.

answered May 11, 2009 at 13:19

lx.

2,3371 gold badge22 silver badges32 bronze badges

Comments

Andrejs Cainikovs · Accepted Answer · 2009-05-11 12:34:37Z

0

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.

answered May 11, 2009 at 12:34

Andrejs Cainikovs

5 Comments

viam0Zah Over a year ago

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

Gumbo Over a year ago

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

MiseryIndex Over a year ago

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

erik Over a year ago

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

Andrejs Cainikovs Over a year ago

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.

eKek0 · Accepted Answer · 2009-05-11 12:48:34Z

0

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.

answered May 11, 2009 at 12:48

eKek0

23.4k26 gold badges94 silver badges121 bronze badges

Comments

Mesh · Accepted Answer · 2009-05-11 13:56:32Z

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">
<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>

fyngyrz · Accepted Answer · 2023-02-06 13:18:12Z

You can use CSS for simple macros. Here's the CSS coding for "version" that is referenced several times in one of my documents...

.version::after {
content: "42";
}

...then, anywhere in the document I want to use the current version, this...

<span class="version"></span>

...which results in 42.

Here's one where I set up the "lock" emoji. This might be usable for the country flag, inasmuch as they are mostly available as emojis. CSS requires hex coding of a unicode code-point here, sadly, but still, it's doable...

.lockicon::after {
content: "\01F512";
}

...same kind of invocation...

<span class="lockicon"></span>

...which results in 🔒.

Because the text within the content: ""; is straight unicode, not HTML, things like character entities and HTML tags don't work.

In many cases, however, you can use the unicode code-point for a character entity. For instance, while you can't put — in there, you can put the unicode code-point for it, as in "\0000A0". Be sure to use all six HEX digits, otherwise interpretation by CSS may be incorrect, depending on what else you have in the "content" value.

You can use images, too, but to scale them, you have to use transform: scale(n);

div::before {
content: url(image.jpg);
transform: scale(0.75);
}

Collectives™ on Stack Overflow

Is it possible to use string macros in CSS?

7 Answers 7

1 Comment

Comments

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related