Can we combine css and javascript into one javascript file ?

Question

Can we combine css and javascript into one ? I want to do this for sIFR. because sifr has .js and .css file and without js enabled no use of any file css or js.

i want to combine all sIFR related file into one combined javascript file.

so at end i will have only 2 file

1. font.swf

2. sifr3.js (which has all thing)

Here is latest sIFR 3 http://dev.novemberborn.net/sifr3/nightlies/sifr3-r436.zip

Answer 1

You can put your CSS into a Javascript string, then create a STYLE element in Javascript.

For example: (Using jQuery)

$('<style type="text/css">p { color:red; }</style>').appendTo($('head'));

For sIFR3, you would write

$('<style type="text/css">@media screen {.sIFR-flash { visibility: visible !important; margin: 0; padding: 0;}.sIFR-replaced, .sIFR-ignore { visibility: visible !important;}.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden;}.sIFR-replaced div.sIFR-fixfocus { margin: 0pt;  padding: 0pt;  overflow: auto;  letter-spacing: 0px;  float: none;}}@media print {.sIFR-flash { display : none !important; height: 0; width: 0; position: absolute; overflow: hidden;}.sIFR-alternate { visibility : visible !important; display : block!important; position: static!important; left : auto !important; top: auto !important; width: auto !important; height: auto !important;}}</style>').appendTo($('head'));

(Take the CSS file, remove the comments, and remove all double-spaces and all newlines)

Answer 2

You can keep them as separate files and have Javascript write the css to the page. Then the CSS will only appear if javascript is enabled.

Answer 3

you could use something like smartoptimizer or php speedy

Answer 4

Or, you could completely get rid of sIFR and use css @font-face.

Here is an @font-face generator that will convert your font to different formats for different browsers (IE and Chrome) and even create a sub-set of your font if you don't need the whole character set.

http://www.fontsquirrel.com/fontface/generator

It works in all browsers, as described in this article http:// paulirish .com/2009/bulletproof-font-face-implementation-syntax/ and as demonstrated in this test page http:// dl.dropbox .com/u/39519/webfontsdemo/index.html.

I tested in IE5.5 6 7 8, FF3.6, Chrome 4.0.249.89, and Safari 4.0.4 on Windows XP.

(sorry about the links, SO won't let me post more than one until I get a higher reputation).

Answer 5

Yes you can. If you comment out your JavaScript code with CSS comment (< !-- -->) and comment CSS with Javascript comments (/* */) you can have CSS and JS inside the same file. You'll have to include file twice on the page, once as a JavaScript and once as CSS.
When you include your file as a javascript, JS engine will ignore CSS comments and process JS code just fine, and the other way around for CSS. Here's a link to an article that describes the process.