1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Como utilizar modernizr

Tema en 'Tutoriales de Javascript' comenzado por FalconMasters, 7 de Enero de 2015.

  1. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    393
    Me gusta recibidos:
    331
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    Hola que tal a todos, en este tutorial les enseñare de forma básica como usar modernizr en sus sitios web.

    Primero que nada, que es modernizr?
    Bueno modernizr es una libreria javascript que nos permite detectar las capacidades del navegador web del usuario para saber si soporta ciertas propiedades css3 o html5.

    Por ejemplo si queremos saber si el navegador del usuario soporta esquinas redondeadas en css3 mediante la propiedad border-radius podemos saberlo con modernizr y dependiendo de si soporta border-radius tomar una desicion como por ejemplo cargar alguna libreria de javascript que nos permita simular esa propiedad en los navegadores que no soporten los bordes redondeados.

    Nota:
    Instalación
    Agregar modernizr a nuestros sitios web es muy sencillo, tenemos que descargarlo e instalarlo como si fuera jquery.

    Bajamos modernizr desde su pagina:
    http://modernizr.com/

    Puedes bajar la versión de desarrollo o de producción, en la de desarrollo esta todo, y en la de producción tu seleccionas que necesitas.

    Así que para este ejemplo vamos a instalar la versión de desarrollo:
    HTML:
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    También te recomiendo que instales jquery, en este tutorial lo usaremos.
    HTML:
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    En este tutorial yo te enseñare lo básico, es decir detectar si el navegador soporta una propiedad o no, pero si quieres mas aqui tienes la documentación:
    http://modernizr.com/docs/

    Con esta librería se va a crear un objeto llamado Modernizr que contiene la informacion de cada una de las características disponibles o no del navegador.

    Así que lo que tenemos que hacer es llamar al objeto y mediante un condicional preguntar si la caracteristica esta disponible o no, dependiendo de la respuesta haremos una cosa u otra.

    Aqui pongo un ejemplo:
    HTML:
    <script>
            $(document).ready(function(){
                if (Modernizr.flexbox){      //.flexbox es el nombre de la propiedad que queremos comprobar
                    $('.mensaje').append('Si soporta');
                } else {
                    $('.mensaje').append('No soporta');
                    //Cargamos una libreria que nos permita simular flexbox o algo que necesitemos
                    <script src="aqui_libreria_a_cargar_en_caso_de_que_no_soporte.js"></script>
                }
            });
        </script>
    En este ejemplo primero vemos que ejecutamos el condicional hasta que el documento haya cargado, y después preguntamos si esta seteada la propiedad flexbox dentro del objeto modernizr.

    Si esta pues no hacemos nada, pero si no la soporta hay es en donde cargaremos una librería o realizaremos alguna acción dependiendo de lo que necesitemos.

    Para saber el nombre de la característica aquí tienes un listado con ambas, las características de html5 y css 3 con su nombre.

    Características HTML5: http://modernizr.com/docs/#features-html5
    Características CSS3: http://modernizr.com/docs/#features-css
     
    A griselcesar le gusta esto.
  2. kinslert

    kinslert Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    9
    Me gusta recibidos:
    6
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    front-end web developer
    excelente, muy bueno.. me sirvio bastante.. gracias por el post
     
  3. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    393
    Me gusta recibidos:
    331
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    Post a domicilio por petición ^^
    No se si logre explicar muy bien, espero que si.
     
    A Mahia y kinslert les gusta esto.
  4. Side Master

    Side Master
    Moderador

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    257
    Me gusta recibidos:
    208
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Página web:
    Buen articulo Falcon, la verdad nunca he usado Modernizr, pero ahora veo que es algo importante. Gracias por el post.
     
    A Strong Backers le gusta esto.
  5. Mahia

    Mahia Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    7
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Qué útil puede ser está librería. Gracias.
     
  6. AyuukJaay

    AyuukJaay Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    149
    Me gusta recibidos:
    69
    Puntos de trofeos:
    28
    Género:
    Hombre
    Página web:
    http://caniuse.com/ en esa pagina tambien pueden checar que navegadores soportan las nuevas propiedades de CSS
     
    A FalconMasters y kinslert les gusta esto.
  7. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    393
    Me gusta recibidos:
    331
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    Es cierto, de hecho pensaba ponerla pero lo olvide, es muy buena esa pagina.
    Gracias
     
  8. Side Master

    Side Master
    Moderador

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    257
    Me gusta recibidos:
    208
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Página web:
    Muy bueno el sitio @AyuukJaay .
     
    A AyuukJaay y Strong Backers les gusta esto.
  9. griselcesar

    griselcesar Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    135
    Me gusta recibidos:
    61
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Venezuela
    Página web:
    Excelente como siempre!!! Saludos
     

Comparte esta página