¿Cuál es la mejor técnica para lograr una forma y función coherentes entre todos los navegadores web (incluido Google Chrome)?

StackOverflow https://stackoverflow.com/questions/45239

  •  09-06-2019
  •  | 
  •  

Pregunta

Version corta:¿Cuál es la técnica más limpia y fácil de mantener para una presentación consistente y la función AJAX en todos los navegadores utilizados tanto por los desarrolladores web como por los usuarios finales de los desarrolladores web?

  • Es decir, 6, 7, 8
  • Firefox 2, 3
  • Safari
  • Google Chrome
  • Ópera

Versión larga:escribí un aplicación web dirigida a otros desarrolladores web.Quiero que mi aplicación sea compatible con los principales navegadores web (además de Google Chrome) tanto en la presentación como en el comportamiento de AJAX.

Comencé en Firefox/Firebug, luego agregué comentarios condicionales para un estilo consistente en IE 6 y 7.Luego, para mi sorpresa, descubrí que jQuery no se comporta de manera idéntica en IE;asique cambié mi Javascript para que sea portátil en FF e IE usando condicionales y jQuery menos puro.

Hoy, comencé a realizar pruebas en Webkit y Google Chrome y descubrí que no solo los estilos son inconsistentes tanto con FF como con IE, sino que Javascript no se ejecuta en absoluto, probablemente debido a un error de sintaxis o análisis.Esperaba algo de trabajo con CSS, ¡pero ahora tengo más depuración de Javascript por hacer!En este punto, quiero dar un paso atrás y pensar antes de escribir montones de casos especiales para todas las situaciones.

Soy No buscamos una solución milagrosa, solo mejores prácticas. para mantener las cosas lo más comprensibles y mantenibles posible.Prefiero que esto funcione sin inteligencia del lado del servidor;sin embargo, si existe una ventaja, por ejemplo, verificar el agente de usuario y luego devolver diferentes archivos a diferentes navegadores, está bien si la comprensibilidad y mantenibilidad total de la aplicación web es menor.¡Muchas gracias a todos!

¿Fue útil?

Solución

Estoy en una situación similar, trabajando en una aplicación web dirigida a profesionales de TI y que debe admitir el mismo conjunto de navegadores, menos Opera.

Algunas cosas generales que he aprendido hasta ahora:

  • Pruebe con frecuencia, en tantos navegadores de destino como pueda.Asegúrese de tener tiempo para esto en su programa de desarrollo.
  • Los kits de herramientas pueden ayudarle en parte del camino hacia la compatibilidad con varios navegadores, pero eventualmente perderán algo en algún navegador.Planifique algo de tiempo para depurar e investigar soluciones para navegadores específicos.
  • Si necesita algo que no está en un kit de herramientas y no puede encontrar un fragmento de código gratuito, invierta algo de tiempo en escribir funciones de utilidad que encapsule el comportamiento dependiente del navegador.
  • Infórmese sobre los errores conocidos del navegador, para que pueda dirigir su implementación en torno a ellos.

Algunas cosas más específicas que he aprendido:

  • Utilice código condicional basado en el agente de usuario sólo como último recurso, porque diferentes generaciones del "mismo" navegador pueden tener características diferentes.En su lugar, pruebe primero el comportamiento que cumple con los estándares; por ejemplo, if(node.addEventListener)..., luego funciones comunes no estándar, por ejemplo, if(window.attachEvent)..., y luego, si es necesario, busque en el agente de usuario un tipo de navegador y un número de versión específicos.
  • Saber cuándo el DOM está "listo" para el acceso al script es diferente en casi todos los navegadores.Un buen conjunto de herramientas le permitirá resumir esto.
  • Los controladores de eventos son diferentes en casi todos los navegadores.Un buen conjunto de herramientas le permitirá resumir esto.
  • Crear elementos DOM, particularmente controles de formulario o elementos con atributos, puede ser complicado con document.createElement y element.setAttribute.Si bien no es estándar (y es un poco asqueroso), usar node.innerHTML con cadenas que contienen bits de HTML parece ser más confiable en todos los tipos de navegadores.Todavía tengo que encontrar un conjunto de herramientas que le permita usar element.setAttribute para agregar un 'nombre' a un elemento de formulario en IE.
  • Las diferencias (y errores) de CSS son tan importantes como las diferencias de JS.
  • Las características "principales" de Javascript (funciones String, Date, RegExp, Array) parecen ser bastante confiables y consistentes en todos los navegadores, especialmente en relación con las funciones DOM/CSS/Window.Hay una pequeña alegría en el hecho de que el lenguaje no es completamente diferente en cada plataforma.:-)

