10 puntos a tener en cuenta al crear un sitio web entre navegadores

Teóricamente, crear una página web es fácil. Los aspectos principales incluyen escribir un código HTML, probarlo en un navegador web y cargarlo. HTML y CSS son estándares, lo que significa que una página web que funciona bien en un navegador en particular puede no estar limpia en otros navegadores.

Por supuesto, las cosas no resultan tan simples en la práctica. Hay una variedad de navegadores, y cada navegador muestra HTML y CSS de una manera diferente.

Para garantizar que las páginas web funcionen de manera uniforme en todos los navegadores web, los diseñadores web deben practicar la codificación entre navegadores. En esta publicación, discutiremos 10 de los trucos probados y comprobados que puede seguir para lograr un sitio web libre de errores y compatible con todos los navegadores.

Una breve introducción a CSS

CSS o las hojas de estilo en cascada es un conjunto de instrucciones de formato web que controla la apariencia de las páginas web. Algunos navegadores compatibles con CSS son:

• ES DECIR
• Borde
• Firefox
• Cromo
• Safari
• Ópera
• iOSSafari
• Ópera
• Navegador Android
• Chrome para Android

Pero antes de llegar a la conclusión de que le ahorrará mucho tiempo, debe comprender que la mayoría de los navegadores web no son totalmente compatibles con todas sus funciones.

CSS actúa como un componente de representación que caracteriza los componentes de una página web. Al mismo tiempo, las hojas de estilo en cascada controlan el diseño de varias páginas al mismo tiempo.

Si bien no hay ningún secreto para seleccionar un sitio web perfecto compatible con varios navegadores que asegure la estética increíble que desea, hay algunos aspectos que se pueden solucionar para mejorar sus posibilidades. Aquí hay diez consejos fáciles de seguir pero efectivos para codificar un sitio web multinavegador.

1. Cuanto más simple, mejor

Cuanto más complejos se vuelven el HTML y el CSS, más probable es que sean propensos a errores y fallas. Intente mantener el diseño elemental en la etapa de diseño, es decir: un encabezado, algunas columnas y un pie de página. Si su diseño tiene varios cuadros de barra lateral, las cosas se volverán agitadas a medida que avanza el proceso.

Evite usar muchos elementos anidados e integre solo los elementos requeridos. Para crear un menú, use ul y li en lugar de una tabla o una serie de elementos p.

2. Valide su código HTML, CSS y RSS

Nada molesta más a un diseñador que diseñar cuidadosamente una página web y, cuando llega el momento de probarla, sigue apareciendo un error desconocido. En tales situaciones, un diseñador debe controlar los nervios y comenzar con el marcado y la validación de las hojas de estilo.

Hay muchas herramientas gratuitas y de pago disponibles en la web para ver si sus marcas HTML y CSS son legítimas. Con la ayuda de estas herramientas, puede estar seguro de que las marcas son perfectas y las páginas web muestran el contenido de la forma que desea.

bicho de fuego

Firebug es un depurador y editor todo en uno. Permite a un desarrollador trabajar en las marcas HTML, JavaScript y CSS. Puede monitorear las marcas en tiempo real, resaltarlas y eliminarlas también.

Validador HTML

Mientras valida la fuente de la página, se informan los errores y fallas. Y si no puede encontrar lo que está mal, la herramienta le ofrece algunas sugerencias.

Validador.w3.org

Tienes que subir el archivo que quieres validar. El validador te mostrará los resultados en diferentes formatos, como:

• con recomendaciones
• como un esquema

rompecabezas.w3.org

La herramienta verifica su marcado en busca de posibles errores y fallas. Puede establecer múltiples perfiles CSS, para elegir un determinado medio para la hoja de estilo y controlar la información en el informe.

Relajado.vse.cz

Esta herramienta no utiliza las reglas del W3C para la validación, sino que se basa en los protocolos personalizados integrados. Puede elegir la versión de HTML que desea usar, si desea ver el código fuente y muchas otras opciones.

3. No trabaje con el modo peculiaridades del navegador

Algunos navegadores web cuentan con un modo peculiar. En esto, el navegador compite con sus versiones anteriores, que a menudo están llenas de errores. Aunque permite que un sitio web antiguo sea compatible con los navegadores web actuales, se convierte en una tarea complicada si busca páginas web estandarizadas. Esto se debe a que, en un modo peculiar , las páginas web no se muestran de manera estandarizada, sino de una manera única.

De forma predeterminada, un navegador web cambia al modo peculiar si no incluye la declaración de tipo de documento o el DOCTYPE. Por lo tanto, siempre debe recordar agregar un DOCTYPE válido al final de la página web.

4. Practica las reglas de reinicio de CSS

Cada navegador web tiene sus propios valores predeterminados para ciertos aspectos, como la altura y el ancho de la línea. Estos valores predeterminados a menudo entran en conflicto con las reglas CSS personalizadas y distorsionan la apariencia general de las páginas web.

Para evitar el dilema de personalizar cada regla CSS que escriba, puede realizar todo este restablecimiento al principio de su archivo CSS. Una vez que agregue estas reglas en su hoja de estilo, puede estar seguro de que está trabajando desde el mismo punto para todos los navegadores.

5. Usa Firefox

Generalmente, los desarrolladores prueban las páginas web en un solo navegador a la vez. Luego, van a otros navegadores y continúan haciendo los cambios necesarios a medida que pasan de un navegador a otro. Este es un enfoque ideal en lugar de validar un sitio web en todos los navegadores en una sola ejecución.

