Рассмотрим на примере

We use cookies. Read the Privacy and Cookie Policy

Рассмотрим на примере

<!-- /*

function t(){}

<!-- */

<!-- body { background-color: white; }

Когда анализатор CSS будет разбирать вышеупомянутый код, символы комментария HTML будут пропущены, и код станет эквивалентным следующему примеру:

/*

function t(){}

*/

body { background-color: white; }

Анализатор CSS видит только CSS-код, а код скрипта закомментирован (/* ... */).

Когда анализатор JavaScript станет разбирать код, символы комментария HTML будут интерпретированы в комментарии строки (//), и, следовательно, код станет таким:

// /*

function t(){}

// */

// body { background-color: white; }

Анализатор JavaScript видит только код скрипта, а все остальное закомментировано. Чтобы ссылаться на этот ресурс, можно использовать теги <script> и <link> на странице. Например:

<link type="text/css" rel="stylesheet" href="test.jscss" />

<script type="text/javascript" src="test.jscss"></script>

Заметим, что эти два тега ссылаются на один тот же ресурс и, следовательно, он загрузится всего один раз и будет интерпретирован и как стили, и как скрипты.

Есть еще одна вещь, о которой стоит позаботиться, — Content-Type ответа. Его необходимо выставлять в */*, чтобы дать подтверждение Firefox: содержание может быть обработано как что-либо подходящее (как стили или как скрипты).

Указанное решение не работает в Safari (1-5% пользователей), однако конкретно для этого браузера (определив его через User-Agent) уже можно вставить загрузку еще одного файла.