Лучшие практики для определения правил CSS с помощью JavaScript - PullRequest
Новая
       9

Лучшие практики для определения правил CSS с помощью JavaScript

1 голос
/ 03 апреля 2010

Я загружаю таблицу стилей, которая требуется только при включенном JavaScript. Более того, он не должен присутствовать, если JavaScript отключен. Я делаю это как можно скорее (в голове), прежде чем какие-либо библиотеки JavaScript загружаются. (Я загружаю все скрипты как можно позже). Код для внешней загрузки этой таблицы стилей прост и выглядит следующим образом: 

var el = document.createElement('link');
el.setAttribute('href','/css/noscript.css');
el.setAttribute('rel','stylesheet');
el.setAttribute('type','text/css');
document.documentElement.firstChild.appendChild(el);

Работает нормально, но все мои CSS-файлы на данный момент содержат: 

.noscript {
    display: none;
}

Это на самом деле не гарантирует загрузку файла, поэтому я думаю просто определить правило динамически в JavaScript. Какая лучшая практика для этого? . Быстрое сканирование различных методов показывает, что для его кросс-браузерного взлома требуется немало.

P.S. pleeease не публиковать примеры JQuery. Это должно быть сделано без библиотек.

1 Ответ

1 голос
/ 03 апреля 2010

Хм. Если сохранение нескольких байтов полосы пропускания не является проблемой, почему бы не загрузить все таблицы стилей, а поставить префикс всех классов в JavaScript с определенным классом: 

body.hasjs a { color: blue }
body.hasjs div.contactform { width: xyz; }

служить телу без этого класса 

<body>

и добавьте крошечный JavaScript, который добавляет имя класса, что-то вроде: 

body.onload = function() {
document.body.className = "hasjs"; 
}

Чтобы ускорить процесс переключения, вы можете посмотреть на одно из собственных решений Javascript onDOMLoad.

...