![\"Moderniza](\"https:\/\/mlniuewdmffl.i.optimole.com\/w:300\/h:198\/q:mauto\/f:best\/http:\/\/disenoweb.mx\/wp-content\/uploads\/2017\/08\/2191ef87158dc25e8067490e643d1eb9-9000x9000-300x198.jpg\" "\\"2191ef87158dc25e8067490e643d1eb9-9000x9000-300x198")
<\/p>\n<\/p>\n
QU\u00c9 ES MODERNIZR<\/a><\/p>\n Modernizr es una librer\u00eda JavaScript que nos permite conocer la compatibilidad del<\/p>\n navegador con tecnolog\u00edas HTML5 y CSS3, lo que nos permitir\u00e1 desarrollar sitios web<\/em><\/p>\n que se adapten a las capacidades cada navegador.<\/p>\n Este framework es un paquete de detecci\u00f3n de las capacidades de un navegador relativas<\/p>\n a HTML5 y CSS3, esto es, una librer\u00eda JavaScript que nos informar\u00e1 cu\u00e1les de las<\/p>\n funcionalidades de estas tecnolog\u00edas est\u00e1n disponibles en el navegador del usuario, para<\/p>\n utilizarlas, o no, en cada caso Moderniza tu pagina web<\/strong><\/em>.<\/p>\n Sabiendo que nuestro navegador soporta ciertas capacidades de CSS3 o de HTML5,<\/p>\n podremos utilizarlas con libertad. De modo contrario, si sabemos que un navegador no<\/p>\n es compatible con determinada funcionalidad, podremos implementar variantes que s\u00ed<\/p>\n soporte y as\u00ed crear sitios web que se adaptan perfectamente al cliente web de cada<\/p>\n visitante.<\/p>\n Existen dos herramientas principales en Modernizr que se pueden utilizar para detectar<\/p>\n las funcionalidades que est\u00e1n presentes en un navegador. Una la podemos utilizar a<\/p>\n trav\u00e9s de JavaScript y otra directamente sobre c\u00f3digo CSS. En resumen, con Modernizr<\/p>\n podemos detectar las funcionalidades disponibles de CSS3 y HTML5.<\/p>\n 4.1 A\u00d1ADIR MODERNIZR A UNA P\u00c1GINA<\/p>\n El primer paso consistir\u00e1 en descargar el archivo con el c\u00f3digo fuente de Modernizr. Se<\/p>\n trata de un archivo con c\u00f3digo JavaScript que podemos encontrar en dos variantes:<\/p>\n Development: contiene el c\u00f3digo fuente completo, sin comprimir y con<\/p>\n comentarios. Debemos utilizar esta variante \u00fanicamente en desarrollo o cuando<\/p>\n queremos acceder a su c\u00f3digo, para comprenderlo o ampliarlo.<\/p>\n Production: es recomendable (o m\u00e1s bien obligatorio) utilizar esta variante cuando<\/p>\n pasamos a un entornos de producci\u00f3n. Al descargarnos Modernizr, tenemos la<\/p>\n posibilidad de generar una librer\u00eda \u00fanicamente con las funcionalidades que<\/p>\n queremos detectar, lo que nos permitir\u00e1 ahorrarnos una importante cantidad de KB<\/p>\n innecesarios dise\u00f1o<\/em>.<\/p>\n Una vez que hemos descargado nuestra librer\u00eda, debemos incluirla en el c\u00f3digo HTML de<\/p>\n la p\u00e1gina, de la misma manera que incluimos scripts JavaScript.<\/p>\n <script src=\u201d\/js\/lib\/vendor\/modernizr-custom.min.js\u201d><\/script><\/p>\n Seg\u00fan podemos leer en la documentaci\u00f3n de Modernizr, se aconseja colocar el<\/p>\n script dentro del HEAD, porque debe cargarse antes del BODY de la p\u00e1gina, debido<\/p>\n a un componente que quiz\u00e1s utilicemos, para permitir HTML5 en Internet Explorer,<\/p>\n llamado HTML5 Shiv. Adem\u00e1s, se recomienda colocarlo despu\u00e9s de los estilos CSS<\/p>\n para evitar un comportamiento poco deseable llamado FOUC, por el cual puede<\/p>\n mostrarse, por un peque\u00f1o espacio de tiempo, la p\u00e1gina sin los estilos CSS<\/p>\n aplicados dise\u00f1o web<\/em>.<\/p>\n A partir de este momento tendremos disponibles nuestros scripts de detecci\u00f3n de<\/p>\n funcionalidades as\u00ed como una serie de clases CSS que nos ayudar\u00e1n a aplicar estilos solo<\/p>\n cuando los navegadores los soporten Moderniza tu pagina web<\/strong><\/em>.<\/p>\nModerniza tu pagina web<\/strong><\/em><\/h2>\n