Lo que vamos a ver en este artículo es algo curioso que sucede en ciertos terminales de pantalla táctil al usar la pseudo-clase :hover de CSS en una página web. A mi concretamente me ha ocurrido sólo en dispositivos iOS (iPhone, iPad e iPod), pero imagino que también es susceptible que ocurra en otros.
Había creado un <div> que contenía una lista dentro y que en estado de reposo quedaba oculta, de modo que cuando se pasara el ratón por encima, la lista se desplegase. Esto en ordenadores funcionaba correctamente al hacer rollover y en móviles al hacer click o mejor dicho tocar. Sin embargo, como no tengo ningún dispositivo de Apple no pude comprobarlo en éstos y no es hasta que un cliente me avisó, que pude saber que no funcionaba. La capa en cuestión quedaba siempre cerrada sin posibilidad de ver el interior.
Después de indagar un poco, al parecer la versión móvil de Safari por defecto sólo identifica ciertos elementos como interactivos, eso provoca que si aplicamos esa interactividad a un elemento que típicamente no lo es, el navegador no desencadena el evento al tocarlo. Esos elementos concretos son los siguientes, aunque para algunos es necesario que se cumplan además ciertos requisitos:
<a>
<area>
<button>
<img>
<input>
<label>
<textarea>Para indicarle al navegador de los dispositivos iOS que queremos poder usar la pseudo-clase :hover en cualquier tipo de etiqueta que tengamos en la web, como un <div>, utilizaremos ontouchstart en el <body>, cuya sintaxis varía dependiendo de la versión que usemos de HTML.
<body ontouchstart> <!-- en HTML5 -->
<body ontouchstart=""> <!-- en HTML -->Con esto hemos resuelto la mitad del problema, ya que ahora al tocar el <div> se abrirá la capa, pero al retirar el dedo se volverá a cerrar sin darnos posibilidad a pulsar nada dentro. Así que lo que debemos hacer es incluir la pseudo-clase :focus en el mismo estilo que hemos creado para :hover. De este modo conseguimos que al pulsar el foco se encuentre en la capa y por tanto quede abierta hasta que hagamos una interacción.
.capa:hover, .capa:focus{
max-height:250px;
}El motivo por el cual he dicho añadir :focus en lugar de sustituirlo es porque si bien nos servirá para Safari móvil de iPhone, iPad e iPod, en el ordenador nos obligaría a hacer click en el <div> para desplegarlo. Si dejamos los dos, conseguiremos el efecto adecuado en cada dispositivo sin que haya conflicto.
Aunque me he centrado en :hover, realmente se podría aplicar a otras pseudoclases que requieran interacción con el usuario en elementos que no se encuentren en la lista que comenté al principio. Es cuestión de adaptar la solución como diseñador web a cada caso concreto.
Deja una respuesta