Diseñar para la web es bastante difícil sin tener que preocuparse por la compatibilidad entre navegadores. Sin embargo, ya que cada motor de diseño ha evolucionado para interpretar las directrices del Wide Web Consortium (W3C) para Cascading Style Sheets (CSS) y HyperText Markup Language (HTML) de forma diferente, páginas web muestran a menudo sorprendentes discrepancias de un navegador a otro. Para crear un sitio web de forma fiable consistente a través de todos los principales navegadores, es necesario un enfoque sistemático, eficiente y práctico para determinar errores. También tendrá un conocimiento práctico de los estándares CSS y HTML compatible.
Instrucciones
1 Construir su diseño para Firefox. Firefox ha mantenido constantemente al tanto de los últimos cambios en la CSS y tiende a ser estable, por lo que es el candidato punto de partida para todos sus diseños web. Completar su diseño por primera vez en Firefox, a continuación, pasar a otros navegadores para comprobar si hay inconsistencias.
2 Trabajar con extensiones de diseño de Firefox. Extensiones le ayudará a localizar errores en el modelo de objetos de documento (DOM), encontrar selectores CSS apropiadas y sugerencias para el código de escaneo para las propiedades CSS.
3 Probar su diseño en los navegadores WebKit (Chrome / Safari). El acceso de Chrome construido en la herramienta de depuración haciendo clic derecho en la página y seleccionar "Inspeccionar elemento". Dado que tanto Chrome y Safari utilizan el mismo motor WebKit, que normalmente sólo tendrá que probar en uno de estos dos navegadores, aunque todavía es una buena práctica para comprobar ambos.
4 Anote cualquier inconsistencia que usted observa en Chrome vs Firefox. Abra el lado dos navegadores al lado del otro. Si no ve inconsistencias, proceder directamente a la prueba en Internet Explorer en el paso 8. Si aparecen inconsistencias en Chrome, a continuación, consulte los pasos 5, 6 y 7.
5 técnicas de estudio CSS. Evitar o solucionar los problemas y las inconsistencias de navegación mediante la aplicación de una variedad de técnicas para el problema. Aprender estas estudiando el trabajo de otros, por ejemplo, en los muchos blogs en línea dedicados a la discusión y la enseñanza de técnicas CSS. Leer con regularidad, o buscar a través de ellos cuando se encuentra con un problema específico.
6 Escribe marcado estructural y CSS de presentación. Usar etiquetas HTML para organizar la estructura del documento de su página web, pero utilizar exclusivamente CSS para definir las propiedades de estilo de la página. Por ejemplo, no utilizar etiquetas HTML en negrita, cursiva o fuertes el estilo de su texto. Utilice las propiedades de fuente CSS en su lugar.
7 Añadir una hoja de estilo-cromo específica. Sólo haga esto si se puede inconsistencias no correctas entre Chrome y Firefox mediante la mejora de la codificación de estilo compartido entre ellos. Fragmentos y JavaScript para hojas de estilo y cromo específica están disponibles en línea.
8 Prueba en las últimas versiones de Internet Explorer (IE). No se deje intimidar por los problemas; A menudo, un simple cambio en el estilo o el ajuste estructural para el HTML es todo lo que tiene que hacer. depuración de programas, tales como IE Tester, facilitan el proceso de pruebas en diferentes versiones de IE, así como para inspeccionar el código en sí.
9 Crear una hoja de estilo IE-específica. No gaste demasiado tiempo tratando de manipular CSS para crear una apariencia consistente en IE. Basta con crear una nueva hoja de estilos específicos de IE, y modificar los selectores CSS y las propiedades que necesita. Fragmentos de la adición de hojas de estilo de IE a sus plantillas HTML están disponibles en línea.
10 Mantenga un manual de referencia CSS cerca. Comprar un manual de bolsillo o acceder a la documentación en línea del W3C en otra ventana del navegador.
Consejos y advertencias
- Regularmente consultar las estadísticas de uso del navegador del W3C para hacer juicios educación sobre qué navegadores para probar y diseño para. Los navegadores más antiguos se reemplazan regularmente por los más nuevos, más estándares compatibles.
- Manténgase al día sobre las últimas noticias de CSS y HTML y aprender nuevas técnicas mediante la lectura de la página web y los blogs de diseño del W3C.
- Hacer preguntas en foros de diseño web.
- Los navegadores siempre están cambiando. Mantenerse al día en los navegadores más populares y más estables, y sustituir el mejor y más nuevo de "Firefox" en este artículo.
- Aplicar la hoja de estilos de IE para todas las versiones de IE que se está probando. Puede crear hojas de estilo para todas las versiones de Internet Explorer o algunos de ellos (por ejemplo, IE7, IE8). Si se hace referencia de forma incorrecta una cierta versión de IE, sus propiedades de tipo no serán de aplicación a la misma.
- Evitar que comienza en el IE, a medida que va a utilizar el motor del navegador más peculiar como el fundamento y punto de referencia para su implementación en código.