我们可以将css和javascript合并到一个javascript文件中吗?

时间:2010-02-12 13:56:00

标签: javascript css xhtml sifr sifr3

我们可以将css和javascript结合成一个吗?我想为sIFR做这个。因为sifr有.js和.css文件,没有启用js,不使用任何文件css或js。

我想将所有与sIFR相关的文件合并到一个组合的javascript文件中。

所以最后我只有2个文件

  1. font.swf

  2. sifr3.js(其中包含所有内容)

  3. 这是最新的sIFR 3 http://dev.novemberborn.net/sifr3/nightlies/sifr3-r436.zip

5 个答案:

答案 0 :(得分:3)

是的,你可以。如果您使用CSS注释(<! - - >)注释掉您的JavaScript代码并使用Javascript注释(/ * * /)注释CSS,则可以在同一文件中包含CSS和JS。您必须在页面上包含两次文件,一次作为JavaScript,一次作为CSS 当您将文件包含为javascript时,JS引擎将忽略CSS注释并处理JS代码就好了,而另一种方式是CSS。这是描述该过程的文章的link

答案 1 :(得分:2)

或者,您可以完全摆脱sIFR并使用css @ font-face。

这是一个@ font-face生成器,可以将您的字体转换为不同浏览器(IE和Chrome)的不同格式,如果您不需要整个字符集,甚至可以创建字体的子集。

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

它适用于所有浏览器,如本文所述:http:// paulirish .com / 2009 / bulletproof-font-face-implementation-syntax /,如本测试页中所示:http:// dl.dropbox .com /u/39519/webfontsdemo/index.html。

我在Windows XP上测试过IE5.5 6 7 8,FF3.6,Chrome 4.0.249.89和Safari 4.0.4。

(对于这些链接感到抱歉,在获得更高声誉之前,我不会发布多个帖子。)

答案 2 :(得分:1)

您可以将CSS放入Javascript字符串中,然后在Javascript中创建STYLE元素。

例如:(使用jQuery)

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

对于sIFR3,你会写

$('<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'));

(获取CSS文件,删除注释,并删除所有双空格和所有换行符)

答案 3 :(得分:0)

您可以将它们保存为单独的文件,并让Javascript将css写入页面。然后只有在启用了javascript时才会显示CSS。

答案 4 :(得分:0)

您可以使用smartoptimizerphp speedy之类的内容。