Re: shorter code with loops(?)

• From: Brad Kemper <brad.kemper@gmail.com>
• Date: Wed, 23 Dec 2009 18:54:50 -0800
• To: Aryeh Gregor <Simetrical+w3c@gmail.com>
• Cc: "asaf@freeallweb.org" <asaf@freeallweb.org>, www-style list <www-style@w3.org>
• Message-Id: <470E3938-69A2-4D14-997B-0BFA57454434@gmail.com>

On Dec 23, 2009, at 4:51 PM, Aryeh Gregor <Simetrical+w3c@gmail.com>  
wrote:

> On Wed, Dec 23, 2009 at 3:44 AM, Asaf Chertkoff  
> <asaf@freeallweb.org> wrote:
>> #$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;
>> }
>
> Well, for starters, you can do
>
> #ff-title, #building-title, ..., #cloud-title {
>    margin: 20px 10px 0 0;
>    float: right;
>    color: red;
>    background: 0 0 no-repeat;
> }
> #ff-title { background-image: url(images/ff-title.png); }
> #building-title { background-image: url(images/building-title.png); }
> ...
> #cloud-title { background-image: url(images/cloud-title.png); }

Also pay attention to semantics. Does 'title' imply a heading of some  
sort? Then use a heading in the markup. Then you could have something  
like this:

H2 {
    margin: 20px 10px 0 0;
    float: right;
    color: red;
    background: 0 0 no-repeat;
}
H2#ff { background-image: url(images/ff-title.png); }
H2#building { background-image: url(images/building-title.png); }
...
H2#cloud { background-image: url(images/cloud-title.png); }

Or if each of those goes in a different part of the document that have  
IDs, then use descendent selectors:

H2 {
    margin: 20px 10px 0 0;
    float: right;
    color: red;
    background: 0 0 no-repeat;
}
#top H2 { background-image: url(images/ff-title.png); }
#nav H2 { background-image: url(images/building-title.png); }
...
#footer H2 { background-image: url(images/cloud-title.png); }

Received on Thursday, 24 December 2009 02:55:31 UTC