Group of CSS and JS files import at HTML?

Question

I have a group of CSS imports as like:

<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>

and some JavaScript code imports as like:

<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>

Is it possible to put all CSS import lines into a file i.e. cssImports.css and put all JS import lines into a file i.e. jsImports.js. So when I want to import that CSS and JS group files I will write something like:

<link rel="stylesheet" href="/css/cssImports.css"/>
<script src="/js/jsImports.js"></script>

so all the files listed above will be imported?

PS: I don't want to write any code belongs to web server specific.

Solution 1

You can Import CSS like this:

Create a new CSS cssImports.css and add there lines

@import url('/css/reset.css');
@import url('/css/visualize.css');
@import url('/css/datatables.css');

and relate it in your homepage as:

<link rel="stylesheet" href="/css/cssImports.css"/>

For Javascript import doesn't work. But you can create a single JS file and include the javascript code of each file after one another. But this is not recommended. It is better to have separate <script> tag for each js file.

Solution 2

Javascript imports: no. CSS import: yes, but you shouldn't because it breaks parallel downloading of stylesheets.

Your best bet is to use a local build script (such as the Ant script included with the HTML5 Boilerplate) to concatenate your stylesheets and scripts before uploading them to the server, then linking to the 'master' resources in your HTML:

<link rel="stylesheet" href="/css/master.css">
<script src="/js/master.js"></script>

There is a tutorial on using the Ant script.

Solution 3

Go with LazyLoad! https://github.com/rgrove/lazyload/ It's a very small js (less than 1kb) that takes care of resource loading for you.

Download the package and save on your js folder. Then you would probably want to do this:

<script src="js/lazyload-min.js"></script>

Then for javascript files:

 <script>
LazyLoad.js(["/js/excanvas.js", "/js/jquery.js", "/js/jquery.livesearch.js", "/js/jquery.visualize.js"], function () {

      alert('all js files have been loaded');


    });
</script>

Css:

<script>
LazyLoad.css(["/css/reset.css", "/css/visualize.css", "/css/datatables.css"], function () {

      alert('all css files have been loaded');

    });
</script>

This will also boost the performance of your page, enabling parallel css and js loading (the latter on firefox opera only).

Solution 4

for css:

<style>
    @import url('/css/styles.css');
</style>

for js you could try something like

document.write("<script type='text/javascript' src='otherScript.js'></script>");

but i dont see a reason to do either of theese...

View more solutions