Realmente no me he topado con ningún error JS específico de Chrome, pero siempre es uno de los primeros navegadores que pruebo.

HT

Otros consejos

Chrome es en realidad un poco diferente a Safari, utiliza una implementación de JavaScript completamente diferente y se han reportado problemas tanto con el prototipo como con jquery.No me preocuparía demasiado por ahora, todavía es una versión beta temprana del navegador y esas inconsistencias probablemente serán tratadas como errores.Aquí esta la informe de error.

Una "bala de plata" a la que podría considerar recurrir es Kit de herramientas web de Google (GWT).

Creo que es compatible con todos los navegadores que le interesan y le brinda la posibilidad de codificar su interfaz de usuario en un IDE compatible con Java como Eclipse.La ventaja de esto es que puede utilizar herramientas IDE para completar el código y verificar errores en tiempo de compilación, lo que mejora enormemente el desarrollo en proyectos de UI a gran escala.

Si usa componentes de interfaz de usuario de GWT, ocultará muchas molestias específicas del navegador para que no tengan que ser tratadas, pero cuando compila, creará un archivo de implementación compacto para cada plataforma de navegador.De esta manera, nunca descargarás ningún código específico de IE si estás viendo la aplicación en Firefox.También se generará un código auxiliar del lado del cliente que cargará el paquete compilado apropiado de JS.Para mejorar el trato, estos archivos se pueden almacenar en caché, por lo que el rendimiento percibido generalmente mejora para los visitantes que regresan.

El panorama ha evolucionado considerablemente para dar cabida al desarrollo entre navegadores. jQuery, Prototipo y existen otros marcos para Javascript entre navegadores. Restablecimientos de CSS son buenos para comenzar con un lienzo en blanco común para todos los navegadores. Plano y 960 son ambos marcos CSS para ayudar con los diseños usando Diseños de cuadrícula CSS Técnicas que parecen estar volviéndose muy populares en estos días.

En cuanto a otras peculiaridades de CSS en los diferentes navegadores, no hay un santo grial aquí y la única opción es probar su sitio web en diferentes navegadores y usar esto. recurso impresionante y definitivamente únete a una lista de correo para ahorrar algo de tiempo.

Si está trabajando en un sitio de producción de gran volumen, puede utilizar un servicio como browsercam.com al final del juego para asegurarse de que el sitio no se rompa terriblemente en algún navegador.

Por último, no intente que el sitio tenga el mismo aspecto en todos los navegadores.Su diseño principal debe apuntar a IE/FF y debe aceptar compromisos razonables con los demás.Utilizar el gráfico de navegador calificado para limitar la compatibilidad con el navegador.

En cuanto a las mejores prácticas, comenzar a usar wireframes en papel en blanco o un servicio como Maquetas de balsamiq.Todavía me sorprende saber cuántos desarrolladores comienzan con un editor en lugar de una estructura alámbrica, pero solo cambié hace un año antes de darme cuenta del gran ahorro de tiempo que supone.Tenga una separación clara de diseño (HTML), presentación (CSS) y comportamientos (Javascript).No debe haber elementos de estilo en HTML, ni presentación en Javascript (use .addClass('highlight') en lugar de .css({'background-color': 'red'});).

Si no está familiarizado con alguno de los términos en negrita de esta publicación, buscarlos en Google debería ser fructífero para su carrera y productividad en el desarrollo web.

Si está comenzando desde un reinicio básico o un marco y ha tenido en cuenta IE y todavía todo es extraño, es posible que desee volver a verificar lo siguiente:

  • ¿Todo valida?¿CSS y HTML?
  • ¿Algún enlace roto a un archivo incluido (js, css, etc.)?En Chrome/Safari, si el enlace de su hoja de estilo no funciona, todos sus enlaces pueden terminar en rojo.(creo que tiene algo que ver con el estilo 404 predeterminado)
  • ¿Algún requisito extraño de sus complementos js que pueda estar utilizando?(¿El archivo css tiene que ir antes que el archivo js, ​​como ocurre con jquery.thickbox?)

Para la interfaz de usuario, consulte ext.

Es excelente como biblioteca independiente, aunque también se puede usar con jQuery, YUI, Prototype y GWT.

Muestras: http://extjs.com/deploy/dev/examples/samples.html

