How to include all css kept in a direcotry?

Question

Is it possible to include multiple css at once in html? Or to be precise, is it possible to include all css placed in a directory, in one go?
like at present what we do is:-

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

i need something like:-

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

Is it possible? or is there any alternative of this?

Answer 1

No it's not possible to use wildcards in a href. You will need to specify a link tag for every css file you need to include.

Answer 2

You could write a server-side script that concatenate all of the files in the directory and sends that to the client, then put the script in a <link> tag.

However, beware of syntax errors.

Answer 3

You'd need to do this serverside. If you're using PHP, have a look at glob.

For example:

foreach (glob("path/to/css/*.css") as $css) {
    echo "<link type='text/css' rel='stylesheet' href='$css'>\n";
}

Answer 4

It is impossible to do it client side. It is possible to do it with the help of a server side technology. But, the best approach would be to incorporate all CSS into a single file and include that.
If you still want to keep css splited to files, do what many do and use a build tool thay incorporate all css into one file just for the production/testing server

Answer 5

you could use php to list all file with css extension in that directory...

$fp = opendir($dir);
while ($file = readdir($fp)) {
        if (strpos($file, '.css',1))
            $results[] = $file;
    }
closedir($fp);

...and than do a foreach construct to incude css's

Answer 6

There may be some possible workarounds:

• Consider the idea of importing a PHP page (e.g. ./tabs_css/allcss.php) which concatenates and returns all the css in the directory. This may be a little CPU intensive.

• Consider creating a combo css file which is concatenation of all of your CSS files. This might be possible to create automatically by adding special hooks to your version-control system.

Answer 7

You could create a master stylesheet that you include in every page, and within that css file you can use @import to include the others.

This doesn't solve the problem of having to manually include each individual css file, but at least it encapsulates it within the master stylesheet so you don't have to repeat all of the references in every html file. If you add additional css files you will only need to add a reference in the master css and all pages will get access to it.

Example HTML CSS Reference:

<link href="master.css" type="text/css" />

Example Master CSS (master.css):

@import url(style1.css);
@import url(style2.css);
@import url(style3.css);

Read more about when to use @import and it's compatibility with older browsers.