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

Improve this question
3
  • 1
    By doing this you win a HTTP Request, but the visual rendering will be slower, because the CSS first will be applied when the Javascript is executed. Commented Feb 12, 2010 at 15:26
  • @Allan Kimmer Jensen - but in sifr no use of sifr.css till execution of sifr.js and config.js Commented Feb 12, 2010 at 15:39
  • There's almost certainly not a good reason to do this. Commented Feb 14, 2010 at 21:06

5 Answers 5

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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

Improve this answer

3 Comments

but is it accessible, selectable, gracefully degrade
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 unitinteractive.com/blog/2008/06/26/better-css-font-stacks under "Paragraphs" bullet point 2 "Fit".
Definitely the way to go in 2011. Not to mention sIFR was a pain in the ass to implement...
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)

Improve this answer

2 Comments

By typing them into my answer.
I mean how, can u give more details?
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.

Improve this answer

2 Comments

but then it will take 2 http request
@Jitendra yes but only if it needs to.
0

You could use something like smartoptimizer or php speedy.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.