He encontrado cuatro cosas útiles para desarrollar aplicaciones JavaScript:

  • Detección de características
  • Bibliotecas
  • Desarrollo iterativo mediante virtualización
  • JavaScript:La guía definitiva, Douglas Crockford y John Resig

Detección de características

Utilice la reflexión para preguntar si el navegador admite la función deseada.Si desea saber qué manejo de eventos admite un navegador, puede usar if(el.addEventHandler) para cumplir con W3C, if(el.attachEvent) para el tipo IE y, finalmente, recurrir a el.['onSomeEvent'].

¡UN GRAN PERO!

Los navegadores a veces mienten sobre las funciones que admiten.No lo recuerdo, pero me encontré con un problema en el que Firefox implementó una función DOM, ¡pero devolvería falso si probaras esa función!

Bibliotecas

Como ya estás trabajando con jQuery, guardaré la explicación.Pero si tiene problemas, es posible que desee considerar YUI por su maravillosa compatibilidad entre navegadores.Incluso trabajan juntos.

Desarrollo iterativo con virtualización

Quizás mi mejor consejo:Ejecute todos sus entornos de prueba a la vez.Consigue una distribución de Linux, Compiz Fusion y mucha RAM.Descargue una copia de VMWare Server o Virtual Box de Sun e instale algunos sistemas operativos.Obtenga imágenes para Windows XP, Windows Vista y Mac OS X.

La idea básica es esta:Compiz Fusion te ofrece 4 escritorios asignados a un cubo.Uno de estos escritorios es su computadora Linux, el siguiente su equipo virtual Windows XP, el siguiente Vista, el último Mac OS X.Después de escribir algo de código, presiona la tecla Alt en la computadora virtual y revisa tu trabajo.Además se ve increíble.

JavaScript:La guía definitiva, Douglas Crockford y John Resig

Estas tres fuentes proporcionan la mayor parte de mi información para el desarrollo de JavaScript.La guía definitiva es quizás el mejor libro de referencia para JavaScript.

Douglas Crockford es un gurú de JavaScript (odio la palabra) en Yahoo.Busque su serie "Douglas Crockford Theory of the DOM", "Douglas Crockford Advanced JavaScript", "Douglas Crockford Theory of the Dom" y ""Douglas Crockford The Good Parts" en Yahoo!Vídeos.

John Resig (como sabes) escribió jQuery.Su sitio web en ejohn.org contiene una gran cantidad de información sobre JavaScript, y si busca en Google encontrará que ha dado varias presentaciones sobre técnicas defensivas de JavaScript.

...¡Buena suerte!

Para que tengas un navegador menos del que preocuparte, Chrome utiliza el mismo motor de renderizado que Safari.Entonces, si funciona en Safari, debería funcionar exactamente igual en Chrome.

Ver esta publicación en el blog de Matt Cutts.

Google Chrome usa WebKit para renderizar, que es el mismo motor de renderizado que el navegador Safari de Apple, por lo que si su sitio es compatible con Safari debería funcionar muy bien en Chrome.

Actualizar:Parece que esta información ya está desactualizada.Consulte el comentario de Vox sobre esta respuesta.

Si su máxima prioridad es una presentación exactamente consistente en todos los navegadores enumerados sin disparidades, probablemente debería mirar AS3 y Flex.

Personalmente uso Mootools como un marco de JavaScript simple y liviano.Es fácil de usar y es compatible con todos los navegadores anteriores (excepto Chrome, pero, hasta donde yo sé, parece funcionar también).

Además, para garantizar la coherencia entre los navegadores, obtengo una característica/estilo/comportamiento/etc.para que funcione primero en un navegador (generalmente Firefox 3 con firebug), luego verifique inmediatamente para asegurarse de que funcione en todos los demás navegadores (dejando IE6 para el final).Si no es así, invierto tiempo para solucionarlo de inmediato, porque de lo contrario sé que no tendré tiempo más adelante (en mi experiencia, hacer que las cosas funcionen en varios navegadores requiere aproximadamente el 50% de mi desarrollo).tiempo ;-) )

Validando su javascript con un "buenos componentes" + navegador activado JsLint.com hace que sea menos probable que JavaScript se comporte de manera diferente en FF, Safari, etc.

De lo contrario, usar estándares y validar su código, así como desarrollar técnicas existentes como jQuery, debería hacer que su sitio se comporte igual en todos los navegadores excepto IE, y no existe una receta mágica para IE: solo hay errores por todas partes...

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top