Prefijos de los navegadores. Este tema es muy importante para que nuestras webs y aplicaciones funcionen bien para todos nuestros usuarios. CSS3 fue un punto de inflexión para los diseñadores web. Los navegadores se fueron poniendo al corriente poco a poco, y no todos fueron incluyendo las nuevas características de CSS al mismo tiempo. Cada navegador evoluciona de una forma distinta, incluso son capaces de crear nuevas características CSS que sólo se pueden usar en su navegador.
Prefijos
-webkit- Chrome, Safari, Android, iOs 
-moz- Firefox
-o- Opera
-ms- Microsoft Internet Explorerhttp
Ejemplo
- background-image: radial-gradient(#FFF,#000);
- background-image: -webkit-radial-gradient(#FFF,#000);
- background-image: -moz-radial-gradient(#FFF,#000);
- background-image: -o-radial-gradient(#FFF,#000);
- background-image: -ms-radial-gradient(#FFF,#000);
Cuando se empezó a usar HTML5, los navegadores empezaron a actualizarse para poder usar la nuevas etiquetas, atributos y características. Con el navegador Internet Explorer no fue el caso y fué un rompecabezas para los diseñadores. Había elementos como section, article, header que desconocía el navegador, por lo que la solución fue buscarla en el lenguaje javascript. Se crearon librerias javascript en las que si el navegador de Internet Explorer no sabía que hacer con ciertos nuevos elementos se le hacía entender con javascript. Para solucionar este problema añadimos en todos nuestro archivos en la parte del head el siguiente script:
Código
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
Con este código conseguimos que los navegadore IE9 e inferiores (IE8,IE7) interprete los nuevos elementos.
Modernizr : Según la definición que se hace de esta librería Javascript en su página web, es un conjunto de pruebas super rápidas , que se ejecutan a medida que carga la página web, y luego puedes usar los resultados para adaptar la experiencia al usuario. Nos permite detectar que elementos de nuestra web puede ser que no se ejecute igual en cada navegador. Se recomienda usar Firebug para Firefox o herramientas de desarrollador en el caso de Chrome o Explorer, para detectar aquellas etiquetas o elementos que puede que trabajen de distinta manera según el navegador.
Pasos a seguir
- Descargar el archivo con el código fuente de Modernizr (seleccionaremos sólo los modulos que vayamos a usar).
- Una vez descargado e incorporado al directorio de nuestro trabajo. Incorporaremos en nuestro código, añadiendo el siguiente código en cada head de nuestros archivos.
- Una vez instalado, podemos ejecutar nuestro proyecto. El desarrollador lo que debe hacer es comprobar aquellos elementos que un naveador antiguo puede provocar problemas de visualización. Entonces deberá crear las clases necesarias para que nuestro proyecto se pueda ver en todos los navedares de la misma manera.
<script src=”../modernizr.js"></script>
normalize.css : es un fichero CSS cuyo peso es insignificante en comparación a otras herramientas que puede tener nuestro proyecto. La finalidad es que nuestro proyecto se vea de la misma forma se ejecute en un navegador u otro.
Pasos a seguir
- Descargar el archivo con el código fuente de normalize.css.
- Una vez descargado e incorporado al directorio de nuestro trabajo. Incorporaremos en nuestro código, añadiendo el siguiente código en cada head de nuestros archivos.
<link rel="stylesheet" href="normalize.css" />
