Shortcut to load multiple stylesheets/scripts in the same folder.

Question

Dear experts,

I have been working on a web page and would like to load multiple stylesheets in an external library.

Unfortunately, this library has many CSS files spread under the same folder.

The names are complicated and its such a pain to manually link it one by one.

As it

<link type="text/css" href="site/libraries/folder/highlight-areas.css"></link>
...

Is there a shortcut that loads all CSS files on the same page within the folder site/libraries/folder

I know how to do this with Ruby on Rails but that is another domain.

Is there a similar technique available on the client side?

Thanks in advance

Answer 1

Would the CSS @import function help you? It allows you to import a CSS file into another, so you could create one master CSS that links to the rest of library styles.

Answer 2

Not as such, no. Javascript does not have access to server-side information at all. (And thank goodness!) However, if you wanted to, there is nothing to stop you from:

1. Creating a page in some server-side scripting language that either:
   A. Grabbed the contents of all of the .css files inside of site/libraries/folder and served them up as one CSS file upon request.
   B. Sent your client-side script a list of all of the names of the .css files in the folder so it can load them when needed.
2. Set up a script in your deployment phase that either:
   A. Updates your .js, .css, or .html files with the names of the .css files you want to use.
   B. Concatenates all of your .css files into one file and deploys that to your server.

Each of these approaches has strengths and weaknesses. 1A requires processing time for every request (unless you cache the results, in which case you might want to consider just going for 2B) 1B will not work for clients with Javascript disabled. Both 2A and 2B require that you always run your deploy scripts after you make an edit. So it's really up to you.

Answer 3

Just an idea (not tested):

• setup the htaccess file to allow listing the directory contents of the stylesheets directory
• parse the result to extract the file names
• inject the link tags using document.write