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.

It's possible, but that would mean one extra request from the client before the other imports can take place. IMHO, that's an unnecessary bottleneck. — Shawn Chin
– Shawn Chin, Commented Aug 19, 2011 at 11:22
Are you wanting to condense your static assets into single files? For example, all style sheets combined into one .css file, and all JavaScripts into one .js file? — Martin Bean
– Martin Bean, Commented Aug 19, 2011 at 11:24
@Shawn Chin you quiet right. To ad to that if you wanted to update one of them you would have to replace some/all of the files. — Alistair Laing
– Alistair Laing, Commented Aug 19, 2011 at 11:25

Alex · Accepted Answer · 2011-08-19 11:26:44Z

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.

answered Aug 19, 2011 at 11:26

Alex

9,5011 gold badge41 silver badges45 bronze badges

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

Comments

ffrappo · Accepted Answer · 2017-04-26 09:58:35Z

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).

Ahsan Rathod · Accepted Answer · 2011-08-24 10:26:30Z

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.

edited Aug 24, 2011 at 10:26

answered Aug 19, 2011 at 11:37

Ahsan Rathod

5,5252 gold badges23 silver badges26 bronze badges

Comments

Gatekeeper · Accepted Answer · 2011-08-19 11:26:31Z

1

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...

answered Aug 19, 2011 at 11:26

Gatekeeper

1,6163 gold badges22 silver badges34 bronze badges

Comments

Alistair Laing · Accepted Answer · 2011-08-19 11:24:04Z

0

Yes just copy all the code and place in into a new file in the order than you would like it to run.

I know there are some javascript libraries that can do this for you but I dont have an experience of using them. I think Yahoo compiler/ YUI has one.

answered Aug 19, 2011 at 11:24

Alistair Laing

9731 gold badge7 silver badges18 bronze badges

Comments

Al-Mothafar · Accepted Answer · 2011-08-19 11:43:52Z

I'm not recommend do that because performance issue, but if you want the way, you can do that:

For CSS yes its possible, in cssImports.css you can put:

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

But for JS, I think no way as much as CSS, but you can do this (adding JS files) from one JS file (ex jsImports.js), by write code create script element and add this element to page, like that :

var jsE = document.createElement('script');
var url = 'JS LINK HERE';
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);

Do this for each link of JS that you want to put, I have and idea, using Arracy contains JS links like this:

var jsLinks = new Array(
"/js/excanvas.js",
"/js/jquery.js",
"/js/jquery.livesearch.js",
"/js/jquery.visualize.js"
);

then a loop read a link each time and put this, like :

for (i = 0; i < jsLinks.length; i++)
{
    var jsE = document.createElement('script');
    var url = jsLinks[i];
    jsE.setAttribute('type', 'text/javascript');
    jsE.setAttribute('src', url);
    document.getElementsByTagName('head').item(0).appendChild(jsE);
}

I didn't test my code, But I hope my idea is explained well.

Best

Edit 1: yes you can use Gatekeeper solution for JS (Very Simple), but it use "write" but "for me" I don't like that way :)

Lightbeard · Accepted Answer · 2016-06-05 01:45:42Z

0

This is now possible as follows with HTML Imports which are in W3C draft

<link rel="import" href="import.html">

import.html

<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
<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>

At this time only Chrome, Android and Opera support HTML Imports natively, but WebComponents provides a very mature polyfill script called webcomponents-lite.js to support all modern browsers

answered Jun 5, 2016 at 1:45

Lightbeard

4,13110 gold badges52 silver badges60 bronze badges

Collectives™ on Stack Overflow

Group of CSS and JS files import at HTML?

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related