jQuery Graciosa Degradação

Question

Eu quero enfeitar algumas áreas do meu site com algumas animações jQuery aqui e ali, e eu estou olhando para substituir o meu código AJAX inteiramente desde o meu código existente está a ter alguns problemas de compatibilidade cross-browser. No entanto, desde jQuery é uma biblioteca JavaScript, eu estou preocupado com a minha páginas não funcionam corretamente quando o JavaScript está desativado ou não existe no navegador do usuário.

Vou dar um exemplo: Atualmente, estou usando uma dica de ferramenta CSS puro para dar meus usuários (jogadores, o site é um jogo de browser) informações sobre outros usuários. Por exemplo, se os outros jogadores no jogo satisfazer uma ou mais condições, um ícone alvo é exibido ao lado de seu nome, e sobre a pairar sobre essa informação ícone alvo sobre as razões por trás do alvo é exibida. Esta é uma informação útil, pois ajuda os meus jogadores para saber quem eles devem planejar para atacar próxima no jogo.

Atualmente, eu essas dicas de ferramentas usando CSS. Eu tenho uma div pai que contém a imagem do ícone alvo de classe "info". Em seguida, tenho um dentro div de que, com classe "dica" que, no estado de foco da classe "info" que está contido, é mostrado, mas no estado normal está escondido. Eu pensei que era bastante inteligente quando eu li sobre isso, e uma vez que não JavaScript é usado ele funciona em qualquer navegador compatível com CSS.

Eu gostaria de usar jQuery para obter o mesmo efeito, principalmente porque ele ficaria muito mais limpo, mas também porque acredito animações rápidas e sutis podem fazer tais coisas "que aparecem aleatoriamente" fazer muito mais sentido para o usuário, especialmente no primeiro encontro. Eu só estou querendo saber se os dois vão entrar em conflito. Este é apenas um exemplo disso, existem muitos outros exemplos onde a incapacidade de usar JavaScript impeditivas do site.

Então o que eu estou pedindo Eu acho que é, como é que se faça uma degrade local jQuery graciosamente em navegadores que não suportam JavaScript, mas por outro do apoio mais CSS? Meu objetivo é que o site funcione em um nível básico para todos os usuários, independentemente da escolha no navegador. A animação é um bom exemplo, mas também estou preocupado com os bits mais dinâmicas, como a auto-atualização com AJAX, etc. Há algum bons recursos sobre como conseguir isso, ou você tem algum conselho sobre a melhor maneira tais degradabilidade poderia ser alcançado?

Graças

PS: totalmente irrelevante, mas o Firefox parece pensar que "degradabilidade" não é uma palavra, mas "biodegradabilidade" (com o prefixo "bio") é. Estranho ...

Answer 1

Se você considerar a "Ordem em cascata" de css, você poderia não apenas adicionar um estilo css no final de toda a sua definição css anterior, a fim de cancelar qualquer efeito css que você tem atualmente para efeito dica?

Essa regra css só seria declarada se Javascript é ativado e JQuery detectado.

Dessa forma, você tem certeza que seu css dica efeito não está em conflito com o seu JQuery efeito.

Algo como:

a.info:hover span{ display:none}

com o uso de classe "js_enabled" para fazer este condicional regra css.

Você também pode fazê-lo por acrescentando regra CSS na mosca :

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

---

A solução mais simples para Separação de CSS e Javascrip é a < strong> remover sua 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;
  }
}

Esta função exemplo tem quatro parâmetros:

a
define a ação que você deseja que a função para executar.
o
o objeto em questão.
c1
o nome da primeira classe
c2
o nome da segunda classe

As ações possíveis são:

swap
substitui c1 classe com c2 classe em objeto o.
add
acrescenta classe c1 para o objeto o.
remove
c1 remove classe do objeto o.
check
teste se a classe c1 já é aplicada à object o e retorna verdadeiro ou falso.

Answer 2

Se algo pode ser feito completamente em CSS Eu digo mantê-lo assim. Se a falta de javascript no navegador é uma preocupação, então a maior parte do tempo eu mostro a página inteira afetada.

Say por exemplo, eu vou usar jQuery para alternar um elemento quando uma caixa de seleção é clicado. No carregamento da página eu olhar para a caixa de seleção e atualizar o elemento de acordo. Se javascript não está habilitado o elemento ainda aparecerá eo site ainda será utilizável. Apenas não tão agradável.

Answer 3

O homem, você tem um jogo baseado em navegador, certo? Você tem menos de 1% de usuários com js desabilitado! E que 1% é o número apocalíptico, porque eu posso apostar que você tem menos do que isso;)

De qualquer forma, se você está realmente preocupado com isso, basta fazer o site sem qualquer javascript. E torná-lo funcional de 100%. Após o seu site funciona completamente sem qualquer sabor js, basta começar a melhorar com jQuery (ou qualquer outra biblioteca; jquery é a melhor: P). Mas com cuidado: não alterar qualquer um de vocês html. É mais fácil do que parece;)

E sim, se você tem coisas que funciona sem js (como os tooltips) mantê-lo!