2010-02-12 5 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-запрос, но визуальный рендеринг будет медленнее, потому что сначала CSS будет применяться при выполнении Javascript. –

+0

@Allan Kimmer Jensen - но в sifr не используется sifr.css до исполнения sifr.js и config.js –

+0

Для этого почти наверняка нет веской причины. – annakata

ответ

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

как вы можете дать более подробную информацию? –

+6

Набрав их в свой ответ. – SLaks

+0

Я имею в виду, как, вы можете дать более подробную информацию? –

0

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

+0

, но тогда потребуется 2 запроса http –

+0

@ Jitendra да, но только если это необходимо. – corymathews

2

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

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

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

Он работает во всех браузерах, как описан в этой статье, HTTP: // Пол Айриш .com/2009/пуленепробиваемый-шрифты лицо от реализации синтаксис/и, как показано в этой тестовой странице 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.

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

+0

, но доступен ли, можно выбрать, грамотно деградировать –

+1

Да, да, и да. На самом деле это гораздо лучшее решение sIFR, потому что конечный пользователь не нуждается в JS или Flash, чтобы видеть шрифты. И это весь живой текст, как если бы конечный пользователь установил ваш шрифт на свой компьютер. Единственная проблема с грациозным ухудшением состоит в том, что резервные шрифты в вашем стеке шрифтов соответствуют шкале встроенного шрифта, как описано в http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ под «Пункты», пункт 2 «Подгонка». – timrwood

+0

Определенно, путь в 2011 году. Не говоря уже о том, что sIFR была болью в заднице, чтобы реализовать ... – Capsule

3

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

+0

Извините, stackoverflow не позволит мне правильно отправлять комментарии CSS. Но это то же самое, что вы используете для размещения комментариев внутри HTML-кода. Я должен был добавить пространство раньше! чтобы он появился. –