attribute - change title javascript
Desarrollo de navegador cruzado (8)
Estoy desarrollando una aplicación web para un nuevo servicio, a partir de Firefox 3.5.
El diseño de la interfaz no tiene tablas, solo utiliza divs + CSS y prácticas de alto rendimiento.
Ahora, aunque ser compatible con Safari ha tomado solo una pequeña cantidad de tiempo, IE es un dolor.
Mi pregunta es: ¿hay algo por ahí que pueda usarse para acelerar la comprobación de varios navegadores? Ya conozco muchos puntos de diferencia entre FF e IE, por ejemplo, pero una herramienta específica quizás ayudaría un poco más.
¿Podría sugerir uno, si lo hay?
Gracias,
Escarlata
Desarrollo de navegador cruzado
Ninguna herramienta puede compensar el mal comportamiento, pero puede hacerte la vida más fácil.
Dicho esto, realmente debería crear un flujo de trabajo que le permita optimizar la compatibilidad entre navegadores en la menor cantidad de trabajo invertido. Si eso significa pequeños pasos iterativos o grandes pasos monolíticos para usted, bueno, eso depende de usted decidir. Pero, en general, trabajar contra varios navegadores durante el desarrollo le ahorra tiempo, al menos un gran dolor de cabeza en el día diario.
Lista de herramientas / recursos que encuentro útiles
- Selenium es una herramienta para la prueba de frontend.
- IETester te permite ver una página en diferentes versiones de IE
- Browsershots te permite ver la página en diferentes plataformas también
- Google te permite buscar perversiones de IE conocidas y oscuras
- IE 6 No More te ahorra muchos dolores de cabeza al no preocuparte por la mierda prehistórica que se conoce con el nombre de IE 6
- YUI Graded Browser Support : asegúrese de saber en qué navegadores se debe centrar
- jQuery - biblioteca de javascript de navegador cruzado
- YUI 3: Restablecer CSS : restablece tu CSS (el enlace contiene información útil, así como el CSS)
- 9 Los errores más comunes de IE y cómo solucionarlos: consejos muy útiles sobre cómo aprovechar al máximo los problemas al arreglar primero los problemas comunes.
- El desarrollo de varios navegadores contiene muchos tutoriales útiles sobre el desarrollo de varios navegadores.
Referencias
Cuando dices que solo usas divs y CSS, espero que no estés posicionando absolutamente todo. Esa es una manera segura de desordenar los diseños en muchos navegadores. (Generalmente la mejor práctica es usar flotadores).
También IE7.js probar IE7.js para solucionar IE7.js problemas con IE 6-7.
En general, sugeriría desarrollar en IE y uno de los navegadores compatibles con los estándares en paralelo (Firefox / Chrome / Safari / Opera). Y trata de mantener tanto el HTML como el CSS lo más simple posible.
Esto no responderá su pregunta, sino un consejo basado en mi experiencia personal.
Cuando está desarrollando para muchos navegadores, lo mejor que puede hacer es probar simultáneamente en todos ellos mientras está programando.
De esta manera, solo tendrá que corregir pequeños errores cada vez en lugar de abrumar complicados problemas de diseño.
Hago desarrollo en varios navegadores y realmente no uso ninguno de los patrones prescritos, como las pruebas en varios navegadores. Yo en cambio uso un patrón decorativo. A veces funciona de maravilla, a veces es un dolor de cabeza, pero eso se puede decir para cualquier patrón de desarrollo.
La mayor parte de mi desarrollo tiene lugar en el navegador que considero más compatible con los estándares. Prefiero WebKit a Presto, pero ambos son generalmente cuello y cuello para el cumplimiento de las normas. Con estos navegadores, el uso adecuado de HTML y CSS casi siempre conduce a resultados deseables. Mi navegador WebKit de elección es Google Chrome. Safari también funciona, pero tenga en cuenta que en Mac OS X, el suavizado de fuentes tiende a agrandar el texto. Para garantizar la compatibilidad con los sitios diseñados para Safari Mac, Safari Win incluye las fuentes, por lo que no siempre es la representación más perfecta de píxeles de su sitio.
Blueprint CSS puede ser de gran ayuda si está tratando de crear rápidamente un prototipo de diseño de sitios con varios navegadores. No estoy convencido de que ese marco sea siempre necesario, y también pueden influir en la forma en que estructuras tu marca XHTML, y contorcerla para que coincida con una jerarquía de clases CSS preexistente no siempre es una buena idea.
Una vez que tengo un diseño con el que estoy satisfecho en mi navegador compatible con los estándares, lo decoro con correcciones de errores en otros navegadores menos compatibles con los estándares que utilizan estilos condicionales o hojas de estilo. Firefox, al menos desde la versión 3.0, casi nunca es un gran problema, pero hay maneras de apuntar a Firefox específicamente, e incluso diferenciar entre Gecko 1.9 y 1.8, usando solo CSS. Es un truco, técnicamente, por lo que los puristas de CSS pueden burlarse de la blasfemia del código, pero es una solución confiable y utilizable. Para mayor claridad y facilidad de mantenimiento, generalmente mantengo mis correcciones de Firefox / IE en hojas de estilo aisladas y las compilo con algún tipo de script del lado del servidor, que considero preferible a las declaraciones condicionales de inclusión y hacks de JavaScript. Si utiliza el almacenamiento en caché con PHP, esto no supone un cuello de botella significativo ni una pérdida de tiempo de CPU.
IETester es una herramienta indispensable para verificar un diseño en todas las diferentes versiones de IE, e incluso utiliza el motor JScript adecuado para cada versión, que carecía de soluciones anteriores, menos confiables, como MultipleIEs.
En estos días, el mayor problema con el desarrollo de varios navegadores es JavaScript, y jQuery básicamente salvará su vida aquí. Como alguien que mantuvo un marco de JavaScript considerable para un sitio web corporativo en los días previos a las interfaces de AJAX y JavaScript, no hay límite para la cantidad de elogios que puedo dar por jQuery / Prototype / Dojo.
No conozco ningún software que compruebe activamente si hay problemas, pero Adobe ha lanzado recientemente BrowserLab , que realmente acelera las pruebas en BrowserLab navegadores.
Recomiendo mirar un marco CSS como BluePrint . Tiene una forma genérica de crear páginas utilizando cuadrículas y también tiene algunos css predeterminados para formularios, etc.
Los marcos habrán lidiado con muchas de estas peculiaridades en varios navegadores durante su desarrollo, por lo que podría ahorrarle mucho tiempo.
También recomendaría utilizar el restablecimiento de CSS . De esta manera, obtienes muchas inconsistencias desde el principio.
Un par de herramientas más incluyen
- Browsera - detección automática de problemas de diseño en varios navegadores
- LitmusApp: capturas de pantalla con etiquetado pasa / falla
- SuperPreview: extensión de Microsoft Expression Web (descarga independiente actualmente disponible) donde puede ver una captura de pantalla superpuesta de un navegador diferente
- Browserlab: extensión de Adobe Dreamweaver (actualmente disponible en línea independiente) donde puede ver una captura de pantalla de superposición de un navegador diferente
También recomiendo encarecidamente utilizar un restablecimiento de CSS para iniciar, como http://meyerweb.com/eric/tools/css/reset/
¿Por qué? Debido a que muchas de las inconsistencias entre navegadores se derivan del hecho de que el estilo predeterminado en el navegador difiere. Por ejemplo, un margen predeterminado puede hacer un diseño de elemento correctamente en un navegador, pero no en los otros.
Puede parecer extraño ser siempre un comportamiento por omisión, porque parece un desperdicio, pero es absolutamente necesario para tener una línea de base con la que trabajar.