tipos tiempo resumen principales navegadores los linea internet historia existen cuantos caracteristicas css google-chrome portability

css - tiempo - ¿Cuál es la mejor técnica para la forma coherente, la función entre todos los navegadores web(incluido Google Chrome)?



principales navegadores de internet y sus caracteristicas pdf (11)

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

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

Versión larga: escribí una 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 bajo IE 6 y 7. Luego, para mi asombro, descubrí que jQuery no se comporta de forma idéntica en IE; así que cambié mi Javascript para ser portable en FF e IE usando condicionales y jQuery menos puro.

Hoy, comencé a probar en Webkit y Google Chrome y descubrí que, no solo los estilos son incompatibles con FF e IE, sino que Javascript no se ejecuta en absoluto, probablemente debido a una sintaxis o un error de análisis. ¡Esperaba que algún CSS funcionara, pero ahora tengo que depurar más JavaScript! En este punto, quiero dar un paso atrás y pensar antes de escribir montones de casos especiales para todas las situaciones.

No estoy buscando una solución mágica, solo las mejores prácticas para mantener las cosas lo más comprensibles y sostenibles posible. Prefiero si esto funciona sin inteligencia del lado del servidor; sin embargo, si hay una ventaja, por ejemplo, comprobar el agente de usuario y luego devolver diferentes archivos a diferentes navegadores, eso está bien si la comprensibilidad total y el mantenimiento de la aplicación web es menor. ¡Muchas gracias a todos!

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

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

Algunas cosas generales que he aprendido hasta ahora:

  • Prueba a menudo, en tantos navegadores de destino como puedas. Asegúrese de tener tiempo para esto en su cronograma de desarrollo.
  • Los kits de herramientas pueden ayudarlo a obtener soporte para varios navegadores, pero eventualmente perderán algo en algún navegador. Planifique algo de tiempo para la depuración e investigación de soluciones para navegadores específicos.
  • Si necesita algo que no está en un juego de herramientas y no puede encontrar un fragmento de código gratuito, invierta un poco de tiempo para escribir funciones de utilidad que encapsulen el comportamiento dependiente del navegador.
  • Infórmese sobre los errores conocidos del navegador, para que pueda dirigir su implementación a su alrededor.

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

  • Utilice el código condicional basado en el agente de usuario solo como último recurso, ya que las diferentes generaciones del "mismo" navegador pueden tener características diferentes. En su lugar, primero compruebe el comportamiento conforme a los estándares; por ejemplo, if(node.addEventListener)... , luego funciones comunes no estándar, por ejemplo, if(window.attachEvent)... , y luego, si es necesario, observe el usuario-agente para un tipo de navegador y 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 juego de herramientas lo resumirá por usted.
  • Los controladores de eventos son diferentes en casi todos los navegadores. Un buen juego de herramientas lo resumirá por usted.
  • 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 un poco asqueroso), el uso de node.innerHTML con cadenas que contienen bits de HTML parece ser más confiable en todos los tipos de navegadores. Aún no he encontrado un kit de herramientas que te permita usar element.setAttribute para agregar un ''nombre'' a un elemento de formulario en IE.
  • Las diferencias de CSS (y los errores) son tan importantes como las diferencias de JS.
  • Las funciones de JavaScript "núcleo" (String, Date, RegExp, Array functions) 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 encontrado con ningún error JS específico de Chrome, pero siempre es uno de los primeros buscadores que pruebo.

HTH

Una "bala de plata" a la que puede recurrir es Google Web Toolkit (GWT) .

Creo que es compatible con todos los navegadores en los que está interesado y le da la capacidad de codificar su UI en un IDE compatible con Java como Eclipse. La ventaja de esto es que puede usar herramientas IDE para la finalización del código y la comprobación de errores en tiempo de compilación, lo que mejora enormemente el desarrollo de proyectos de IU a gran escala.

Si usa los componentes de la interfaz de usuario de GWT, se ocultará una gran cantidad de maldad específica del navegador de tener que ser tratada, pero cuando compile, se creará un archivo compacto e implementar para cada plataforma del navegador. De esta forma, nunca descargará ningún código específico de IE si está viendo la aplicación en Firefox. También tendrá un talón del lado del cliente generado que cargará el paquete compilado apropiado de JS. Para endulzar el trato, estos archivos son cacheables, por lo que el rendimiento percibido generalmente mejora para los visitantes que regresan.

