input type="search": ¿Validamos o pintamos?

20 junio 2006 ~ Software

Llevaba tiempo puteado porque con Safari el buscador de tocomocho no se veía redondito como yo quería, hasta que pasando por sofanaranja me encontré un buscador 100% macos. ¡Qué cabrón, lo tiene redondito (el buscador)!

detalle capturas de pantalla buscador con Safari y con Firefox

Me faltó tiempo para darle a "ver código fuente" y allí estaba, el input del buscador no era type="text", era type="search". Acto seguido, copiazo y pegado en tocomocho y voilá, ¡ya tenía el buscador redondeado en Safari!

La parte mala del asunto es que type="search" no valida y, aunque degrada sin problemas, me pone muy nervioso pasar el validador y que me saque un fallo. (puedo oir vuestras voces implacables: qué capullo tocomocho, que no le valida la página....)

También ví en el blog de Ale que está usando el parámetro placeholder para indicar -sólo en Safari- el texto que debe aparecer en el input cuando este no tiene el foco sobre él. Más de lo mismo: no valida pero degrada. Safari reconoce este parámetro y se pasa por el forro el resto, al igual que hace con el CSS que afecte al input (salvo en el ancho).

Y ahora ¿qué hacemos? ¿usamos type="search" y placeholder="buscar en tocomocho" o validamos?

Personalmente creo que no hay que ser más papistas que el Papa, y que lo importante de usar un validador -más allá de obsesiones y manías -es saber que no estamos pasándonos por el forro los estándares en general. Yo no tengo reparos en usar en mis CSS -moz-border-radius, por ejemplo, para redondear esquinas de cosas en Firefox y no creo que por ello se termine el mundo. Pero si alguien me ofrece argumentos de peso para dejar de redondear mis inputs de búsqueda en Safari estoy dispuesto, al menos, a leerlos y tenerlos en cuenta.

a!e ~ 20 junio 06

Hombre, yo hace tiempo que dejé de preocuparme de cómo se ve mi blog en algo que no sea Safari (que bastante tenemos con IE de 9 a 7 : ) y la verdad es que mi blog se ve como a mi me gusta en mi ordenador :D

Pero la forma “correcta” de usar el campo de búsqueda de Safari en Safari, y una cosa que valide en todo lo demás, es (como casi siempre) usando JavaScript…

Tienes un ejemplo en http://www.flumo.com/ (donde aparece un campo de texto normal que se sustituye por el de Safari si usas Safari). Al final no puse el JS completo para ocultar el botón de “Buscar”, pero es una cosilla trivial…

jorge ~ 20 junio 06

Gracias, Ale, lo investigaré. Por cierto, que acabo de mirar flumo.com y en Firefox cuando pulso sobre el buscador, además de que no se ve el cursor al hacer foco, aparece un alert que dice “Foo” y se queda ahí pillado en un bucle infinito alert “Foo” – aceptar, alert “Foo” – aceptar… algo se te ha descojonado me temo.

a!e ~ 20 junio 06

Dios, es cierto! :D

En fín, cosas de desarrollar en producción… :D

Gracias por el aviso…

Javier Cañada ~ 20 junio 06

yo también me he copiado :-P

Gustavo ~ 15 febrero 08

Solucion: PHP!!!

<?php

$browser = get_browser();

if($browser->browser == 'Safari')

{

echo '<input type="search" name="search" />';

}

else

{

echo '<input type="text" name="search" />';

}

php?>