2010-02-12 63 views
1

我們可以將css和javascript結合成一個嗎?我想爲sIFR做這個。因爲sifr具有.js和.css文件,並且沒有啓用js,所以不能使用任何文件css或js。我們可以將css和javascript結合成一個JavaScript文件嗎?

我想將所有與sIFR相關的文件合併爲一個組合的javascript文件。

所以在最後我會只有2個文件

  1. font.swf

  2. sifr3.js(它擁有所有的東西)

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

+1

通過這樣做,您贏得了HTTP請求,但是可視化渲染速度會變慢,因爲在執行Javascript時首先會應用CSS。 – 2010-02-12 15:26:16

+0

@Allan Kimmer Jensen - 但是在sifr中沒有使用sifr.css直到執行sifr.js和config.js – 2010-02-12 15:39:27

+0

這樣做幾乎沒有什麼好的理由。 – annakata 2010-02-14 21:06:02

回答

1

你可以把你的CSS放入一個Javascript字符串,然後創建一個STYLE eleme nt在Javascript中。

例如:(使用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文件,刪除評論,並刪除所有的雙空格和所有換行符)

+0

你能提供更多細節嗎? – 2010-02-12 14:11:30

+6

通過在我的答案中鍵入它們。 – SLaks 2010-02-12 14:19:17

+0

我的意思是,你能提供更多細節嗎? – 2010-02-12 14:57:38

0

您可以將它們保存爲單獨的文件,並使用Javascript將CSS寫入頁面。然後,只有啓用javascript時纔會顯示CSS。

+0

但它會採取2 http請求 – 2010-02-12 14:58:26

+0

@Jitendra是的,但只有當它需要。 – corymathews 2010-02-12 17:25:46

2

或者,您可以完全擺脫sIFR並使用css @ font-face。

這是一個@ font-face生成器,可以將字體轉換爲不同瀏覽器(IE和Chrome)的不同格式,如果不需要整個字符集,甚至可以創建字體的子集。

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

它可以在所有的瀏覽器,如本文所描述的http:// paulirish的.com/2009 /防彈字體面的實現語法/和證明這個測試頁面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。

(遺憾的是,鏈接,所以不會讓我發佈多個,直到我獲得更高的聲譽)。

+0

但它是可訪問的,可選的,優雅地降級 – 2010-02-12 18:24:20

+1

是的,是的,是的。 它實際上是一個更好的解決方案,因爲最終用戶不需要啓用JS或Flash來查看字體,所以sIFR更好。並且它都是實時文本,就好像最終用戶在他們的計算機上安裝了您的字體一樣。 正常降級的唯一問題是讓字體堆棧中的備用字體與嵌入字體的比例相匹配,如http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/中所述「段落」第2點「適合」。 – timrwood 2010-02-12 18:37:31

+0

絕對是在2011年的路。更何況sIFR是一個痛苦的屁股實施... – Capsule 2011-04-21 12:34:00

3

是的,你可以。如果你用CSS註釋(<! - - >)註釋掉你的JavaScript代碼並用Javascript註釋評論CSS(/ * * /),你可以在同一個文件中包含CSS和JS。你必須在頁面上包含兩次文件,一次是JavaScript,一次是CSS。
當你把你的文件作爲一個javascript包含時,JS引擎將忽略CSS註釋並處理JS代碼就好了,反之亦然。以下是描述該過程的文章的link

+0

對不起,stackoverflow不會讓我張貼CSS評論正確。但是,您使用HTML代碼進行評論也是一樣的。我不得不增加空間!讓它出現。 – 2010-02-14 21:05:39

相關問題