2011-08-13 6 views
8

Noté que Facebook hace esto donde tienen una actualización de metadatos incluida en un <noscript> incluido en la etiqueta <head>. Usan esto para detectar si el agente de usuario tiene javascript habilitado o no.Usando <noscript> dentro de <head>: ¿Buena idea o mala idea?

Estábamos pensando en el uso de este método por 2 razones:

  1. Para automáticamente redirigir a una versión no-js optimizado del sitio como lo hace Facebook.
  2. Incluir una hoja de estilo que no sea js para deshabilitar el puntero del dedo sobre los anclajes JavaScript y los buscadores de quejas CSS3, desvaneciendo esos botones para que sea más obvio que están deshabilitados (no funcionan).

¿Usar este método por los motivos anteriores causará algún efecto adverso que afecte a un gran porcentaje de agentes de usuario?

+0

Incluso noté esto y lo he estado usando en un sitio de producción para enviar usuarios a la página que no es JS, pidiéndoles que actualicen su navegador o habiliten JS o lo que sea posible para ellos, ciertamente me encantaría saber alternativas y riesgos de este enfoque, la votación upvoting la pregunta – Kumar

+0

Es recomendable utilizar html válido, por ejemplo tuve un problema al analizar un HTML que tiene la etiqueta NOSCRIPT en HEAD en PHP. – ZiTAL

Respuesta

6

No, no debería haber ningún efecto extravagante adversos por el uso de la etiqueta <noscript> en la cabeza .

Dicho esto, hay algunas desventajas a <noscript>:

  • Sólo funciona si el navegador no soporta JavaScript o si está desactivado. El contenido de la etiqueta <noscript> será invisible si el Javascript está bloqueado por un firewall.
  • Los agentes de usuario con soporte de Javascript muy pobre aún ignorarán el contenido de <noscript>.
  • Si bien la mayoría de los navegadores admiten <noscript> en la cabeza, técnicamente no es válido X (HTML) por lo que es posible que sus páginas no se validen.

IMO, lo que quieres hacer es algo muy bueno, y es un uso apropiado de la etiqueta. Sin embargo, una solución aún mejor sería usar la detección de características dentro de su Javascript para habilitar las funciones de Javascript, en lugar de usar <noscript> para deshabilitarlas.

Si depende de las características de HTML5, le recomendaría la biblioteca Modernizr para este fin.

3

Para el segundo, me gustaría recomendar el uso del enfoque de principio dando a sus <html> elementos de una clase de no-js, a continuación, eliminar esa clase inmediatamente con JavaScript, y su sustitución por una clase de js (o incluyendo una biblioteca como Modernizr que hace esto automáticamente). De esta forma, puede orientar los estilos de CSS a las situaciones de JavaScript habilitadas o deshabilitadas prefijando esos estilos con .js o .no-js.

Algo como esto, por ejemplo:

.js span.javascriptOnlyAnchor { cursor: pointer; text-decoration: underline; } 

.no-js span.javascriptOnlyAnchor { display: none; } 

Paul irlandesa habla más sobre esto aquí: http://paulirish.com/2009/avoiding-the-fouc-v3/

+0

¿en qué punto del buffer de salida recomienda realmente ejecutar el js? dentro de la cabeza? ¿justo después del cuerpo? no surgen problemas con el hecho de que html (idealmente) aún estará abierto cuando se ejecute js para volver a clasificar html? No voy a instalar la biblioteca, pero esta será una codificación personalizada. –

+0

Esta es una de las pocas veces cuando una pequeña idea de JavaScript en la cabeza es una buena idea. De lo contrario, sigue siendo vulnerable a un destello de contenido sin estilo (o mal diseñado en este caso). –

Cuestiones relacionadas