Visitas: 48  
Tiempo total: 1 días con 1:7:49 hrs  

Para el desarrollo de un sitio web es necesario tener en cuenta la compatibilidad de navegadores para que las funcionalidades para las cuales fueron creadas puedan ser utilizadas por los usuarios.

En un caso de una empresa estricta será necesario obtener el mismo resultado tanto en la última versión de Firefox  como la versión 6 de Internet Explorer.  Para obtener una compatibilidad al 100% es necesario utilizar CSS valido y ajustes o arreglos CSS con Javascript para solucionar problemas de, por ejemplo una capa o div que no está alineado correctamente en IE como en los demás navegadores.

Algo que se debe de mencionar es que no es necesario contar con maquinas virtuales para utilizar las distintas versiones de los navegadores, Internet Explorer es uno de los principales navegadores que generan problemas y para solucionar su atrocidad se debe de utilizar IEtester, por ejemplo.

Cuando se realiza un sitio web con código HTML valido y estándares CSS se tendrá un sitio web que es compatible con la mayoría de navegadores web y con pequeños errores (la mayoría de veces sin errores) en por ejemplo Internet Explorer o en Safari, y por ende en Chrome.

Para solucionar este tipo de errores es necesario la utilización de Javascript, la cual es la solución más simple y rápida, para esto a continuación una lista de variables generales para detectar el navegador del usuario:

var IE6 = $.browser.msie && parseFloat($.browser.version) < 7;
var IE7 = $.browser.msie && parseFloat($.browser.version) < 8;
var IE8 = $.browser.msie && parseFloat($.browser.version) < 9;
var IE9 = $.browser.msie && parseFloat($.browser.version) < 10;
var IE = navigator.appName == "Microsoft Internet Explorer";
var FF3 = navigator.userAgent.split('/').pop()<4;
var SF = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
var CH = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
var FF = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var OP = navigator.userAgent.indexOf('Opera')>=0;

Otro de los problemas más comunes es la utilización de fuentes especificas en el documento HTML, dado que al utilizar código simple CSS para agregar los archivos de fuentes externos, el texto se mostrara correctamente únicamente en algunas de las últimas versiones de los navegadores, para solucionar esto es necesario utilizar el siguiente código CSS:

@font-face {
    font-family: "Nueva_fuente";
    src: url('archivo_fuente.eot');
    src: url('archivo_fuente.eot?#iefix') format('embedded-opentype'),
        url('archivo_fuente.woff') format('woff'),
        url('archivo_fuente.ttf') format('truetype'),
        url('archivo_fuente.svg#tool') format('svg');
    font-weight: normal;

    src: url('archivo_fuente.eot?iefix') format('eot'), /* IE 5-8 */
    url('archivo_fuente.woff') format('woff'); /* IE9, firefox 3.5+, Opera 11.10 */
}

El código anterior funciona correctamente en todos los navegadores y es el resultado del tiempo que he desarrollado algunos sitios web a nivel profesional. En el código anterior se puede observar las distintas extensiones de los archivos de fuente, el problema que esto genera es que el desarrollador nunca tendrá todos los archivos a su disposición.

Para obtener los archivos de la fuente, es necesario conseguir las extensiones otf o ttf utilizando Google, una vez se ha encontrado uno de los dos archivos anteriores, se pueden utilizar los siguientes sitios web para obtener los demás archivos (woff, svg y eot):

http://www.font2web.com/
http://www.fontsquirrel.com/tools/webfont-generator

La aplicación que obtiene los archivos de fuentes renderizados para todos los navegadores es el del sitio web fontsquirrel, esto es dado que en algunas ocasiones las fuentes funcionan correctamente en Firefox pero distorcionadamente en Safari.

Referencias

[http://www.arthurbrownjr.com/wp-content/uploads/2008/07/browser-logos-660×220.png]
[http://weblog.intunet.co.uk/wp-content/uploads/2010/01/fontsquirrel.jpg]
[http://www.todoprogramas.com/photos/2012/2/1010.7282.7153.1a.500.jpg]