I've been thinking about something. On my forum, there are default CSS codes that the users can choose from. This changes everything from background to text color. I have a javascript code. Is it possible to make it so that the javascript is part of the CSS, so that if a certain CSS code is defaulted, then part of it is that javascript?

I've been thinking about something. On my forum, there are default CSS codes that the users can choose from. This changes everything from background to text color. I have a javascript code. Is it possible to make it so that the javascript is part of the CSS, so that if a certain CSS code is defaulted, then part of it is that javascript?

• javascript
• css
• templates

3 Answers 3

You can, but you really ought not to. Instead, use separate script files which happen to correspond to the CSS files you use. Maybe ask another question where you lay out a specific scenario where you're trying to solve a specific problem, and we can probably tell you the practice that's generally done to solve it.

There is a work around...

It not putting script in pure CSS code, but have a script to generate CSS Depending what scripting language you are using (eg PHP) your link to CSS file should look like:

<link href="/styles.php" media="screen" rel="stylesheet" type="text/css" />

you can even add params like:

<link href="/styles.php?type=main" media="screen" rel="stylesheet" type="text/css" />

and in you styles.php what should look like CSS file with a few exceptions:

body {
     <?php if ( $_GET['type'] == 'main' ) echo color: BLACK; else color: RED; ?>
  ......... 
}

I wanted to accomplish the same thing (have variables and some processing logic in CSS) that egged me to develop a couple of standalone tools (one Angular and one V-JS):

• CjsSS.js is a Vanilla Javascript tool (so no external dependencies) that supports back to IE6.

• ngCss is an Angular Module+Filter+Factory (aka: plugin) that supports Angular 1.2+ (so back to IE8)

Both of these tool sets allow you to do this in a STYLE tag or within an external *.css file:

/*
<script src='external_logic.js'></script>
<script>
    var mainColor = "#cccccc";
</script>*/

BODY {
    color: /*{{mainColor}}*/;
}

And this in your on-page style attributes:

<div style="color: {{mainColor}}" cjsss="#sourceCSS">blah</div>

(or for ngCss)

<div style="color: {{mainColor}}" ng-css="sourceCSS">blah</div>

NOTE: In ngCss, you could also do $scope.mainColor in place of var mainColor

By default, the Javascript is executed in a sandboxed IFRAME, but really it's not any different from how the browser processes your *.js files. Just be sure to author your own CSS and host it on your own server then XSS isn't an issue. But the sandbox provides that much more security and peace of mind.

CjsSS.js and ngCss fall somewhere in-between the other tools around to accomplish similar tasks:

• LESS, SASS and Stylus are all Preprocessors only and require you to learn a new language and mangle your CSS. Basically they extended CSS with new language features. All are also limited to plugins developed for each platform while CjsSS.js and ngCss both allow you to include any Javascript library via <script src='blah.js'></script>.

• AbsurdJS saw the same problems with the Preprocessors and went the exact opposite direction; rather than extending CSS, AbsurdJS created a Javascript library to generate CSS without touching CSS directly.

CjsSS.js and ngCss took the middle ground; you already know CSS, you already know Javascript, so just let them work together in a simple, intuitive way. CjsSS.js can be run server-side (via Node.js) to preprocess the CSS or both can be run client-side. You can also run in a hybrid fashion where most variables are preprocessed and the remaining are done on the client-side.