L’articolo (in lingua inglese) proviene da Brand Spanking New ed è stato tradotto e riprodotto per gentile concessione dell’autore Timothy Groves.

I box di ricerca in stile OS X è parte integrante del sistema OS X UI, e può essere visto in molti software della casa Macintosh. Questo box ha un icona con un bellissimo effetto trasparente a sinistra del campo di inserimento delle parole ricercata, che serve per visualizzare i termini cercati recentemente. Inoltre quando l’utente scrive una parola nel campo di ricerca, appare un bottone “Clear” a destra del testo.

La OS X Webcore permette di utilizzare la tecnica OS X per i box di ricerca sul browser Safari, usando semplici proprietà dell’HTML.

[code lang=”html”]<input type="search" placeholder="Search…" autosave="bsn_srch" results="5" />[/code]

Se hai Safari il risultato apparirà così:

Mentre per gli utenti degli altri browser ciò non accade e dovrebbero vedere il testo in un normale campo di ricerca; il mark-up è semplicemente ignorato.

Io l’ho visto in funzione su sito della Apple, e su alcuni blog fatti con Macintosh. Comunque, con un po’ di CSS e Javascript, è possibile donare ai lavori creati da utenti che non utilizzano Safari un tocco di eleganza tipica della Mac.

Consideriamo il seguente mark-up:

[code lang=”html”]
<span class="sbox_l"></span>
<span class="sbox"><input type="search" id="srch_fld" placeholder="Search…" autosave="bsn_srch" results="5" /></span>
<span class="sbox_r" id="srch_clear"></span>
[/code]

Quando il foglio di stile seguente è applicato, potremo realizzare un effetto visivo simile al box di ricerca della Apple.

[code lang=”css”]
span.sbox_l {
background: white url(‘srch_l.gif’) no-repeat top left;
float: left;
width: 19px; height: 19px;
}

span.sbox_r {
background: white url(‘srch_r.gif’) no-repeat top left;
float: left;
width: 19px; height: 19px;
}

span.sbox input {
background: white url(‘srch_bg.gif’) repeat-x top left;
float: left;
border: 0;
height: 19px; width: 142px;
padding: 3px;
font: 11px/13px arial;
color: #000;
}
[/code]

I due span controllano la grandezza e il background dei due lati del box di ricerca.

I bordi del campo di ricerca vengono slittati ai lati e si ottiene uno sfondo ripetuto. Qui sotto potrai vedere come risulta sul tuo browser:

Il problema è già risolto per gli utenti di Safari. Gli angoli circolari sono solamente raddoppiati. Per gli altri possiamo risolvere il problema con alcuni Javascript specifici per determinati browser. Prima dividiamo il foglio di stile in tre diversi file esterni: default.css contiene gli stili standard; dummy.css contiene solo un commento CSS; applesearch.css contiene il mark-up per browser diversi da Safari.

I primi due sono richiamati nell’head:

[code lang=”html”]
<link rel="stylesheet" type="text/css" href="default.css" name="default" />
<link rel="stylesheet" type="text/css" href="dummy.css" id="dummy_css" />
[/code]

E vanno a cercare un Javascript esterno:

[code lang=”javascript”]
<script type="text/javascript" src="applesearch.js" /></script>
[/code]

Per attivare il box di ricerca quando il documento è caricato, il Javascript è aggiunto nell’head del documento nel seguente modo.

[code lang=”html”]
<script type="text/javascript">
//<![CDATA[
window.onload = function () { applesearch.init(); }
//]]>
</script>
[/code]

La funzione init controlla il browser e carica il foglio di stile applesearch.css nel caso in cui sia compatibile. (ie-DOM e altri browser sono incompatibili).

Se aggiungiamo il seguente codice al campo di ricerca, il bottone “Clear” appare quando il testo viene immesso nel campo stesso. Controlla il codice nel file applescript.js.

[code lang=”javascript”]
onkeyup="applesearch.onChange(‘srch_fld’,’srch_clear’)"
[/code]

Qui potrai trovare un esempio completo e un archivio zip da scaricare.

NOTA: Questa tecnica non è valida con l’XHTML perché le proprietà della Apple non sono riconosciute.