¿Cuáles son los pasos cronológicos para construir un sitio compatible con el navegador cruzado?

Question

Estoy trabajando en mi primer proyecto que me obliga a preocuparme por la compatibilidad con navegadores cruzados. Como esta es la primera vez que lo hago, no sé cómo completar el proyecto. Estoy específicamente preocupado por IE. ¿Debo completar mi proyecto en un navegador más elegante y luego hackearlo para trabajar en IE, o debo construir mi programa simultáneamente en ambos entornos?

Answer 1

Primero diseñe su sitio para que funcione en navegadores de reclamos estándares. Siempre empiezo con Firefox, incluso cuando desarrollo en la Intranet de mi compañía (donde todos usan IE). Hacerlo te permitirá concentrarte en corregir tu marcado y CSS. Esto es lo más importante.

Lo importante a tener en cuenta es que querrá "probar en el futuro" su sitio, y concentrarse en un navegador que cumpla con los estándares lo ayudará a hacerlo.

Luego, una vez que esté seguro de que su sitio se ve correcto (validators es su amigo), pruébelo en las versiones de IE que desee. Para que su diseño se vea bien en IE, recomiendo usar diferentes hojas de estilo para cada versión de IE, usando conditional comments.

Además, debe tener en cuenta que muchos otros han estado en el mismo escenario que usted, y hay bastante ayuda disponible. Un método popular de obligar a IE a comportarse es el ie-7.js project.

Por último, ser conscientes de los principales errores de IE, tales como:

• IE6 Box Model Bug
• IE6 PNG transparente (que he utilizado this fix en el pasado)

Answer 2

hay muchas herramientas que hacen la vida mucho más fácil para usted. Por ejemplo, css framework llamado blueprint puede usar, ya tiene todo configurado para cada navegador específico para que obtenga el mismo resultado en todos los navegadores . Y al usar jquery como marco de JavaScript, agrega un seguro adicional que lo tendrá funcionando en la mayoría de los navegadores.

pero recuerde que no existe la compatibilidad del navegador cruzado al 100% para todos los navegadores y todas las versiones en el mundo.

Answer 3

que desarrollo para Firefox primero, y luego resolver el buggery de IE. Raramente lo "pirateo", más bien encuentro algo que funciona en ambos, o en el peor de los casos uso IE comentarios condicionales. Solo las preferencias de un codificador. Siempre es una buena idea probar con Safari también.

Dos grandes ventajas de Firefox son: la Consola de error y el complemento Firebug.

Answer 4

Algunos consejos:

1. Código de Normas — inicio al asegurar que lo que acabas desarrollado trabajos en Firefox y Chrome, a continuación, compruebe que en el IE. Por lo general, luego lo verifico en Safari. Siempre es mejor asegurarse de que su marcado/código funcione primero en un navegador que cumpla con los estándares.
2. Validar temprano, Validar a menudo — No desea que su diseño se vea perfecto en un navegador, descubra que está roto en otro, descubra que para arreglar el diseño roto necesita corregir algunos HTML/CSS no válidos, solo para descubrir que ahora el primer navegador se ve mal.
3. Mejora progresiva — será su amigo. Comience básico, con HTML simple y CSS simple, y sin JavaScript en absoluto. Repita los consejos n. ° 1 y n. ° 2, luego avance a estilos y diseño más complejos. Continúe este proceso iterativo hasta que esté satisfecho con el diseño en todos los navegadores. Solo entonces debería considerar JavaScript para pulir el sitio.
4. Revise cada navegador a menudo — No desarrolle todo el sitio web en un solo navegador compatible como Firefox, y luego decida "ver qué está roto" en IE. Si tiene un sitio web complejo y dinámico, podría haber MUCHOS problemas en Internet Explorer. Tratar de descifrar cada uno cuando se combinan es una pesadilla.
5. Restablecer estilos de hoja — Como @Eir mencionó en los comentarios, busque una buena hoja de estilo de restablecimiento. Aunque tienen fallen out of favor para algunas personas, encuentro que poner todos los navegadores en el mismo lugar desde el principio ayuda enormemente.
6. Use un Framework — Creo que CSS Frameworks es excesivo, pero algunas personas juran por ellos, por lo que cada uno es suyo. Por otro lado, tan pronto como haya llegado a la fase de desarrollo de JavaScript, le recomiendo usar jQuery o MooTools. Están muy enfocados en eludir las inconsistencias entre navegadores.
7. Deje que JSLint hiera sus sentimientos — Incluso cuando se utiliza un marco de JavaScript, existen ciertos estándares de codificación a los que JSLint le ayudará a cumplir. Algunas de las opciones son un poco estrictas, pero prometo que si limpia sus scripts a través de esta herramienta con frecuencia durante el desarrollo, casi nunca tropezarán con esos tiempos extraños cuando todo parece funcionar en todos los navegadores excepto IE.

