Link to procedurally generated CSS as if it were an external file?

Question

I'm using JavaScript to generate the text for a CSS file at runtime. I know that I can add this CSS to the HTML document by enclosing it in <style> tags, but it's a large file and my code would be less messy if it were to link to it as an external resource. Is it possible to link to a CSS file generated at runtime? There is no server involved and this must be done client-side.

Mess in generated (not source) code? You can put this style into ` — pavel, Jul 23 '14 at 06:55
yes just try to add the css inside the `` tag inside your page. — Kawinesh S K, Jul 23 '14 at 06:56
That's what I'll do if there is no way to do this, but it's a very large file and I would like to avoid this if possible. — Keavon, Jul 23 '14 at 06:57
If you want to create a stylesheet that allows the use of variables and dynamic logic, use [LESS](http://lesscss.org/) or [SASS](http://sass-lang.com/). Using JS to 'create' a stylesheet sounds rather hacky. — Rory McCrossan, Jul 23 '14 at 06:59
@RoryMcCrossan I have my reasons. I was just giving some background for the question, really. — Keavon, Jul 23 '14 at 07:00
@Keavon no problem, just letting you know about possible alternatives :) — Rory McCrossan, Jul 23 '14 at 07:02
To link a stylesheet, you will want to precompile your CSS file. Is there any reason your colors are stored as JSON? — adu, Jul 23 '14 at 07:10
@adu There is an in-depth reason behind it (it has to do with custom color palettes loaded as packages for a desktop app) but it's not relevant to this question. I have deleted that sentence meant to establish background as it seems to be leading comments off-course. — Keavon, Jul 23 '14 at 08:01
When you say "generate" what exactly do you mean? If there are going to be finite style changes then it might be worth writing them as separate CSS classes, and then changing the class of the objects that refer to them. Though if it is more complex, your best bet is probably adding it in ` — SCB, Jul 23 '14 at 08:21
@SCB By generate, I mean generate the text for a CSS file (clarified in edit). Basically it's all the text you would find in a CSS file, but not saved to the file system. — Keavon, Jul 23 '14 at 09:25
@Keavon -- So **there is no external file**? In that case, this is a duplicate and you should fix your title which is slightly misguiding (http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply). If not, then you need to **clarify in the question** what you mean. Right now, this looks like a duplicate. — Casey Falk, Jul 23 '14 at 17:53
@CaseyFalk I have clarified the question a little bit. I'm referring to linking to it *as it* if were an external file. The ultimate goal is similar to that question, but it's different in that I am specifically asking if it's possible to link to it as an external file without adding it with ` — Keavon, Jul 23 '14 at 19:36

adu · Answer 1 · 2014-07-24T06:27:50.723

0

Disclaimer: I will update this answer as the question is refined.

EDIT

It sounds like you are doing everything locally. In this case, it is not possible to write to your file system from scripts (like JavaScript) running in the browser (largely enforced for security reasons). While you can link and load CSS files from your local machine, you cannot write to them.

OLD ANSWER

You have a couple options, but I am most interested in what environment you are working in. The assumptions are in bold.

JSON color file stored on server: You should be generating this stylesheet on the server-side, and serving it up to your client. This involves creating a route (URL) to access the dynamically generated stylesheet, outputting formatted CSS (not too hard), and setting the headers with the correct MIME types. How you do the last part varies based on your server implementation (Node.js vs. PHP vs. etc.)

Can generate stylesheet only on client side (no server): In this case, assuming you do not have access to a server, but you can fetch your JSON color file (from somewhere, I guess), you really have no stylesheet resource to link to. This really limits optimization potential in terms of cacheing, etc.

Your only real option here is to create and populate the stylesheet in the browser. There is a decent article on how to do that here: Add Rules to Stylesheets with JavaScript

edited Jul 24 '14 at 06:27

answered Jul 23 '14 at 17:37

adu

947
1
8
15

"Your *only real option* here..." Hmmmm... That is not true. (see http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply) – Casey Falk Jul 23 '14 at 17:50
Also note that OP says the "external file" is "... the text you would find in a CSS file, but **not saved to the file system**." So I don't think loading a JSON file is the right path for what they're looking for (but definitely a possibility). – Casey Falk Jul 23 '14 at 17:56
Okay, here's some clarification: There is no server involved. The JSON file is loaded from a local file and used to generate the text of a CSS file. The second section is the case for me, but that link says to use the ` – Keavon Jul 23 '14 at 19:42
@CaseyFalk we linked to very similar approaches. Also a `JSON` file with colors was mentioned in previous versions of the edited question. – adu Jul 24 '14 at 06:30

score -1 · Answer 2 · answered Jul 23 '14 at 10:40

-1

Have you tried this-

 loadCssFile = function(fileName) {
 var cssLink = $("<link rel='stylesheet' type='text/css' href='"+fileName+"'>");
 $("head").append(cssLink);

};

 // load the css file

loadCssFile("style.css");

answered Jul 23 '14 at 10:40

Pav

1,156
1
7
10

I thought you wanted a way to load a external css file? Is it not what you need - adding a css file dynamically to your page? – Pav Jul 23 '14 at 10:54
There is no file path; the CSS is generated at runtime. – Keavon Jul 23 '14 at 19:46

Link to procedurally generated CSS as if it were an external file?

2 Answers2