Si está comenzando desde un restablecimiento de base o un marco y ha tenido en cuenta el IE y todavía es extraño, es posible que desee volver a verificar lo siguiente:

  • Todo valida? CSS y HTML?
  • Cualquier enlace roto a un archivo incluido (js, css, etc.?). En Chrome / Safari, si se rompe el enlace de la hoja de estilo, todos sus enlaces pueden terminar en rojo. (algo que ver con el estilo 404 predeterminado, creo)
  • ¿Alguna extraña necesidad de tus complementos js que puedas estar usando? (¿El archivo css debe venir antes del archivo js, ​​como con jquery.thickbox?)

El paisaje ha evolucionado considerablemente para adaptarse al desarrollo de navegadores cruzados. Existen jQuery , Prototype y otros marcos para Javascript entre navegadores. Los restablecimientos de CSS son buenos para comenzar en un lienzo en blanco común para todos los navegadores. BluePrint y 960 son ambos marcos de CSS para ayudar con los diseños que utilizan técnicas de diseño de cuadrícula de CSS que parece ser cada vez más popular.

En cuanto a otros caprichos de CSS en los diferentes navegadores, aquí no hay ningún santo grial y la única opción es probar tu sitio web en diferentes navegadores y utilizar este increíble recurso y, definitivamente, unirte a una lista de correo para ahorrar tiempo.

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

Por último, no intente que el sitio se vea igual en todos los navegadores. Su diseño principal debe apuntar a IE / FF y usted debe estar bien con compromisos razonables en los demás. Use el cuadro de navegación graduado para restringir el soporte del navegador.

En cuanto a las mejores prácticas, comience a usar wireframes en papel en blanco o un servicio como maquetas de Balsamiq . Todavía estoy sorprendido de cómo muchos desarrolladores comienzan con un editor en lugar de un wireframe, pero nuevamente cambié hace un año antes de darme cuenta de cuán grande es el ahorro de tiempo. Tenga una separación limpia de diseño (HTML), presentación (CSS) y comportamientos (Javascript). No debe haber elementos de estilo en HTML, no hay presencia en Javascript (use .addClass(''highlight'') lugar de .css({''background-color'': ''red''}); ).

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

Personalmente, utilizo Mootools como un marco ligero y simple de javascript. Es simple de usar y es compatible con todos los navegadores anteriores (excepto Chrome, pero parece que también funciona por lo que yo sé).

Además, para garantizar la coherencia entre los navegadores, obtengo una función / estilo / comportamiento / etc. para trabajar en un navegador primero (generalmente Firefox 3 con Firebug), luego verifique inmediatamente para asegurarse de que funciona en todos los otros navegadores (dejando IE6 para el final). Si no es así, reservo el tiempo para arreglarlo de inmediato, porque de lo contrario sé que no tendré tiempo más tarde (en mi experiencia, hacer que las cosas funcionen entre navegadores toma aproximadamente el 50% de mi tiempo de desarrollo; - )

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

He encontrado cuatro cosas útiles en el desarrollo de aplicaciones de JavaScript:

  • Detección de funciones
  • Bibliotecas
  • Desarrollo iterativo usando la virtualización
  • JavaScript: La guía definitiva, Douglas Crockford y John Resig

Detección de funciones

Use la reflexión para preguntar si el navegador admite la función deseada. Si desea saber qué manejo de eventos admite un navegador, puede if (el.addEventHandler) para el cumplimiento 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 características que admiten. No recuerdo, pero me encontré con un problema donde Firefox implementó una función DOM, ¡pero devolvería falso si probabas esa función!

Bibliotecas

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

Desarrollo Iterativo con Virtualización

Tal vez mi mejor consejo: ejecutar todos los entornos de prueba de una vez. Obtenga una distribución Linux, Compiz Fusion y un montón de RAM. Descargue una copia del servidor VMWare de VMWare o de la caja virtual 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 brinda 4 escritorios mapeados en un Cubo. 1 de estos equipos de escritorio es su computadora Linux, la siguiente es su caja Virtutual de Windows XP, la que sigue a Vista, la última de Mac OS X. Después de escribir algún código, usted alt-tabula en una computadora virtual y echa un vistazo a su 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 los videos de Yahoo!

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

... ¡Buena suerte!

La validación de su javascript con un buscador de "buenas piezas +" en JsLint.com hace que sea menos probable que JavaScripts se comporte de manera diferente en FF, Safari, etc.

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

Solo para que tenga un navegador menos del que preocuparse, Chrome utiliza el mismo motor de renderizado que Safari. Entonces, si funciona en Safari, debería funcionar exactamente igual en Chrome.

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

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

Actualización: Parece que ahora esta información está desactualizada. Por favor, vea el comentario de Vox sobre esta respuesta.