Modernizr–Ejemplo práctico 2 : Utilizando Border Radius, elemento date y atributo required

Hola que tal, este vez revisaremos tres ejemplos prácticos en donde podemos utilizar modernizer para detectar características del browser y decidir según la disponibilidad de ellas que hacer, como por ejemplo, incluir librerías o polyfills para mitigar el problema. Puedes ver mi articulo anterior en donde iniciamos esta serie de ejemplos prácticos.

Vamos dos problemáticas , la de la archi nombrada característica de HTML5 de bordes redondeados,también el nuevo elemento date formulario y por ultimo la propiedad “required” de los elementos del formulario.

Ejemplo:

Veamos que cuenta con las siguientes características HTML5:

  1. Bordes Redondeados
  2. Campo Date en el formulario
  3. Campo Date es obligatorio

<!DOCTYPE html>
<html lang=“en”>
    <head>

        <meta charset=“utf-8” />

        <title>Demo</title>

        <style type=“text/css”>

            form{

                 background-color:#9fbfa3;

                 width:300px;

                 padding:15px;

                 border-radius:10px;

                }

           

        </style>

    </head>

    <body>

        <form id=“formulario” action=“#”>

           <label for=“TxFecha”>Seleccione Fecha</label>

           <input type=“date” name=“TxFecha” id=“TxFecha” required>

           <input type=“submit” id=“btEnviar” value=“Enviar”>

        </form>

    </body>

</html>

El resultado en un IE9 es:

image

Si bien existen el soporte a bordes redondeados, no se soporta el campo email ni el atributo “required”

IE7 (Probando con IE9 En modo explorador IE7), no existe soporte para ninguna funcionalidad.

image

En Chrome (16.0.912.77 m), si bien se soporta además el atributo required, no se soporta el campo date:

image

Veamos ahora en Firefox 9.0.1, al igual que Chrome, no se soporta el campo date.

image

El turno de Safari, no soporta required y si bien soporta el campo fecha, lo hace de una manera deficiente a mi parecer, pero al fin y al cabo, lo soporta.

image

Opera, al menos para nuestro ejemplo, lleva la delantera soportando todas las funcionalidades.

image

Ahora vemos como arreglar el código para que exista soporte para bordes redondeados para todos los navegadores:

Primero vamos a ver como solucionar el tema del Borde Redondeado.

Los pasos a seguir serán:

  • Agregar librería Modernizr y jQuery (estoy utilizando versiones de desarrollo)
  • Agregar, solo para asegurarnos de compatibilidad hacia atrás, las propiedades CSS para border radius propietarias.
  • Agregar y ejecutar la librería jquery.corner en el caso de que el browser no soporte nativamente la característica de bordes redondeados, de manera que este script proporcione la funcionalidad, notar que es lazy download, es decir solo se va cargar esta librería cuando se necesite.

<!DOCTYPE html>

<html lang=“en”>

    <head>

        <meta charset=“utf-8” />

        <title>Demo</title>

       <script type=“text/javascript” src=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js”></script>

        <script type=“text/javascript” src=“http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js”></script>

        <style type=“text/css”>

            form{

                 background-color:#9fbfa3;

                 width:300px;

                 padding:15px;

                 -moz-border-radius: 10px;

                 -webkit-border-radius:10px;

                 border-radius: 10px;

                }

           

        </style>

    </head>

    <body>

        <form id=“formulario” action=“#”>

           <label for=“TxFecha”>Seleccione Fecha</label>

           <input type=“date” name=“TxFecha” id=“TxFecha” required=“true”>

           <input type=“submit” id=“btEnviar” value=“Enviar”>

        </form>

    </body>

 

</html>

<script type=“text/javascript”>

        if (!Modernizr.borderradius) {

            $.getScript(“js/jquery.corner.js”, function () {

                $(“form”).corner();

            });

        }

</script>

Si ejecutamos esta página en IE7 veremos:

image

Es decir, ya no hay problema de los bordes redondeados, ahora continuemos con el calendario, para esto vamos a utilizar JqueryUI, el script de calendario, para ello seguiremos los siguientes pasos:

  • Determinar si el navegador soporta el tag input type=”date” mediante modernizer
  • En caso que el browser no cuente con esta característica, cargar el script de jQueryUI y asignárselo al campo fecha, además de cargar dinámicamente el CSS asociado.

if (!Modernizr.inputtypes.date) {

$.getScript(“http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js”, 
function ()
{
 

  var css = jQuery(“<link>”);

  css.attr({ rel:  “stylesheet”,

         type: “text/css”,

         href: “http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/ui-lightness/jquery-ui.css”

                           });

       $(“head”).append(css);

       $(“#TxFecha”).datepicker();

    });

}

Ahora ejecutamos en IE y veremos

image

Tenemos bordes redondeados y calendario, pero falta el validador, esta vez no usé jQuery-Validator, ya que lo consideré mucho para un solo campo, pero obviamente consideraría JV para la próxima, en este caso, yo mismo hice una validación de requerido, obviamente es solo a modo de ejemplo, le queda mucho ser algo para producción.

if (!Modernizr.input.required){

               $(“#formulario”).submit(function(){

                  if ($(“#TxFecha”).val().length==0){

                    return fallo();

                   }else{

                    return normal();

                   }

 

               });

 

               $(“#TxFecha”).focus(normal);

        }

               function normal(){

                     $(“#TxFecha”).css(“background”,“white”);

                     $(“#TxFecha”).css(“color”,“black”);

                     $(“#TxFecha”).val(“”);

                     return true;

               }

 

               function fallo(){

                       $(“#TxFecha”).css(“background”,“red”);

                       $(“#TxFecha”).css(“color”,“white”);

                       $(“#TxFecha”).val(“Este campo es necesario”);

                       return false;

                  

                   }

Luego al probarlo, tenemos lo siguiente:

image

Si bien no es lo mismo, podemos lograr un efecto más deseado con distintos plugins.

Para terminar veamos las cargas de archivos con los dos navegadores (obviamente todos van a cargar jQuery y Modernizr)

IE7 (todos los polyfills)

image

IE9(Solo jQueryUI, ya que soporta bordes redondeados)

image

Firefox(Solo jQueryUI, ya que soporta bordes redondeados)

image

Chrome(Solo jQueryUI, ya que soporta bordes redondeados)

image

Opera (No necesita cargar pollyfills)

image

Como puedes ver, solo se cargan los scripts cuando se les necesita, aumentando el rendimiento.

Espero que les sirva!
Saludos,

4 comentarios sobre “Modernizr–Ejemplo práctico 2 : Utilizando Border Radius, elemento date y atributo required”

Deja un comentario

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