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

Question

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

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

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

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

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

Благодаря

PS: Абсолютно не имеет значения, но Firefox, кажется, думает, что «поддатливость» не слово, но «биоразложению» (с приставкой «био») есть. Weird ...

Answer 1

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

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

Таким образом, вы уверены, что ваш css tooltip effect не противоречит вашему эффекту JQuery.

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

a.info:hover span{ display:none} 

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

Вы также можете сделать это adding css rule on the fly:

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); 
    } 
} 

---

Самым простым решением для Separation of CSS and 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 в объекте о.
add
добавляет класс c1 к объекту o.
remove
удаляет класс c1 с объекта o.
check
проверьте, если класс c1 уже применяется к объекту o и возвращает true или false.

Answer 2

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

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

Answer 3

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

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

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