¡Y algunas herramientas geniales! Todo en la lista anterior debe considerar práctica obligatoria. Lo siguiente puede condimentar para arriba para usted en caso de apuro, pero es opcional:

1. CSS Browser Selector — es raro que se necesita esto, pero si todo lo demás falla, es mucho más frío que el uso de una hoja de estilo separada sólo para un navegador (desprecio los comentarios condicionales). Básicamente agrega clases a su etiqueta <html>, por lo que puede hacer cosas como las siguientes en su hoja de estilo principal: .ie7 #header {/*stylese here for IE7 only*/}. Es compatible con muchos navegadores en muchos sistemas operativos. Y es rápido.
2. Browsershots — No hay nada como la cosa real, pero si no se puede instalar un conjunto de navegadores, y esto puede ayudar a other tools like it.
3. IE6 CSS Fixer — de plano Rechazo para depurar mis diseños en IE6. Coaccioné a mi compañía (a través de muchas reuniones llenas de disgusto con TI y administración) para dejar de apoyarla (gracias a Dios).Es contraproducente perder tanto tiempo forzando esta pila de ahem ... De todos modos, si no eres como yo y necesitas soportar IE6, esta herramienta puede ayudarte.

Answer 5

oooooo, buena pregunta:

Esta es mi opinión:

1. Decidir lo que usted está apoyando los navegadores. Sugiero IE 7 + 8, FF, Chrome y Safari en orden de importancia. (¡solo soporta IE6 si es absolutamente necesario!). Ayuda si conoce su base de usuarios aquí.
2. Utilice un restablecimiento de css. Los diferentes navegadores tienen diferentes estilos predeterminados. un restablecimiento css le da una base consistente.
3. Mantenga su marcado tan simple como sea posible. Siga los estándares (y vea la mejora progresiva en la respuesta de Stephen).
4. Pruebe cada paso del camino en los buscadores de destino. De esa forma, puedes corregir los problemas de inmediato. http://crossbrowsertesting.com/ es el mejor recurso para esto, pero también hay otros gratuitos para capturas de pantalla.
5. Evite Hacks tanto como sea posible. La mayoría de los problemas con navegadores cruzados en estos días se pueden resolver sin recurrir a los piratas informáticos.
6. Haga preguntas aquí cuando se queda atascado. Si este es su primer proyecto relacionado con navegadores, se sentirá confundido por las incoherencias. Todos enfrentamos estos problemas y estamos contentos de ayudar.
7. Sea correcto con el hecho de que las páginas web no se verán exactamente iguales en todos los navegadores. (una vez más, ver mejora progresiva).

Buena suerte codificando!

Answer 6

En teoría sería lo mejor para el desarrollo de todos los navegadores a la vez, siempre pruebas para todos los navegadores ...

realistas, que rara vez sucede ... Me suelen desarrollar/prueba con Firefox. cuando introduzco javascript o css complejos, reviso, es decir ... esta herramienta es increíblemente útil para verificar todas las versiones a la vez ... google ie tester.

Al marcar todos los navegadores, a intervalos regulares, y cuando se realizan cambios complejos, se asegura que las principales características son compatible :)

También, asegurando que todo el código es válido no sólo es una buena práctica, pero ayuda identificar los problemas cruzados del navegador ... google w3schools validator :)

El uso de bibliotecas de Javascript como jquery también ayuda en la compatibilidad con navegadores cruzados, y algunas incluso vienen con bibliotecas CSS. Estas bibliotecas están diseñadas específicamente para ofrecer funciones rápidas y confiables que, por lo general, están garantizadas por varios navegadores.

Por último, antes de lanzar, utilice launchlist para comprobar que todas las obras: http://lite.launchlist.net/

esperanza todo lo que tiene sentido y ayuda con su primer proyecto :)

Answer 7

también debe centrarse en restablecer CSS como this