CODEWITHSUNDEEP
cssmacros
erik
erik

Reputation: 3880

Is it possible to use string macros in CSS?

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');
}

Upvotes: 5

Views: 7696

Answers (7)

fyngyrz
fyngyrz

Reputation: 2658

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 &mdash; 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);
}

Upvotes: 0

Mesh
Mesh

Reputation: 6462

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>

Upvotes: 0

lx.
lx.

Reputation: 2327

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.

Upvotes: 1

eKek0
eKek0

Reputation: 23299

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.

Upvotes: 0

Andrejs Cainikovs
Andrejs Cainikovs

Reputation:

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.

Upvotes: 0

viam0Zah
viam0Zah

Reputation: 26312

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

Upvotes: 1

RichieHindle
RichieHindle

Reputation: 281735

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.

Upvotes: 7

Related Questions