Safari est un très bon navigateur. Sobre, performant et léger. Mais il a ses défauts (certains diront des gros défauts), comme tous les navigateurs. C’est pourquoi j’utilise Safari et Firefox… en même temps. Parfois ce n’est pas moins de quatre navigateurs différents qui sont ouvert sur mon Mac, plus deux sur le PC (4+2=6 !). Mais c’est uniquement en cas de tests intensifs sur des sites que je développe, si ça peut vous rassurer. 😉

Outre l’élégance générale de l’interface de Safari (mais Firefox peut être rendu aussi élégant ;-)), il y a un petit détail en plus : le champ de texte pour faire une recherche sur un site peut avoir une apparence à la OS X. Avec ses jolis bords arrondis, l’ombre, le halo quand on clique dedans et la petite croix pour effacer le contenu du champ. Vous n’avez aucune idée de ce dont je parle ? Bien. Voici quelques exemples issus de l’interface de Mac OS X :

Comme on peut le voir, sur apple.com vu depuis Safari, le champ de recherche à le même look que les autres. C’est bien sympa et c’est très simple à faire.

Dans le code xhtml (ou html mais il faut enlever l’espace et le “/” à la fin) du champ “input”, au lieu du type “text”, il suffit de mettre “search” : <input type="search" /> Magique ! Safari se charge du rendu tout seul comme un grand.
On peut même rajouter le petit menu en forme loupe servant à mémoriser les derniers termes recherchés : <input type="search" autosave="applestyle_srch" results="5" />

Voici ce que ça donne :

Je vois d’ici votre perplexité car vous ne voyez qu’une simple case sans habillage particulier, n’est-ce pas ? Si c’est le cas, c’est parce que vous consultez cette page avec Firefox ou Internet Explorer comme 96% des internautes (source : Journal du Net février 2006) ou tout autre navigateur. Voilà tout le problème. Ça ne marche qu’avec Safari (2,1% de PdM) et c’est bien dommage.

Mais tout n’est pas perdu ! J’avais remarqué sur last.fm, que le champ de recherche (en haut à gauche) était du même style, quel que soit le navigateur (récent, bien entendu). Donc, il devait y avoir un truc et je voulais l’appliquer sur ce blog. Muni de quelques mots-clés bien choisis, j’entrepris une recherche avec Google (et son champ tout moche, tout carré :-P). J’ai trouvé tout de suite. Ça se passe chez Timothy Groves. J’avais donc dans les mains des gif, du JavaScript et des CSS. Il ne restait plus qu’à se mettre au boulot.

Autant le dire tout de suite, tout n’a pas été comme sur des roulettes (et le contraire m’eut étonné ;-)). Il m’a fallu pas mal bidouiller le code et les styles du blog pour y arriver. Mais ce n’était pas encore parfait. Manquaient à l’appel le halo et le texte gris “Recherche” qui disparaît quand on clique dans le champ. OK. Pour l’histoire du texte gris je ne sais plus par quel moyen j’ai trouvé chez theMasTa. Je me suis rapidement rendu compte qu’il me manquait encore une information sur la façon de coder ce que je voulais faire. Car il fallait se rendre à l’évidence, je devais en partie le coder moi-même. OK -> Google. Trouvé sur Caboose.

Ouf ! J’avais tout. Après avoir passé tout ça au mixeur j’y suis parvenu. Si on regarde le(s) code(s) pour faire tout ça, ce n’est pas très propre. Mais ça marche ! Avec un petit bémol pour Opera qui n’affiche pas tout à fait correctement un bouton, mais je corrigerai ça.

Vous pouvez voir le résultat ici, sur ÜberGeeek (que vous utilisiez Firefox ou Internet Explorer, Mac ou PC) en haut de la colonne de droite. 😉
(en cas de problèmes, merci de me l’indiquer)

C’est vraiment de la grosse bidouille mal faite. C’est pourquoi je ne livre pas le code pour l’instant. Quand j’aurai le courage, je le referai proprement en l’incluant dans le code trouvé chez Timothy Groves (Brand Spanking New). À ce moment-là, j’en ferai don à la communauté (ça fait vachement humble, n’est-ce pas ? :-P). En attendant, vous pouvez toujours vous servir du code original qui résout une grande partie du problème.

Quel était le problème déjà ?… Avoir un joli champ “recherche”. C’est bien. Il y en a dans le fond qui suivent. 😉