How can I create CSS styles dynamically?

Question

In this jQuery example: http://jqueryui.com/demos/sortable/#empty-lists, they have CSS tags for each of the sortable ul's (sortable1, 2, and 3) like so:

CSS

#sortable1 li, #sortable2 li, #sortable3 li { 
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

HTML

<div class="demo">

<ul id="sortable1" class='droptrue'>
    (...)
</ul>

<ul id="sortable2" class='dropfalse'>
    (...)
</ul>

<ul id="sortable3" class='droptrue'>
</ul>

The problem I'm having is that in my web page, I don't know ahead of time how many ul's i'll have. What's the best way to handle this without defining a every iteration of #sortable?

Andrew Barber · Accepted Answer · 2012-08-09 04:38:56Z

3

You actually don't need to use separate ids for the CSS, you can use a single class instead:

CSS

.sortable li { 
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

HTML

<div class="demo">

<ul id="sortable1" class='sortable droptrue'>
    (...)
</ul>

<ul id="sortable2" class='sortable dropfalse'>
    (...)
</ul>

<ul id="sortable3" class='sortable droptrue'>
</ul>

The droptrue and dropfalse classes will still also work as expected.

edited Aug 9, 2012 at 4:38

answered Aug 9, 2012 at 4:33

Andrew Barber

40.3k20 gold badges97 silver badges124 bronze badges

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

2 Comments

Derek Hunziker Over a year ago

This is the correct answer +1, however, I would just like to point out that sortable() requires IDs for some of it's functionality (specifically toArray), so it may be a good idea to leave those IDs in place.

Andrew Barber Over a year ago

@DerekHunziker Ahhh! I missed that part. Yes; the sortable ids should be left in place in this case. I'll edit!

Purag · Accepted Answer · 2012-08-09 04:56:02Z

2

People seem to be forgetting the simple CSS3 method:

ul[id^=sortable] li {
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

We use the Attribute Starts With selector here. So this applies styling to any li elements inside any ul whose id attribute starts with the term sortable.

Example.

answered Aug 9, 2012 at 4:56

Purag

17.1k4 gold badges57 silver badges78 bronze badges

1 Comment

KRyan Over a year ago

I suspect using classes here would be faster (certainly more in line with the intent of CSS, methinks), but this is also good to know.

KRyan · Accepted Answer · 2012-08-10 19:37:19Z

1

@AndrewBarber's answer is the better way to approach things, but for the record, you can create CSS dynamically.

What you need to do is use some kind of server-side language (PHP is most popular, for whatever that's worth; ASP.NET, JSP, etc. are also used) to generate the CSS on the fly.

For example, you could use this HTML:

<link rel="stylesheet" type="text/css" href="stylesheet.php">

And then have this for stylesheet.php:

<?php
    header('Content-Type: text/css');
    for ( $i = 1; $i < $sortableMax; ++$i )
    {
        echo <<<EOT
#sortable$i
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
EOT;
    }
?>

This produces the following CSS, assuming $sortableMax was somehow set to 5:

#sortable1
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
#sortable2
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
#sortable3
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
#sortable4
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

edited Aug 10, 2012 at 19:37

answered Aug 9, 2012 at 4:46

KRyan

7,6402 gold badges42 silver badges73 bronze badges

2 Comments

Purag Over a year ago

Don't forget header('Content-Type: text/css');.

KRyan Over a year ago

@Purmou: Ah, good point. I would think that the <link> would tell the browser that already, but it's always good to be completely correct.

Collectives™ on Stack Overflow

How can I create CSS styles dynamically?

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related