html - todos - prefijo que indica al navegador que se visita una página web

¿Cómo asegurarse de que el CSS funcione bien con todos los navegadores sin tener que realizar pruebas oculares en cada broswer?

Question

Hacer CSS para un sitio web para admitir todos los navegadores en diferentes versiones es realmente difícil. Especialmente, necesita tener diferentes navegadores configurados. Me pregunto si es posible probar el CSS y asegurarse de que funcione con todos los navegadores sin abrir cada navegador y verificar manualmente el diseño. o ¿Hay alguna manera rápida o estándar para hacer esto?

Gracias,

Answer 1

Algunas cosas importantes para que comiences tu viaje:

• Use un DOCTYPE o lanzará los navegadores al modo peculiar.
• Restablezca su CSS para que pueda aplicar los estilos que desee a los elementos.
• Use una biblioteca de Javascript , la más popular en estas partes es jQuery, y es la que personalmente recomiendo. Sin embargo, en realidad no importa con cuál vaya, siempre que use uno. Muchos chicos inteligentes han invertido muchas horas en resolver todas las incompatibilidades entre los navegadores. Tratar de hacer muchas cosas dinámicas en su sitio web con Javascript puro linda con el masoquismo.

Una vez que empecé a hacer estas cosas, hacer que mi sitio funcione de la misma manera en todos los navegadores se hizo mucho más fácil. No importa qué, sin embargo, tendrá que verificarlos todos. Simplemente no hay forma de evitar eso.

Answer 2

No se puede obtener una prueba de UI humana redonda. Estoy de acuerdo con los demás en que debe cumplir con los estándares y restablecer css.

Rara vez obtendrás HTML + CSS para renderizar exactamente lo mismo en todos los navegadores y en todas las plataformas, simplemente debido a la idiosincrasia de cada navegador. Pero, solo porque haya pequeñas diferencias de representación, no necesariamente significa que algo esté mal, esta es una buena razón para las pruebas de IU humanas.

Answer 3

Realmente no hay una manera estándar de hacer esto: es solo la naturaleza de la bestia; sin embargo, Adobe está trabajando actualmente en BrowserLabs, lo que debería ayudar a resolver este problema exacto.

Answer 4

Sería bueno si hubiera una herramienta automatizada para hacer esto. Desafortunadamente, la única forma de saber si algo es visualmente correcto es mirarlo.

Hay servicios (como BrowserShots ) que visitarán su sitio en diferentes navegadores y tomarán una captura de pantalla para usted y luego le permitirán descargar un archivo que contiene todas las representaciones de su sitio, pero aún tendría que verificarlas manualmente.

Las computadoras no son muy buenas para decir si algo se ve "bien" automáticamente o de lo contrario todos los navegadores siempre hacen exactamente lo que usted quiere decir (hacer las cosas bien).

Si está buscando probar JavaScript, puede probar un conjunto de pruebas llamado Selenium .

En el futuro, podría examinar un proyecto iniciado por el creador de jQuery llamado Test Swarm , que parece prometedor, pero que aún está en etapa de prueba y que quizás nunca se publique debido a los costos de ancho de banda. Le permitiría probar su JavaScript en cada navegador principal en cada plataforma principal utilizando un sistema distribuido. Sin embargo, esto sigue siendo un sueño imposible debido a algunas de las complicaciones involucradas en un sistema de este tipo.

Answer 5

1. Asegúrate de declarar un tipo de documento.
2. Use restablecer css.
3. Evite usar ancho y relleno (izquierda y derecha) en el mismo elemento donde pueda.
4. limpiar el código en HTML y css.
5. No use el margen hacia la izquierda y hacia la derecha cuando esté flotando elementos y use su desbordamiento principal: oculto, despliegue: en línea y alto: 1% si el padre no tiene una altura.
6. No le dé a un elemento tanto margen superior ni margen inferior sino solo margen superior o
   margen inferior. Debido a que los márgenes de los elementos adyacentes colapsan unos en otros, lo que hace que el posicionamiento sea algo impredecible para los principiantes.
7. No confíe en el índice z a menos que su scripting lo necesite.

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<script type="text/javascript" src="js/html5shiv.js" ></script>
<script type="text/javascript" src="js/html5.js" ></script>

puedes descargar shiv.js desde este navegador compacto

herramientas de prueba de compatibilidad del navegador:

http://crossbrowsertesting.com/

http://browsershots.org/

http://www.browsercam.com/

http://caniuse.com

http://www.findmebyip.com/litmus/

Answer 6

Sugiero usar uno de los marcos de desarrollo de Front-End listos para usar como Twitter Bootstrap o Foundation . Ambos están bien documentados y probados previamente, por lo que esto reducirá el dolor de las pruebas.

Ellos contienen:

• Restablecer CSS / Normalizar

• Componentes listos para usar (Botones, Elementos de formulario, Menús ... etc.).

• Diseño de cuadrícula (que es la manera perfecta de organizar cosas en su página web).

• JavaScript.

Por supuesto, tendrá que hacer sus propias pruebas mientras ajusta esos marcos, además de todas las herramientas mencionadas anteriormente, sugiero IE-Tester , una herramienta de depuración realmente impresionante para IE (que es la fuente del dolor).

Finalmente, y por el bien de la perfección, es mejor probar su sitio web (lo más posible) para cruzar todos los navegadores y dispositivos, especialmente si está haciendo un diseño receptivo.

¡No tienes más remedio que hacerlo! Es por eso que el salario de los diseñadores web es generalmente alto x-)

Answer 7

1. Use una hoja de estilo de reinicio de CSS
2. Utilice buenos marcos de CSS (anteproyecto, repetitivo, etc.)
3. Esto no es posible.