Moderniza tu pagina web

Moderniza tu pagina web

Moderniza tu pagina web Moderniza tu pagina web Moderniza tu pagina web 2191ef87158dc25e8067490e643d1eb9 9000x9000 300x198

QUÉ ES MODERNIZR

Modernizr es una librería JavaScript que nos permite conocer la compatibilidad del

navegador con tecnologías HTML5 y CSS3, lo que nos permitirá desarrollar sitios web

que se adapten a las capacidades cada navegador.

Este framework es un paquete de detección de las capacidades de un navegador relativas

a HTML5 y CSS3, esto es, una librería JavaScript que nos informará cuáles de las

funcionalidades de estas tecnologías están disponibles en el navegador del usuario, para

utilizarlas, o no, en cada caso Moderniza tu pagina web.

Sabiendo que nuestro navegador soporta ciertas capacidades de CSS3 o de HTML5,

podremos utilizarlas con libertad. De modo contrario, si sabemos que un navegador no

es compatible con determinada funcionalidad, podremos implementar variantes que sí

soporte y así crear sitios web que se adaptan perfectamente al cliente web de cada

visitante.

Existen dos herramientas principales en Modernizr que se pueden utilizar para detectar

las funcionalidades que están presentes en un navegador. Una la podemos utilizar a

través de JavaScript y otra directamente sobre código CSS. En resumen, con Modernizr

podemos detectar las funcionalidades disponibles de CSS3 y HTML5.

4.1 AÑADIR MODERNIZR A UNA PÁGINA

El primer paso consistirá en descargar el archivo con el código fuente de Modernizr. Se

trata de un archivo con código JavaScript que podemos encontrar en dos variantes:

Development: contiene el código fuente completo, sin comprimir y con

comentarios. Debemos utilizar esta variante únicamente en desarrollo o cuando

queremos acceder a su código, para comprenderlo o ampliarlo.

Production: es recomendable (o más bien obligatorio) utilizar esta variante cuando

pasamos a un entornos de producción. Al descargarnos Modernizr, tenemos la

posibilidad de generar una librería únicamente con las funcionalidades que

queremos detectar, lo que nos permitirá ahorrarnos una importante cantidad de KB

innecesarios diseño.

Una vez que hemos descargado nuestra librería, debemos incluirla en el código HTML de

la página, de la misma manera que incluimos scripts JavaScript.

<script src=”/js/lib/vendor/modernizr-custom.min.js”></script>

Según podemos leer en la documentación de Modernizr, se aconseja colocar el

script dentro del HEAD, porque debe cargarse antes del BODY de la página, debido

a un componente que quizás utilicemos, para permitir HTML5 en Internet Explorer,

llamado HTML5 Shiv. Además, se recomienda colocarlo después de los estilos CSS

para evitar un comportamiento poco deseable llamado FOUC, por el cual puede

mostrarse, por un pequeño espacio de tiempo, la página sin los estilos CSS

aplicados diseño web.

A partir de este momento tendremos disponibles nuestros scripts de detección de

funcionalidades así como una serie de clases CSS que nos ayudarán a aplicar estilos solo

cuando los navegadores los soporten Moderniza tu pagina web.

Moderniza tu pagina web

#Modernizatupaginaweb

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Necesitas crear un sitio genial?
Scan the code