Para crear su sitio web, Firefox es el navegador preferido, ya que facilita la solución de cualquier problema de compatibilidad con otros navegadores. Firefox viene con una gran cantidad de complementos, lo que lo hace bastante fácil de usar para los desarrolladores. Si las páginas web están limpias en Firefox, puede estar seguro de que funcionarán bien en otros navegadores.

6. Pruebas

Los navegadores web de hoy en día tienen peculiaridades de renderizado, por lo que es responsabilidad del desarrollador probar las marcas en cada uno de ellos. Aquí hay una lista de los principales navegadores web:

• explorador de Internet
• Firefox
• Safari
• Ópera (44.0.2510.1218)
• Borde de Microsoft
• navegador de la UC

Como un enfoque rápido, puede optar por un servicio de prueba en línea. Hay muchos sitios web, como Browsershots, que toman capturas de pantalla de su sitio y le muestran cómo aparecerán en diferentes sistemas operativos y navegadores web. Estas capturas de pantalla se envían por correo electrónico o simplemente se ponen a disposición para su descarga. Algunas de las herramientas son de pago pero seguro que te avisan de antemano de los problemas de compatibilidad que pueden tener las páginas web.

Los trucos de CSS no dan frutos si no puede probarlos en los principales navegadores web. Aquí hay algunas herramientas útiles para autenticar la compatibilidad entre navegadores de las marcas HTML y CSS:

En modo capricho

Esta es una manera fácil pero efectiva de buscar fallas en los navegadores cruzados. Quirksmode interpreta el CSS y muestra todas las posibles preocupaciones.

Capturas del navegador

La herramienta Browsershots toma capturas de pantalla de las páginas web y le muestra cómo se mostrará su sitio web en diferentes navegadores web y sistemas operativos.

Probador de Internet Explorer

Esta es una aplicación web confiable que le permite analizar la apariencia de las páginas web en diferentes versiones de Internet Explorer. La herramienta prueba la plantilla en diferentes versiones de navegadores y sistemas operativos y muestra los resultados en una interfaz similar a Ms Word.

7. Usa comentarios condicionales

Hay momentos en los que intenta su mejor nivel pero aún así, no puede obtener los resultados deseados en ciertos navegadores, especialmente en Internet Explorer. Aquí, necesita algunos trucos confiables y probados para ser verdaderos hacks.

Una alternativa fácil para esto, puede incluir el marcado IE only con comentarios. Con este simple truco, puede presentar HTML o JavaScript adicional solo para IE.

8. Haz que IE6 sea compatible con el formato PNG

Los PNG son prodigiosos. Puede tener más de 250 grados de transparencia en una imagen. Para crear imágenes optimizadas para la retina, puede mostrar sus habilidades de diseño, como agregar bordes suaves y fondos personalizados.

Pero Internet Explorer no es capaz de mostrar archivos PNG transparentes de manera efectiva y mostrar cuadros de errores donde se supone que debe ser transparente. Con un poco de optimización, puede hacer que los PNG funcionen sin problemas en IE6. Esto no requerirá que realice ajustes importantes en el CSS.

Puede usar IE PNG Fix para lo mismo.

9. Agregar alternativas

La mayoría de los navegadores web son compatibles con Flash y JavaScript. Es factible aprovechar las alternativas en caso de que el navegador web de un visitante no admita dichas funciones.

Por ejemplo, en el caso de Safari en iPhone, los menús de navegación Flash se vuelven inútiles ya que el navegador no es compatible con Flash.

Aquí hay una hoja de trucos rápida para ahorrar tiempo al experimentar con diferentes archivos multimedia:

• Imágenes : con cada etiqueta img, agregue un atributo alt que describa la imagen.
• Películas Flash : evite usar Flash para funciones principales, como la navegación.

10. Opte por la codificación manual

Este puede ser un punto de discusión entre los diseñadores web. Muchos webmasters hoy en día utilizan herramientas automatizadas para ahorrar tiempo. Son útiles especialmente si no está bien versado en HTML. Sin embargo, es importante tener en cuenta que tales herramientas no coinciden con la flexibilidad y la elegancia de un diseñador que hábilmente codifica a mano las marcas HTML entre navegadores.

Codificar las marcas HTML, XHTML y CSS a mano es muy útil. Usted tiene el control total de lo que está desarrollando y siempre modifica el programa según las necesidades de las preferencias.

Si la codificación manual le resulta agitada, puede utilizar un editor de páginas Web basado en texto. Hay muchas herramientas de este tipo disponibles en Internet. Puede probar cualquiera de los siguientes:

• CKEditor
• Taza de café
• Texto sublime del átomo
• coda

Terminando

Aquí hay una lista de verificación rápida que puede considerar después de haber terminado de codificar un sitio web de navegador cruzado:

• Cada navegador web tiene un curso de acción individual. Con la codificación HTML en los documentos CSS, debe marcar las páginas web de tal manera que aparezcan limpias en todos los navegadores.
• Para mantener su sitio libre de fallas y errores, elimine los códigos XHTML, HTML o CSS no válidos que pueden ser resaltados por las herramientas mencionadas anteriormente.
• Controle los navegadores que traen el máximo tráfico a su sitio web.
• Realice una verificación fundamental en su sitio para medir la efectividad en los navegadores.
• Explore el modelo de caja CSS para saber más sobre los formatos de navegadores cruzados.
• Usa hábilmente los planes de sombreado y los tonos de estilo de texto.
• Tenga en cuenta para establecer la mejora del contenido, la disposición y el espacio.

Dedicar algo de tiempo extra para que las páginas web funcionen sin problemas en tantos navegadores como sea posible siempre vale la pena. No solo se asegurará de que el sitio web sea accesible para la máxima audiencia, sino que también mantendrá contentos a los visitantes, lo cual es importante.