Можем ли мы объединить CSS и JavaScript в один файл JavaScript?

Question

Можем ли мы объединить CSS и JavaScript в одно? Я хочу сделать это для СИФР. потому что у sifr есть файлы .js и .css и без включенной js не используются никакие файлы css или js.

Я хочу объединить все связанные с sIFR файлы в один объединенный файл javascript.

так что в конце у меня будет только 2 файла

1. font.swf

2. sifr3.js (в котором есть все)

Вот последний SIFR 3 http://dev.novemberborn.net/sifr3/nightlies/sifr3-r436.zip

Answer 1

Да, вы можете. Если вы закомментируете свой код JavaScript с помощью комментария CSS (<! - ->) и прокомментируете CSS с помощью комментариев Javascript (/ * * /), вы можете использовать CSS и JS в одном файле. Вам придется включить файл дважды на странице, один раз как JavaScript, а другой как CSS.
Когда вы включаете свой файл как javascript, движок JS будет игнорировать комментарии CSS и обрабатывать код JS просто отлично, и наоборот для CSS. Вот ссылка на статью, которая описывает процесс.

Answer 2

Или вы можете полностью избавиться от sIFR и использовать css @ font-face.

Вот генератор @ font-face, который преобразует ваш шрифт в разные форматы для разных браузеров (IE и Chrome) и даже создает подмножество вашего шрифта, если вам не нужен весь набор символов.

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

Он работает во всех браузерах, как описано в этой статье http: // paulirish .com / 2009 / bulletproof-font-face-creation-syntax / и как показано на этой тестовой странице http: // dl.dropbox .com /u/39519/webfontsdemo/index.html.

Я тестировал в IE5.5 6 7 8, FF3.6, Chrome 4.0.249.89 и Safari 4.0.4 в Windows XP.

(извините за ссылки, ТАК не позволит мне публиковать более одного сообщения, пока я не получу более высокую репутацию).

Answer 3

Вы можете поместить свой CSS в строку Javascript, а затем создать элемент STYLE в 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, удалите комментарии и удалите все пробелы и все новые строки)

Answer 4

Вы можете использовать что-то вроде smartoptimizer или php speedy .

Answer 5

Вы можете хранить их как отдельные файлы и сделать так, чтобы Javascript записал CSS на страницу. Тогда CSS появится только если javascript включен.