Изящная Деградация jQuery

StackOverflow https://stackoverflow.com/questions/308076

Вопрос

Я хочу украсить некоторые области моего веб-сайта несколькими анимациями jQuery здесь и там, и я собираюсь полностью заменить свой AJAX-код, поскольку у моего существующего кода есть некоторые проблемы с кроссбраузерной совместимостью.Однако, поскольку jQuery - это библиотека JavaScript, я беспокоюсь о том, что мои страницы не будут функционировать корректно, когда JavaScript отключен или не существует в браузере пользователя.

Я приведу пример:В настоящее время я использую чистую всплывающую подсказку CSS, чтобы предоставить моим пользователям (игрокам, сайт представляет собой браузерную игру) информацию о других пользователях.Например, если другие игроки в игре удовлетворяют одному или нескольким условиям, рядом с их именем отображается значок цели, и при наведении курсора мыши на этот значок цели отображается информация о причинах, стоящих за целью.Это полезная информация, поскольку она помогает моим игрокам понять, кого им следует планировать атаковать следующим в игре.

В настоящее время я делаю такие всплывающие подсказки с помощью CSS.У меня есть родительский div, который содержит изображение целевого значка класса "info".Затем у меня есть div внутри этого с классом "tooltip", который при наведении курсора на класс "info", в котором он содержится, отображается, но в обычном состоянии скрыт.Я подумал, что это довольно умно, когда прочитал об этом, и поскольку JavaScript не используется, он работает в любом браузере, совместимом с CSS.

Я хотел бы использовать jQuery для достижения того же эффекта, главным образом потому, что это выглядело бы намного чище, но также и потому, что я считаю, что быстрая и тонкая анимация может сделать такие вещи, "случайно появляющиеся", намного более понятными для пользователя, особенно при первом знакомстве.Мне просто интересно, будут ли эти два понятия конфликтовать.Это только один пример этого, существует множество других примеров, когда невозможность использовать JavaScript препятствовала бы работе сайта.

Итак, я думаю, что я спрашиваю, как заставить сайт jQuery изящно деградировать в браузерах, которые не поддерживают JavaScript, но в остальном делай поддерживаете большинство CSS?Моя цель состоит в том, чтобы сайт функционировал на базовом уровне для всех пользователей, независимо от выбора браузера.Анимация - хороший пример, но я также беспокоюсь о более динамичных элементах, таких как автоматическое обновление с помощью AJAX и т.д.Существуют ли какие-либо хорошие ресурсы о том, как достичь этого, или у вас есть какие-либо советы о наилучшем способе достижения такой разлагаемости?

Спасибо

PS:Совершенно неуместно, но Firefox, похоже, считает, что "разлагаемость" - это не слово, а "биоразлагаемость" (с префиксом "био").Странно...

Это было полезно?

Решение

Если вы рассматриваете "Каскадный порядок" css, не могли бы вы просто добавить css-стиль в самом конце всего вашего предыдущего определения css, чтобы отменить любой css-эффект, который у вас сейчас есть для эффекта всплывающей подсказки ?

Это правило css будет объявлено только в том случае, если Javascript активирован и обнаружен jQuery.

Таким образом, вы уверены, что ваш эффект всплывающей подсказки css не противоречит вашему эффекту jQuery.

Что - то вроде:

a.info:hover span{ display:none}

с использованием класса "js_enabled", чтобы сделать это правило css условным.

Вы также можете сделать это с помощью добавление css-правила "на лету":

function createCSSRule(rule,attributes)
{
    //Create the CSS rule
    var newRule = "\n"+rule+"{\n";
    for (var attribute in attributes)
    {
        newRule += "\t" + attribute + ": " + attributes[attribute] + ";\n";
    }
    newRule += "}\n";

    //Inject it in the style element or create a new one if it doesn't exist
    styleTag = $E('style[type="text/css"]') || new Element("style").setProperty('type','text/css').injectInside(document.head);
    if(window.ie)
    {
        styleTag.styleSheet.cssText += newRule;
    }
    else
    {
        styleTag.appendText(newRule);
    }
}

Самое простое решение для Разделение CSS и Javascrip состоит в том , чтобы удалите свой css-класс

function jscss(a,o,c1,c2)
{
  switch (a){
    case 'swap':
      o.className=!jscss('check',o,c1)?o.className.replace(c2,c1): <-
      o.className.replace(c1,c2);
    break;
    case 'add':
      if(!jscss('check',o,c1)){o.className+=o.className?' '+c1:c1;}
    break;
    case 'remove':
      var rep=o.className.match(' '+c1)?' '+c1:c1;
      o.className=o.className.replace(rep,'');
    break;
    case 'check':
      return new RegExp('\\b'+c1+'\\b').test(o.className)
    break;
  }
}

Этот пример функции принимает четыре параметра:

a
определяет действие, которое вы хотите выполнить с помощью функции.
o
объект, о котором идет речь.
c1
название первого класса
c2
название второго класса

Возможными действиями являются:

swap
заменяет класс c1 классом c2 в объекте o.
add
добавляет класс c1 к объекту o.
remove
удаляет класс c1 из объекта o.
check
проверьте, применен ли класс c1 уже к объекту o и возвращает ли он true или false.

Другие советы

Если что-то может быть сделано полностью в CSS, я говорю, оставляйте это таким образом.Если вас беспокоит отсутствие javascript в браузере, то большую часть времени я показываю всю страницу без изменений.

Скажем, например, я собираюсь использовать jQuery для переключения элемента при нажатии на флажок.При загрузке страницы я смотрю на флажок и соответствующим образом обновляю элемент.Если javascript не включен, элемент все равно появится, и сайт по-прежнему будет доступен.Просто не такой приятный.

Чувак, у тебя ведь браузерная игра, верно?У вас менее 1% пользователей с отключенным js!И этот 1% - апокалиптическое число, потому что я могу поспорить, что у вас их меньше ;)

В любом случае, если вы действительно обеспокоены этим, просто создайте сайт без какого-либо javascript.И сделайте его функциональным на 100%.После того, как ваш сайт заработает полностью без какой-либо js-составляющей, просто начните улучшать его с помощью jquery (или любой другой библиотеки; jquery - лучшая : P ).Но с осторожностью:не изменяйте никому из вас html.Это проще, чем кажется ;)

И да, если у вас есть вещи, которые работают без js (например, эти всплывающие подсказки), сохраните их!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top