CSS Clean: optimiza tus CSS

Algo de lo que más me gusta del Iphone o el Ipod Touch es el teclado que tiene, el cual muestra la tecla que pulsas por encima de tu dedo. Los que tenemos los dedos un poco grandes y somos un poco patosos, en las pantallas táctiles, a no ser que el teclado que ofrecen sea muy grande, hay veces que no vemos muy bien que tecla estamos pulsando. La gente de Apple nos ha quitado esta duda de un plumazo, resaltar y mostrar por encima de tu dedo la tecla que se pulsa.

Si tenemos que hacer una aplicación web que se vaya a usar en pantallas táctiles, este truco puede seros muy útil. Se trata únicamente de cambiar los estilos a los enlaces cuando están activos (a:active), haciendo que el tamaño de la letra sea más grande, y la caja que ocupa sea más grande y se desplace hacia arriba.

Si tenemos un teclado de la siguiente manera:

<ul>
<li><a href="#ndo">º</a></li>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
...
</ul>

Lo que tendremos que hacer es darle a los li el estilo de bloque y float a la izquierda y los enlaces cuando esten activos cambiarles el estilo, así la tecla flotará sobre las otras:

ul {
clear: both;
}
li {
margin: 5px;
display: block;
width: 50px;
height: 50px;
float: left;
background: #008585;
text-align: center;
vertical-align: middle;
}
a {
background: #008585;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
font-family: Verdana;
font-size: 175%;
}
a:active {
display: block;
background: #E1E8CD;
color: #008585;
width: 100px;
height: 150px;
position: relative;
top: -100px;
left: -25px;
font-size: 275%;
}

Quien lo quiera probar en la Ipod o Iphone no le va a funcionar, ¿por?, pues no lo sé, quizas el Safari que lleva tiene alguna limitación, o simplemente en Safari no funciona, no lo sé, lo he probado en Firefox nada más.

Ejemplo