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

【问题标题】：Can we combine css and javascript into one javascript file?我们可以将 css 和 javascript 合并到一个 javascript 文件中吗？
【发布时间】：2010-02-12 13:56:00
【问题描述】：

我们可以将 css 和 javascript 合二为一吗？我想为 sIFR 做这个。因为 sifr 有 .js 和 .css 文件并且没有启用 js 没有使用任何文件 css 或 js。

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

所以最后我将只有 2 个文件

font.swf
sifr3.js（什么都有）

【问题讨论】：

这样做你赢得了一个 HTTP 请求，但是视觉呈现会更慢，因为在执行 Javascript 时会首先应用 CSS。
@Allan Kimmer Jensen - 但在 sifr 中，在执行 sifr.js 和 config.js 之前不使用 sifr.css
几乎可以肯定没有充分的理由这样做。

标签： javascript css xhtml sifr sifr3

【解决方案1】：

是的，你可以。如果您使用 CSS 注释 () 注释掉您的 JavaScript 代码并使用 Javascript cmets (/* */) 注释 CSS，您可以在同一个文件中包含 CSS 和 JS。您必须在页面上包含两次文件，一次是 JavaScript，一次是 CSS。
当您将文件包含为 javascript 时，JS 引擎将忽略 CSS cmets 并正常处理 JS 代码，而 CSS 则相反。这是描述该过程的文章的link。

【讨论】：

抱歉，stackoverflow 不允许我正确发布 CSS cmets。但这与将 cmets 放入 HTML 代码中的方法相同。我之前必须添加空间！让它显示出来。

【解决方案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。

（对链接感到抱歉，所以在我获得更高声誉之前不会让我发布多个链接）。

【讨论】：

但它是否可访问、可选择、优雅降级
是的，是的，是的。它实际上是一个比 sIFR 更好的解决方案，因为最终用户不需要启用 JS 或 Flash 来查看字体。而且都是实时文本，就好像最终用户在他们的计算机上安装了您的字体一样。优雅降级的唯一问题是字体堆栈中的后备字体与嵌入字体的比例相匹配，如“段落”要点 2“适合”下的 unitinteractive.com/blog/2008/06/26/better-css-font-stacks 中所述。
绝对是 2011 年要走的路。更不用说 sIFR 实施起来很痛苦......

【解决方案3】：

您可以将您的 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 文件，删除 cmets，并删除所有双空格和所有换行符）

【讨论】：

通过将它们输入到我的答案中。
我的意思是如何，你能提供更多细节吗？

【解决方案4】：

您可以将它们保存为单独的文件，并让 Javascript 将 css 写入页面。则 CSS 仅在启用 javascript 时才会出现。

【讨论】：

但是需要 2 个 http 请求
@Jitendra 是的，但前提是需要。

【解决方案5】：

您可以使用 smartoptimizer 或 php speedy 之类的内容。

【讨论】：