jQuery Graceful Degradation

Question

Ich möchte einige Bereiche meiner Website mit ein paar jQuery Animationen hier und da, um Fichte, und ich suche meine AJAX-Code vollständig, da meine vorhandenen Code ersetzen einige Cross-Browser-Kompatibilität Fragen. Da jedoch jQuery eine JavaScript-Bibliothek ist, ich mache mir Sorgen um meine Seiten nicht richtig funktioniert, wenn JavaScript deaktiviert oder existiert nicht in den Browser eines Benutzers.

Ich werde ein Beispiel geben: Derzeit bin ich ein reines CSS Tooltip mit meinem Benutzer geben (Spieler, ist die Website ein Browserspiel) Informationen über andere Benutzer. Zum Beispiel, wenn die anderen Spieler im Spiel erfüllen eine oder mehr Bedingungen wird ein Zielsymbol neben ihren Namen angezeigt, und über dieses Zielsymbol Informationen über die Gründe hinter dem Ziel auf schwebt angezeigt wird. Dies ist nützlich, Informationen, wie es meine Spieler hilft zu wissen, wen sie als nächstes im Spiel angreifen will.

Derzeit ich solche Tooltips mit CSS. Ich habe einen Elternteil div, die das Bild des Zielsymbols der Klasse „info“ hält. Ich habe dann ein Div innerhalb derjenigen, die mit Klasse „Tooltip“, dass auf den Schwebezustand der „info“ Klasse, die es in enthalten ist, wird gezeigt, aber auf dem normalen Zustand ist versteckt. Ich dachte, es war ziemlich klug, wenn ich über sie gelesen, und da kein JavaScript verwendet wird, es funktioniert auf jedem CSS-konformen Browser.

Ich möchte jQuery verwenden, um den gleichen Effekt zu erzielen, vor allem, weil es viel sauberer, aussehen würde, sondern auch, weil ich schnell und subtil glaube Animationen solche Dinge machen können „zufällig erscheinen,“ viel mehr Sinn machen, für den Benutzer, vor allem auf der ersten Begegnung. Ich frage mich nur, wenn die beiden in Konflikt stehen. Dies ist nur ein Beispiel dafür gibt es zahlreiche andere Beispiele, bei denen die Unfähigkeit, JavaScript zu verwenden, um die Website behindern würde.

Also, was ich frage ich denke, ist, wie kann man eine jQuery-Website graziös auf Browser degradieren machen, die JavaScript nicht unterstützen, aber ansonsten tun unterstützt die meisten CSS? Mein Ziel ist es für die Website auf einer grundlegenden Ebene für alle Benutzer zu funktionieren, unabhängig von Wahl in Browser. Die Animation ist ein gutes Beispiel, aber ich bin auch besorgt über die dynamischere Bits, wie das Auto-Update mit AJAX usw. Gibt es gute Ressourcen, wie dies zu erreichen, oder haben Sie irgendwelche Ratschläge über die beste Art und Weise solche Abbaubarkeit erreicht werden könnte?

Danke

PS: Völlig irrelevant, aber Firefox scheint zu denken, dass „Abbaubarkeit“ kein Wort, sondern „biologische Abbaubarkeit“ (mit dem „Bio“ Präfix) ist. Seltsam ...

Answer 1

Wenn Sie die „Cascading Order“ von CSS betrachten, könnten Sie nicht nur einen CSS-Stil am Ende aller Ihrer vorherigen CSS-Definition hinzu, um jede CSS-Wirkung zu kündigen Sie derzeit für Tooltip Wirkung?

würde die CSS-Regel nur erklärt werden, wenn Javascript aktiviert und JQuery erkannt.

Auf diese Weise sind Sie sicher, dass Ihr CSS Tooltip Effekt ist nicht in Konflikt mit Ihrem JQuery Wirkung.

So etwas wie:

a.info:hover span{ display:none}

mit der Verwendung von „js_enabled“ Klasse dieser CSS-Regel abhängig zu machen.

Sie können es auch tun, indem Sie CSS-Regel on the fly fügte hinzu:

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

---

Die einfachste Lösung für Trennung von CSS und JavaScrip ist auf < strong> entfernen Sie Ihre CSS-Klasse

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

Dieses Beispiel Funktion nimmt vier Parameter:

a
    definiert die Aktion, die Sie die Funktion ausgeführt werden soll.
o
    das betreffende Objekt.
c1
    der Name der ersten Klasse
c2
    der Name der zweiten Klasse

Mögliche Aktionen sind:

swap
    ersetzt Klasse c1 mit Klasse c2 in Objekt o.
add
    fügt Klasse c1 auf das Objekt o.
remove
    entfernt Klasse c1 von dem Objekt o.
check
    Test, wenn Klasse c1 bereits o auf Objekt angewandt und gibt wahr oder falsch.

Answer 2

Wenn kann etwas völlig in CSS getan werden sagen, dass ich es auf diese Weise halten. Wenn Mangel an Javascript in Ihrem Browser ein Anliegen ist, dann die meiste Zeit zeige ich die gesamte Seite unberührt.

Sagen Sie zum Beispiel werde ich jQuery verwenden, um ein Element zu wechseln, wenn eine Checkbox angeklickt wird. Auf Seite Last sehe ich das Kontrollkästchen und das Element entsprechend aktualisieren. Wenn Sie Javascript nicht das Element aktiviert ist, wird weiterhin angezeigt und die Website wird noch brauchbar sein. Nur eben nicht so schön.

Answer 3

Man, haben Sie einen Browser-basiertes Spiel, nicht wahr? Sie haben weniger als 1% der Nutzer mit js deaktiviert! Und das 1% ist die apokalyptische Zahl, weil ich, dass Sie weniger gewettet haben kann als das;)

Wie auch immer, wenn Sie wirklich darüber besorgt sind, haben nur die Seite ohne Javascript. Und macht es funktionelle 100%. Nachdem Sie Ihre Website vollständig ohne js Geschmack funktioniert, starten Sie einfach mit Jquery zu verbessern (oder jeder anderen Bibliothek; jquery ist das beste: P). Aber mit Vorsicht: nicht html von euch ändern. Es ist einfacher, als es aussieht;)

Und ja, wenn Sie Dinge, die ohne js (wie jene Tooltips) arbeitet halten Sie es!