jQuery Degradación elegante

Question

Quiero arreglar algunas áreas de mi sitio web con algunas animaciones jQuery aquí y allá, y estoy buscando reemplazar mi código AJAX por completo ya que mi código existente tiene algunos problemas de compatibilidad entre navegadores. Sin embargo, dado que jQuery es una biblioteca de JavaScript, me preocupa que mis páginas no funcionen correctamente cuando JavaScript está desactivado o no existe en el navegador de un usuario.

Daré un ejemplo: actualmente, estoy usando una información sobre herramientas CSS pura para dar a mis usuarios (jugadores, el sitio es un juego de navegador) información sobre otros usuarios. Por ejemplo, si los otros jugadores en el juego satisfacen una o más condiciones, se muestra un ícono de objetivo junto a su nombre, y al pasar el cursor sobre ese ícono se muestra información sobre las razones detrás del objetivo. Esta es información útil, ya que ayuda a mis jugadores a saber a quién deberían planear atacar a continuación en el juego.

Actualmente, hago información sobre herramientas usando CSS. Tengo un elemento primario que contiene la imagen del icono de destino de la clase "info". Luego tengo un div dentro de eso con la clase '' tooltip '' que, en el estado de desplazamiento de la "información" se muestra la clase en la que está contenida, pero en el estado normal está oculta. Pensé que era bastante inteligente cuando lo leí, y como no se usa JavaScript, funciona en cualquier navegador compatible con CSS.

Me gustaría usar jQuery para lograr el mismo efecto, principalmente porque se vería mucho más limpio, pero también porque creo que las animaciones rápidas y sutiles pueden hacer que esas cosas "aparezcan aleatoriamente". tiene mucho más sentido para el usuario, especialmente en el primer encuentro. Me pregunto si los dos entrarán en conflicto. Este es solo un ejemplo de esto, hay muchos otros ejemplos en los que la imposibilidad de usar JavaScript dificultaría el sitio.

Entonces, lo que pregunto es, ¿cómo se hace que un sitio jQuery se degrade con gracia en navegadores que no admiten JavaScript, pero de lo contrario sí admite la mayoría de CSS? Mi objetivo es que el sitio funcione en un nivel básico para todos los usuarios, independientemente de la elección del navegador. La animación es un buen ejemplo, pero también estoy preocupado por los bits más dinámicos, como la actualización automática con AJAX, etc. ¿Hay algún buen recurso sobre cómo lograr esto, o tiene algún consejo sobre la mejor manera? tal degradabilidad podría lograrse?

Gracias

PD: totalmente irrelevante, pero Firefox parece pensar que "degradabilidad" no es una palabra, sino "biodegradabilidad" (con el prefijo "bio") es. Extraño ...

Answer 1

Si considera el " Orden en cascada " de CSS, ¿no podría simplemente agregar un estilo CSS al final de toda su definición CSS anterior para cancelar cualquier efecto CSS que tenga actualmente para el efecto de información sobre herramientas?

Esa regla css solo se declararía si Javascript está activado y JQuery detectado.

De esa manera, está seguro de que su efecto de información sobre herramientas css no está en conflicto con su JQuery efecto.

Algo así como:

a.info:hover span{ display:none}

con el uso de " js_enabled " clase para hacer esta regla CSS condicional.

También puede hacerlo agregando la regla css sobre la marcha :

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 solución más simple para Separación de CSS y Javascrip es < strong> elimina tu clase 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 función de ejemplo toma cuatro parámetros:

a
    define la acción que desea que realice la función.
o
    el objeto en cuestión.
c1
    el nombre de la primera clase
c2
    el nombre de la segunda clase

Las acciones posibles son:

swap
    reemplaza la clase c1 con la clase c2 en el objeto o.
add
    agrega la clase c1 al objeto o.
eliminar
    elimina la clase c1 del objeto o.
check
    prueba si la clase c1 ya se aplica al objeto o y devuelve verdadero o falso.

Answer 2

Si algo se puede hacer completamente en CSS, digo que lo mantenga así. Si la falta de javascript en el navegador es una preocupación, entonces la mayoría de las veces muestro la página completa sin verse afectada.

Digamos, por ejemplo, que voy a usar jQuery para alternar un elemento cuando se hace clic en una casilla de verificación. Al cargar la página miro la casilla de verificación y actualizo el elemento en consecuencia. Si JavaScript no está habilitado, el elemento seguirá apareciendo y el sitio seguirá siendo utilizable. Simplemente no es tan agradable.

Answer 3

Hombre, tienes un juego basado en navegador, ¿verdad? ¡Tienes menos del 1% de usuarios con js deshabilitado! Y ese 1% es el número apocalíptico, porque puedo APUESTA que tienes menos que eso;)

De todos modos, si está realmente preocupado por esto, simplemente haga el sitio sin javascript. Y hacerlo funcional al 100%. Después de que su sitio funcione completamente sin ningún sabor js, simplemente comience a mejorar con jquery (o cualquier otra biblioteca; jquery es el mejor: P). Pero con cuidado: no cambies NINGUNO de tus HTML. Es más fácil de lo que parece;)

Y sí, si tienes cosas que funcionan sin js (como esas sugerencias) ¡mantenlo!