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

.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:

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.

Received on Wednesday, 23 December 2009 23:10:09 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 11 February 2015 12:34:31 UTC