Diseño web Cancún
AÑADIR MODERNIZR A UNA PÁGINA
Diseño web Cancún 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.
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> diseño
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 .
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 diseño web.
OBJETO MODERNIZR
Cuando tenemos Modernizr cargado en nuestra página, se crea automáticamente un objeto JavaScript que tiene una serie de propiedades que nos indican si están o no disponibles cada una de las funcionalidades presentes en CSS3 y HTML5. Las mencionadas propiedades contienen simplemente valores booleanos (true o false) que podemos consultar para saber si están o no disponibles las funcionalidades que deseamos utilizar diseño web guadalajara.
El uso es tan sencillo como se indica a continuación:
if (Modernizr.boxshadow) { // Podemos aplicar sombras! } else { // La propiedad box-shadow no está disponible }
Aquí estamos consultando la propiedad boxshadow del objeto Modernizr. Esta propiedad nos indica si el navegador es compatible con el atributo box-shadow de CSS3, que sirve para crear cajas de contenido con sombreado sitio web.
Ahora veamos otro ejemplo similar que detectaría si está disponible el elemento canvas del HTML5.
if (Modernizr.canvas) { // Podemos utilizar canvas! } else { // El elemento canvas no está disponible }
Este es un simple ejemplo que comprueba si están disponibles ciertas propiedades y funcionalidades de CSS3 y HTML5. Lógicamente, tendremos que desarrollar las funcionalidades que correspondan en cada caso. El listado completo de propiedades del diseño web Df