Domanda

Voglio abbellire alcune aree del mio sito Web con alcune animazioni jQuery qua e là e sto cercando di sostituire completamente il mio codice AJAX poiché il mio codice esistente presenta alcuni problemi di compatibilità tra browser. Tuttavia, poiché jQuery è una libreria JavaScript, sono preoccupato che le mie pagine non funzionino correttamente quando JavaScript è disattivato o non esiste nel browser di un utente.

Faccio un esempio: attualmente sto usando un semplice tooltip CSS per fornire ai miei utenti (giocatori, il sito è un browser game) informazioni su altri utenti. Ad esempio, se gli altri giocatori nel gioco soddisfano una o più condizioni, viene visualizzata un'icona di destinazione accanto al loro nome e quando si passa con il mouse sopra quell'icona di destinazione vengono visualizzate le informazioni relative ai motivi alla base del bersaglio. Queste sono informazioni utili, in quanto aiutano i miei giocatori a sapere chi dovrebbero pianificare di attaccare successivamente nel gioco.

Attualmente, faccio questi suggerimenti usando i CSS. Ho un div genitore che contiene l'immagine dell'icona di destinazione della classe "info". Poi ho un div all'interno di quello con la classe "tooltip" che, allo stato al passaggio del mouse su " info " viene mostrata la classe in cui è contenuta, ma nello stato normale è nascosta. Ho pensato che fosse piuttosto intelligente quando l'ho letto, e poiché non viene utilizzato JavaScript, funziona su qualsiasi browser compatibile con CSS.

Vorrei usare jQuery per ottenere lo stesso effetto, principalmente perché sembrerebbe molto più pulito, ma anche perché credo che animazioni rapide e sottili possano far apparire queste cose "casualmente". ha molto più senso per l'utente, soprattutto al primo incontro. Mi chiedo solo se i due saranno in conflitto. Questo è solo un esempio di questo, ci sono numerosi altri esempi in cui l'incapacità di usare JavaScript ostacolerebbe il sito.

Quindi quello che sto chiedendo, suppongo, è come si fa a degradare con grazia un sito jQuery su browser che non supportano JavaScript, ma altrimenti supportano la maggior parte dei CSS? Il mio obiettivo è che il sito funzioni a un livello base per tutti gli utenti, indipendentemente dalla scelta nel browser. L'animazione è un buon esempio, ma sono anche preoccupato per i bit più dinamici, come l'aggiornamento automatico con AJAX, ecc. Ci sono buone risorse su come raggiungere questo obiettivo o hai qualche consiglio sul modo migliore tale degradabilità potrebbe essere raggiunta?

Grazie

PS: totalmente irrilevante, ma Firefox sembra pensare che la "degradabilità" non è una parola, ma "biodegradabilità" (con il prefisso "bio") è. Strano ...

È stato utile?

Soluzione

Se consideri " Ordine a cascata " di CSS, non potresti semplicemente aggiungere uno stile CSS alla fine di tutte le tue precedenti definizioni CSS per annullare qualsiasi effetto CSS che hai attualmente per l'effetto tooltip?

Quella regola CSS sarebbe dichiarata solo se Javascript fosse attivato e JQuery rilevato.

In questo modo, sei sicuro che il tuo cti tooltip effect non è in conflitto con il tuo JQuery effetto.

Qualcosa del tipo: 

a.info:hover span{ display:none}

con l'uso di " js_enabled " classe per rendere condizionale questa regola CSS.

Puoi anche farlo aggiungendo al volo la regola 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);
    }
}

La soluzione più semplice per Separazione di CSS e Javascrip è < strong> rimuovi la tua 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;
  }
}

Questa funzione di esempio accetta quattro parametri:

a
    definisce l'azione che si desidera venga eseguita dalla funzione.
o
    l'oggetto in questione.
c1
    il nome della prima classe
c2
    il nome della seconda classe

Le azioni possibili sono:

di swap
    sostituisce la classe c1 con la classe c2 nell'oggetto o.
Aggiungi
    aggiunge la classe c1 all'oggetto o.
Rimuovi
    rimuove la classe c1 dall'oggetto o.
di controllo
    verifica se la classe c1 è già applicata all'oggetto o e restituisce vero o falso.

Altri suggerimenti

Se qualcosa può essere fatto completamente in CSS, dico di tenerlo così. Se la mancanza di javascript nel browser è un problema, la maggior parte delle volte mostro l'intera pagina inalterata.

Supponiamo ad esempio che userò jQuery per attivare / disattivare un elemento quando si fa clic su una casella di controllo. Al caricamento della pagina guardo la casella di controllo e aggiorno l'elemento di conseguenza. Se JavaScript non è abilitato, l'elemento verrà comunque visualizzato e il sito sarà comunque utilizzabile. Semplicemente non carino.

Amico, hai un gioco basato su browser, giusto? Hai meno dell'1% di utenti con js disabilitato! E quell'1% è il numero apocalittico, perché posso scommettere che hai meno di quello;)

Comunque, se sei davvero preoccupato per questo, fai semplicemente il sito senza javascript. E renderlo funzionale al 100%. Dopo che il tuo sito funziona completamente senza alcun sapore js, inizia a migliorare con jquery (o qualsiasi altra libreria; jquery è il migliore: P). Ma con attenzione: non cambiare NESSUNO di voi html. È più facile di quanto sembri;)

E sì, se hai cose che funzionano senza js (come quelle descrizioni dei comandi) tienilo!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top