Можно ли применить некоторые CSS только для пользователей с отключенным Javascript?

Question

Название в значительной степени говорит о том, что я собираюсь сделать, но чтобы уточнить немного, я хочу применить немного CSS к классу с именем prochart-colitem для пользователей, у которых не включен javascript.

причина? Я использую проценты для ширины столбца, равные 100%, а затем использую javascript, чтобы вычесть 2 пикселя из каждого div для границы, которая также добавляется.

Если не включен javascript, столбцы + границы равны более чем 100% родительского div, и мне нужно вычесть пару пикселей из класса, чтобы он поместился в родительском div для пользователей no-js.

Есть ли простой способ сделать это? Я попытался <noscript> с <style> внутри, не повезло.

Answer 1

Один из способов добиться этого - всегда добавлять класс CSS к элементам, для которых вы хотите иметь определенный стиль, а затем, после загрузки, запустить JavaScript, чтобы удалить эти классы из элементов этого класса.

В качестве примера (я использую jQuery здесь для простоты, но, очевидно, это можно сделать без библиотеки JS):

$(document).ready(function()
{
  $(".nonJsClass").each(function()
  {
    $(this).removeClass("nonJsClass");
  }
}

Там, где в nonJsClass есть правила CSS, которые теперь будут применяться только в том случае, если у пользователя не включен JS.

Answer 2

Вы можете добавить класс к тегу body, который запускает нужный вам CSS, когда JS не включен, а затем сразу после тега body удалите его с помощью JS.

Таким образом, пользователи с поддержкой JS не будутувидеть эффекты специального класса.

Answer 3

Включение таблицы стилей в тег noscript было невозможно до HTML5, но теперь это возможно (если вы делаете это в «заголовке» документа).

http://adapt.960.gs/

В случае, если JavaScript преднамеренно отключен или недоступен, по умолчанию можно использовать значения по умолчанию для таблиц стилей, что совершенно справедливо для HTML5.

Answer 4

Ответ Скунлиффа хорош. Альтернативным способом было бы написать стиль CSS, который будет отображаться только в том случае, если включен JavaScript, и предназначен только для нужного вам div, используя цепочку классов:

.prochart-colitem.js-enabled {
     /* your JS-specific styles */
}

Затем вы можете использовать jQuery, например, чтобы добавить этот дополнительный класс:

$(document).ready(function() {
    $('.prochart-colitem').addClass('js-enabled');

});