3

I was wondering how I can call multiple external css files at once instead of calling each individually. I want to do that to avoid the request number and minimize it to one per multiple external css files.

I tired the following, but didn't work!!

<link rel="stylesheet" href=" http://statics.mydomain.co/style.css,functionstyle.css,widgets.css,edges.css,options.css,tags.css" type="text/css">

I thought it is a lot easier than that!!

any idea what I'm missing here!!!

Digital site
  • 4,431
  • 12
  • 48
  • 72
  • 2
    I'm pretty sure you need to do them one at a time. – Smeegs Jul 02 '13 at 18:19
  • What is the idea behind one request? Shouldn't you instead consider consolidating the style-sheet if that is all you want? – Learner Jul 02 '13 at 18:27
  • 1
    @Learner From a development standpoint, breaking up the style sheets based on what component they control is easier. However, for performance reasons, a single style sheet is better as the number of requests that can be made at once is limited (more style sheets = less other stuff that can be downloading at the same time). – cimmanon Jul 02 '13 at 18:29
  • The thing is that some styles I use in different pages so I want to include some css to an html page and different ones to other pages... – Digital site Jul 02 '13 at 18:29

5 Answers5

2

In order to do what you're doing, you are going to need some kind of server side script that combines.

Alternatively, just combine them all manually or use something like grunt to combine them all.

kalley
  • 18,072
  • 2
  • 39
  • 36
2

Two options.

1. Css @import

@import url(stylesheet.css);

See documentation.

NOTE!: The browser actually does make multiple calls here, it is just hidden from the HTML

2. PHP

Use minify to shrink, cache, and combine your CSS/JS files.

Here is a minify tutorial

Here is a list of more compression tools.

Dan Grahn
  • 9,044
  • 4
  • 37
  • 74
  • good point, but would combining all css files to one make things worse on the page load for example since the size matter to browser upload vs time...!! – Digital site Jul 02 '13 at 18:32
  • 1
    @Digitalsite I'm not sure what you're asking, but minifying is a pretty standard production procedure. Generally it's done once and stored as a static css file. – Dan Grahn Jul 02 '13 at 18:39
1

Once you have sorted out all the CSS rules and you are ready to go into production, you should combine all your CSS files into a single file and then minify it.

You can then link to a single file from your pages.

As a start, read the previous question, it has some useful references:

Any recommendations for a CSS minifier?

Community
  • 1
  • 1
Marc Audet
  • 46,011
  • 11
  • 63
  • 83
1

You can use the @import statement inside your 'master' css, to make it include multiple files at once. All you would have to do is link to your one master file in your HTML.

However, this will not limit your requests. As long as they are separate files, you will have to do separate requests.

For real performance improvement you would have to merge the files into one bigger file. There are some good tools out there. I prefer LESS, which is a precompiler that does lots more, but can also merge multiple files into one (minified) master css

Pevara
  • 14,242
  • 1
  • 34
  • 47
  • The `@import` statement in CSS does not avoid making multiple HTTP requests, which the OP specifically wants to avoid. In fact, using `@import` is arguably worse than including them individually via ``. – cimmanon Jul 02 '13 at 18:25
  • @cimmanon, quote myself: `However, this will not limit your requests. As long as they are separate files, you will have to do separate requests.` – Pevara Jul 02 '13 at 18:26
1

Even if you can minimize your html code to only one line, the client has to load them all individually 'cause they still are in different files on the server.

If you want to combine the Styles into one file just do it manually or on server-side.

Furthermore you could minify your CSS with an online tool to make the file's size smaller.

Atrox111
  • 527
  • 4
  • 17