Dégradation gracieuse jQuery

Question

Je souhaite agrémenter certaines zones de mon site Web avec quelques animations jQuery ici et là, et je cherche à remplacer mon code AJAX dans la mesure où mon code existant présente des problèmes de compatibilité entre navigateurs. Cependant, jQuery étant une bibliothèque JavaScript, je crains que mes pages ne fonctionnent pas correctement lorsque JavaScript est désactivé ou n'existe pas dans le navigateur de l'utilisateur.

Je vais donner un exemple: à l’heure actuelle, j’utilise une infobulle CSS pure pour donner à mes utilisateurs (les joueurs, le site est un jeu par navigateur) des informations sur les autres utilisateurs. Par exemple, si les autres joueurs du jeu satisfont à une ou plusieurs conditions, une icône de cible est affichée à côté de leur nom et, lorsque vous la survolez, les informations concernant les raisons derrière la cible sont affichées. C'est une information utile, car elle aide les joueurs à savoir à qui ils doivent s'attendre dans le prochain match.

Actuellement, je fais de telles info-bulles en utilisant CSS. J'ai un div parent qui contient l'image de l'icône cible de la classe "info". J'ai alors une div à l'intérieur de celle-ci avec la classe " tooltip " que, dans l'état de survol de la " info " La classe dans laquelle il est contenu s'affiche, mais son état normal est masqué. J'ai trouvé que c'était plutôt intelligent quand j'ai lu à ce sujet, et comme aucun JavaScript n'est utilisé, cela fonctionne sur n'importe quel navigateur compatible CSS.

Je voudrais utiliser jQuery pour obtenir le même effet, principalement parce que cela aurait l'air beaucoup plus propre, mais aussi parce que je pense que des animations rapides et subtiles peuvent faire apparaître de telles choses "de manière aléatoire". beaucoup plus logique pour l'utilisateur, en particulier lors de la première rencontre. Je me demande simplement si les deux vont entrer en conflit. Ce n’est qu’un exemple, il existe de nombreux autres exemples où l’incapacité à utiliser JavaScript entraverait la navigation sur le site.

Donc, ce que je demande, je suppose, c'est comment faire en sorte qu'un site jQuery se dégrade gracieusement sur des navigateurs qui ne prennent pas en charge JavaScript, mais sinon, prend en charge la plupart des CSS. Mon objectif est que le site fonctionne au niveau de base pour tous les utilisateurs, quel que soit le choix du navigateur. L'animation est un bon exemple, mais je m'inquiète également des éléments les plus dynamiques, tels que la mise à jour automatique avec AJAX, etc. Existe-t-il de bonnes ressources pour y parvenir ou avez-vous des conseils sur la meilleure façon de procéder? une telle dégradabilité pourrait être atteinte?

Merci

PS: totalement dépourvu de pertinence, mais Firefox semble penser que "dégradabilité" n'est pas un mot, mais "biodégradabilité" (avec le préfixe "bio") est. Bizarre ...

Answer 1

Si vous considérez le " Ordre en cascade " css, ne pourriez-vous pas simplement ajouter un style css à la toute fin de votre définition css précédente afin d'annuler tout effet css que vous avez actuellement pour l'effet infobulle?

Cette règle css ne serait déclarée que si Javascript était activé et si JQuery était détecté.

De cette manière, vous êtes certain que votre effet d'infobulle CSS ne soit pas en conflit avec votre JQuery. effet.

Quelque chose comme:

a.info:hover span{ display:none}

avec l'utilisation de " js_enabled " classe pour rendre cette règle css conditionnelle.

Vous pouvez également le faire en en ajoutant la règle CSS à la volée :

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

La solution la plus simple pour la séparation de CSS et de Javascrip consiste à < strong> supprime votre classe 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;
  }
}

Cet exemple de fonction utilise quatre paramètres:

a
    définit l'action que vous souhaitez que la fonction exécute.
o
    l'objet en question.
c1
    le nom de la première classe
c2
    le nom de la deuxième classe

Les actions possibles sont les suivantes:

swap
    remplace la classe c1 par la classe c2 dans l'objet o.
add
    ajoute la classe c1 à l'objet o.
supprimer
    supprime la classe c1 de l'objet o.
vérifier
    teste si la classe c1 est déjà appliquée à l'objet o et renvoie true ou false.

Answer 2

Si quelque chose peut être fait complètement en CSS, je dis de le garder de cette façon. Si le manque de javascript dans le navigateur est une préoccupation, la plupart du temps, je ne montre pas la totalité de la page.

Disons par exemple que je vais utiliser jQuery pour basculer un élément quand une case à cocher est cochée. Au chargement de la page, je regarde la case à cocher et met à jour l'élément en conséquence. Si javascript n'est pas activé, l'élément apparaîtra toujours et le site sera toujours utilisable. Mais pas aussi bien.

Answer 3

Homme, vous avez un jeu basé sur un navigateur, non? Vous avez moins de 1% d'utilisateurs avec js désactivé! Et ce 1% est le nombre apocalyptique, parce que je peux parier que vous avez moins que cela;)

Quoi qu'il en soit, si cela vous préoccupe vraiment, il vous suffit de faire le site sans javascript. Et le rendre fonctionnel à 100%. Une fois que votre site fonctionne complètement sans aucune saveur Js, commencez simplement à vous améliorer avec jquery (ou toute autre bibliothèque; jquery est la meilleure: P). Mais avec prudence: ne changez AUCUN de vous html. C'est plus facile qu'il n'y paraît;)

Et oui, si vous avez des choses qui fonctionnent sans js (comme ces info-bulles), conservez-les!