Detectar iPhone y aplicar estilos usando HTML

La forma de detectar el iPhone usando HTML y aplicar los estilos adecuados la descubrí en “CSS, JavaScript and XHTML Explained” .

Con un hack en la etiqueta <Link>

El hack consiste en agregar un estilo a través de la etiqueta link con un media type especial

<!--[if !IE]>–>
<link media="only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet" href="iphone.css" />
<!–<![endif]–>

Only screen es detectado por la mayoría de navegadores mientras que (max-device-width: 480px) solo por el iPhone y iPod Touch. De esta forma la hoja de estilo solo es cargada por el iPhone/iPod Touch. Se añaden los comentarios condicionales para Internet Explorer, porque según comentan en el blog original, algunas versiones de Internet explorer cargan la el estilo para iphone.

Con un hack en la etiqueta <style>

De la misma forma anterior se puede aplicar el estilo necesario en la etiqueta Style directamente, de esta forma

<style media="only screen and (max-device-width: 480px)" type="text/css">
  .texto{color:blue;}
</style>

Detectar iPhone y aplicar estilos usando Javascript

La forma de detectar el iPhone con Javascript la utilice en el ejemplo anterior del campo de texto, y aunque es funcional es un poco más complicada que la anterior y requiere de Javascript.

if(navigator.platform=="iPhone"||navigator.platform=="iPod"){
 document.write('<style> texto{color:blue;};</style>’);
}

En este caso use la variable platform del objeto navigator de Javascript, que en el caso del iPhone devuelve “iPhone” y en del iPod Touch “ipod”.

Demo

Los dejo con algunas capturas del resultado del segundo método en diferentes navegadores, para el ejemplo: Safari Mobile, Firefox, IE y Safari.

Safari Mobile (iPod Touch)

Firefox

Internet Explorer

Safari (Windows)

El ejemplo lo encuentras en http://webdebolsillo.com//sandbox/hacks-safari-mobile/

En este tutorial voy a explicar cómo conseguir el efecto en webkit, específicamente para iPhone/iPod Touch, aunque con algunos cambios se puede llevar a muchos otros navegadores.

Para empezar

Crear el campo es bastante sencillo, básicamente es el HTML de toda la vida, el efecto se logra con CSS y un poco de Javascript. Para hacerlo solo necesitas un editor de texto o HTML y un navegador que utilice webkit, de preferencia Safari.

El resultado final es un “campo de texto” como este

Escribo “campo de texto” entre comillas porque en realidad son tres elementos, una etiqueta (label), un campo de texto (input text) y un boton (input button).

Integrar los 3 elementos y conseguir un super campo de texto

HTML

Como ya lo dije mencione antes, el efecto esta en CSS, aunque vamos a empezar con el HTML:

<label for="txtNombre" class="ts-txtReset ts-label">Nombre:</label>
<input id="txtNombre" class="ts-txtReset ts-txt"type="text" />
<input id="btnNombre" class="ts-txtReset ts-btn" type="button" value="txtNombre" />

Si te puedes dar cuenta no hay nada extraordinario, quizás solo el nombre de las clases y el valor del botón que es el mismo que id del campo de texto, de momento no nos sirve y lo veremos más adelante, en el código javascript.

Las clases no tienen nada especial, excepto que todas comienzan con ts-, esto es porque el ejemplo es parte de un framework en el que estoy trabajando, Touchscript, y nada más que eso.

Estilo CSS

Ahora vamos con el estilo del campo de texto. La idea es engañar al ojo haciendolo creer que es un solo campo de texto, cuando en realidad son tres.

Etiqueta (ts-txtReset ts-label)

Cree el estilo la etiqueta con bordes redondeados, excepto del lado derecho que es donde se une con el campo de texto, también especifique el padding y el tamaño de letra, ambos para ajustarlo al campo de texto (con el padding por defecto no encajan y la fuente varia). Además cambie el color de la fuente a gris (#555) para resaltar la diferencia.

.ts-txtReset.ts-label{
 border:solid 1px #aaa;
 border-width:1px 0 1px 1px;
 padding:2px 0px 3px 4px;
 background:#fff;
 color:#555;
 margin:0;
 font-size:1em;
 /* WEBKIT */
 -webkit-appearance: none;
 -webkit-border-top-left-radius:4px;
 -webkit-border-bottom-left-radius:4px;
}

Campo de texto (ts-txtReset ts-txt)

Con el campo de texto es prácticamente lo mismo, añadir bordes excepto de los lados para ajustar a la etiqueta y el botón. Además añadí una regla exclusiva de webkit y que pudieron ver arriba, es -webkit-appearance: none;. Esta sirve para eliminar la sombra que Safari añade al campo de texto, de no quitar la sombra se perdería el efecto porque la etiqueta y el botón no tienen esa sombra y se nota “el salto”. También puedes ver que quite los bordes redondeados con -webkit-border-radius:0;

.ts-txtReset.ts-txt{
 border:solid 1px #aaa;
 border-width:1px 0 1px;
 padding:3px 2px 2px 0;
 font-size:1em;
 background:#fff;
 margin:0;
 /* WEBKIT */
 -webkit-appearance: none;
 -webkit-border-radius:0;
}

Botón (ts-txtReset ts-btn)

Casi para cerrar los estilos añade el del botón, de nuevo la misma que los anteriores pero con dos cambios notables. El primero es la imagen de fondo y el segundo es que no muestra texto (aunque si tiene value).

El fondo lo incluyo con background y con bastante padding lateral(10px) para hacer el botón más grande.

El texto se oculta con text-indent:-500em (lo envía muy lejos ) y por si acaso agrego overflow:hidden (para ocultar lo que este muy lejos).

.ts-txtReset.ts-btn{
 border:solid 1px #aaa;
 border-width:1px 1px 1px 0;
 padding:2px 7px 3px;
 font-size:1em;
 margin:0;
 background:#fff url(icono-reset.png) no-repeat center center;
 text-indent:-500em;
 overflow:hidden;
 /* WEBKIT */
 -webkit-appearance: none;
 -webkit-border-radius:0;
 -webkit-border-top-right-radius:4px;
 -webkit-border-bottom-right-radius:4px;
}

Termino el estilo agregando un estilo “base” al body:

body{font-family:helvetica, arial, sans-serif;}

Hasta aquí conseguiste el efecto visual del cuadro de texto, ahora hay que agregar la funcionalidad con javascript,

Hacer que el botón de borrar borre

La funcionalidad del botón de borrar igual es sencilla y se logra con javascript.

Lo primero es crear la función de borrar, o limpiar como le digo yo.

// TouchScript txtReset Limpia
function tsTxtResetLimpia(ev){
 txtVictima=document.getElementById(ev["target"].value);
 if(txtVictima){
  txtVictima.value="";
  txtVictima.focus();
 }
}

El parámetro ev es un objeto de evento, el “lanzador” del evento lo envía automáticamente, y de él lo único que importa es el campo target, que es lo mismo que el botón que disparo el evento (en nuestro ejemplo btnNombre). Del botón (target) tomamos el campo value que contiene el id del campo de texto que debe borrar (esa era la idea de usar el id del campo de texto en el value del botón). Luego compruebo si ese id existe, si existe borro el contenido y lanzo la función focus para el campo de texto.

La función de limpiar esta lista, ahora hay que asignársela al botón (btnNombre) usando addEventListener y el evento click.

// Inicializa las acciones al cargar la pagina
addEventListener('load',function(){
 // Asigna el evento click al boton btnNombre
 document.getElementById('btnNombre').addEventListener('click',tsTxtResetLimpia,false);
},false);

Safari en PC muestra una diferencia en el padding respecto a la de Safari mobile (iPhone/iPod) y para que se vea bien en ambos agregue un “mini hack”.

//Mini hack para corregir padding superior en Safari para PC
if(navigator.platform!="iPhone"&&navigator.platform!="iPod"){
 document.write('<style>.ts-txtReset.ts-label{padding-top:3px;}</style>');
}

Listo, con eso tienes un campo de texto con etiqueta y botón de borrar integrados. El código completo del ejemplo lo puedes ver en txtreset.txt, te recomiendo revisarlo para no olvidar cosas como la etiqueta meta viewport.

Notas

• El ejemplo es una muestra de lo simple que es mejorar un control para formulario y mejorar la usabilidad de una página web.
• Por la misma razón que solo es un ejemplo, aún se puede mejorar en muchos sentidos. Especialmente hacerlo con código no intrusivo, para no interferir si javascript esta desactivado, y poderlo hacer compatible con más navegadores además de Safari, o webkit en general.
• Más adelante incluiré este campo de texto en Touchscript para que sea más fácil usarlo.

Material

• Ejemplo: http://webdebolsillo.com/sandbox/touchscript/txtreset/
• Archivos del ejemplo: txtreset.zip (18.9kb)
  • index.html
  • icono-reset.png
  • icono-reset.psd
  • txtreset.txt (código fuente, lo mismo que index.html)