1

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

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

5 Answers5

3

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.

Ilya Volodin
  • 10,929
  • 2
  • 45
  • 48
  • Sorry, stackoverflow will not let me post CSS comments correctly. But it's the same thing you use to put comments inside HTML code. I had to add space before ! to get it to show up. – Ilya Volodin Feb 14 '10 at 21:05
2

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

timrwood
  • 10,611
  • 5
  • 35
  • 42
  • but is it accessible, selectable, gracefully degrade – Jitendra Vyas Feb 12 '10 at 18:24
  • 1
    Yes, yes, and yes. It's actually a much better solution that sIFR because the end user doesn't need JS or Flash enabled to see the fonts. And it's all live text, as if the end user had your font installed on their computer. The only issue with graceful degradation is having the fallback fonts in your font stack match the embedded font's scale as described in http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ under "Paragraphs" bullet point 2 "Fit". – timrwood Feb 12 '10 at 18:37
  • Definitely the way to go in 2011. Not to mention sIFR was a pain in the ass to implement... – Capsule Apr 21 '11 at 12:34
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)

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
0

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.

corymathews
  • 12,289
  • 14
  • 57
  • 77
0

You could use something like smartoptimizer or php speedy.

Knu
  • 14,806
  • 5
  • 56
  • 89