Da web developer quale sono ho sempre desiderato poter personalizzare gli input dei form, magari con stili o sfondi particolari.

Da oggi si può, con un metodo che utilizza Javascript e i fogli di stile CSS.

E’ un metodo valido per quasi tutti browser, eccetto l’ormai moribondo Internet Explorer 6.

Di seguito trovate il link al pacchetto zip contenente un esempio, i file javascript da scaricare e il foglio di stile associato.

Input personalizzati

Per far girare questo script basta inserire all’interno del tag input la classe “styled”.

<input class="styled" type="checkbox" />

Come lavora?

Il file javascript sostituisce all’interno della pagina html tutti gli elementi che hanno la classe “styled” con un tag span con gli stili assegnati nel CSS, agganciando in automatico anche gli eventi legati al mouse.

Per far lavorare al meglio lo script, con checkbox, radio e select personalizzati bisogna specificare 3 variabili all’interno del file javascript che riguardano le altezze dei checkbox e dei radio e la lunghezza del tag select.

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

Anche per modificare gli stili dei tag basta modificare il foglio di stile.

.checkbox, .radio {

width: 19px;

height: 25px;

padding: 0 5px 0 0;

background: url(checkbox.gif) no-repeat;

display: block;

clear: left;

float: left;

}

.radio {

background: url(radio.gif) no-repeat;

}

.select {

position: absolute;

width: 158px;

height: 21px;

padding: 0 24px 0 8px;

color: #fff;

font: 12px/21px arial,sans-serif;

background: url(select.gif) no-repeat;

overflow: hidden;

}

Esempi

Qui trovate un esempio.

Qui trovate l’articolo intero di Ryanfait.

Modalità d’utilizzo

Lo script è sotto licenza Creative Commons.

Basta lasciare il titolo, il nome e il sito web all’interno del file JavaScript.

Sono una serie di tecniche atte a migliorare i nostri fogli di stile dal lato estetico ma che non servono per modificare la struttura vera e propria.

Bisogna ricordarsi che dobbiamo creare fogli di stile di tipo cross-browser e facili da modificare in caso di manutenzione futura.

Inserire un foglio di stile secondario ci è utile per poter far modifiche senza intaccare il foglio di stile principale.

Selettori di attributo

Teoria:

• selettore[att^="val"]: dove l’attributo del selettore inizia con il valore “val”
• selettore[att$="val"]: dove l’attributo del selettore termina con il valore “val”
• selettore[att*="val"]: dove l’attributo del selettore contiene con il valore “val”

Sono molto utili se si vogliono modificare per esempio i link.

Un esempio:

1. <div class=“esempio”>
2. <h2>Selettori di attributo</h2>
3. <a href=“mailto:test@test.it”>Sono un link di tipo “mailto”</a>
4. <a href=“htto://test.pdf”>Punto ad un PDF</a>
5. <a href=“http://delicious.com”>Contengo la parola “delicious”</a>
6. </div>

Ora con il foglio di stile separato potremo associare ad ogni link un’icona personalizzata, così:

1. a[href$=".pdf"]{
2. background: url(img/page_white_acrobat.png) no-repeat center right;
3. padding: 0 20px 5px 0;
4. }
5. a[href^="mailto"]{
6. background: url(img/email_open.png) no-repeat center right;
7. padding: 0 20px 5px 0;
8. }
9. a[href*="delicious"]{
10. background: url(img/delicious.jpg) no-repeat center right;
11. padding: 0 20px 5px 0;
12. }

per browser come IE6, che non permette l’uso di questa tecnica, verrà visualizzato semplicemente il link.

Selettori adiacenti

Questo tipo di selettore permette di modificare insieme due tag html adiacenti.

Un esempio con i tag p e h2:

1. <div class=“esempio selettori_adiacenti”>
2. <h2>Selettori adiacenti</h2>
3. <p>Questo &amp;egrave; il primo paragrafo, e come tale &amp;egrave; speciale.</p>
4. <p>Lorem ipsum dolor sit amet..</p><p>Lorem ipsum dolor sit amet..</p>
5. </div>

Ed ecco il selettore:

1. .selettori_adiacenti h2 + p {
2. font-size: 200%;
3. border-bottom : 1px dotted #000;
4. }

In questo caso, ogni volta che il browser incontrerà prima il tag <h2> e poi il tag <p> modificherà lo stile in base al nostro selettore creato.

Bordi arrotondati

Quando ancora si impaginava con le tabelle, non si aveva la possibilità di modificare i bordi arrotondandoli. Una prima innovazione sono stati i “Nifty Corners Cube” .

Con l’era del CSS3, si ha la possibilità di modificare anche i bordi.

Ecco i selettori:

• “border-radius” (la versione standard CSS3)
• “-moz-border-radius” per Mozilla
• “-webkit-border-radius” per Webkit
• “-o-border-radius” per Opera
• “-icab-border-radius” per iCab
• “-khtml-border-radius” per Konqueror

border-radius: indica il raggio dell’angolo del bordo.

Naturalmente si possono specificare anche i singoli angoli con le proprietà topright,topleft,ecc.(-moz-border-radius-topright (angolo alto a destra)).

La prima specifica ci permette anche di specificare per ogni singolo browser il tipo di angolo.

Molto spesso succede che, quando si creano pagine web, le si debba pensare di tipo cross-browser, cioè compatibili con tutti i possibili browser.

Ad oggi i browser più utilizzati sono Internet Explorer 6, Mozilla FireFox, Safari, Opera e Internet Explorer 7.

Ma come creare dei layout css adatti ad ogni tipo di browser?

Molti utilizzano i Conditional Css, dei fogli di stile che permettono la personalizzazione in base al browser del client.

Io però ho implementato un nuovo “metodo” nel caso di siti dinamici(php,asp,ecc.).

La soluzione c’è la forniscono questi tipi di linguaggi, attraverso i quali possiamo ottenere moltissime informazioni sul client per mezzo della variabile globale $_SERVER.

Se passiamo come parametro HTTP_USER_AGENT alla variabile $_SERVER ad esempio:

$tipo_browser=$_SERVER['HTTP_USER_AGENT'] )

questa ci ritornerà una stringa contenente il tipo di browser che utilizza, la sua versione e il sistema operativo dell’utente

(es:”Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3″).

Non ci resta che controllare la stringa con la funzione strstr, in questo modo:

if(strstr($tipo_browser,’Gecko’)) echo “<link rel=”stylesheet” href=”stileFirefox.css”>;

Cambiando il confronto con MSIE (per IE,qualsiasi versione), Safari o Opera potremo ottenere stili personalizzati per ogni tipo di browser.