W3C home > Mailing lists > Public > www-style@w3.org > December 2009

Re: shorter code with loops(?)

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 23 Dec 2009 17:09:40 -0600
Message-ID: <dd0fbad0912231509l7dd43eb9od788cf074373bdf@mail.gmail.com>
To: asaf <asaf@freeallweb.org>
Cc: www-style list <www-style@w3.org>
On Wed, Dec 23, 2009 at 2:44 AM, Asaf Chertkoff <asaf@freeallweb.org> wrote:
> Hi everybody,
> I thought of somthing - a lot of times i found my self writing the exect
> css attributes for several elements, with the different of only the name
> of the element background image, like this:

Typically, the way to resolve this is by using a class or somehow
otherwise targetting all of the similar elements together, and
applying the common styling through that.  That is, do something like
this:

.major-title {
  margin: 20px 10px 0 0;
  float: right;
  color: red;
}

#ff-title {
  background: url("images/ff-title.png") 0 0 no-repeat;
}

#clouds-title {
  background: url("images/clouds-title.png") 0 0 no-repeat;
}

#buildings-title {
  background: url("images/buildings-title.png") 0 0 no-repeat;
}

> anyhow, what i want to ask is if there is a simple way of doing this:
>
> #$value=[ff-title,building-title,...,cloud-title] {
> margin:20px 10x 0 0;
> float: right;
> color: red;
> background:url("images/'$value'.png") 0 0 no-repeat;
> }

If you do need to do something like this - apply nearly exactly
similar styling to a large group of things that differ only by name -
typically using a server-side programming language is the way to go.
For example, if you used PHP the file would look something like this:

<?php
header("Content-Type: text/css");
$titles = array("ff-title","building-title","cloud-title");
foreach($titles as $title) {
  echo "#$title { background: url('images/$title.png'); }\n";
}
?>

Problem solved, and since you have a full programming language at your
disposal, you can do much more complex things as well.  Writing CSS
programmatically has served me well in the past.

~TJ
Received on Wednesday, 23 December 2009 23:10:09 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:47:12 GMT