Formalize è un framework CSS che ci aiuta ad uniformare l'aspetto dei form, che differisce da browser a browser e talvolta anche tra diverse versioni dello stesso browser.
Inoltre con l'HTML5 sono state introdotte nuove funzionalità che rendono i form ancora più complessi ma anche più performanti. Un web designer ostinato probabilmente cercherà quindi di scrivere CSS che renda consistente il suo design sul maggior numero possibile di browser.
"Installare" Formalize
Per iniziare possiamo scaricare Formalize e per poterlo utilizzarlo dobbiamo:
- includere il file formalize.css prima dei nostri stili
- inserire 2 immagini nella cartella 'images' del nostro sito
- includere la libreria JavaScript che preferiamo (es. jQuery, MooTools, etc.) insieme allo script
formalize.jsad essa riferito
Le 2 immagini sono rispettivamente una png con un gradiente utile a creare dei piacevoli pulsanti cross-browser e una gif che fa visualizzare un'icona per le select nei browser che usano il motore di rendering WebKit (Chrome, Safari e Mobile Safari, Android).
Cosa fa Formalize?
Il CSS è un lista di dichiarazioni ben documentate che resetta e corregge eventuali incoerenze fra la gran parte dei browser in circolazione su sistemi operativi Windows, OS X e Ubuntu (Chrome, Firefox, Opera, Safari, Internet Explorer 6+, Mobile Safari, Android).
Vengono poi associati degli stili che rendono esteticamente piacevoli e usabili tutti gli elementi di un form utilizzando vendor prefixes e media queries.
L'autore inoltre si è preso il difficile compito di specificare anche tutte le proprietà necessarie a rendere consistenti gli stati :hover, :active, :focus e :invalid.
Infine sono disponibili anche delle semplici classi che possiamo usare per definire velocemente la larghezza di un elemento e per dare pieno supporto anche al browser Internet Explorer 6.
Lo script contiene semplicemente un workaround che permette l'utilizzo su tutti i browser dei nuovi attributi HTML5 placeholder e autofocus. Se non avessimo bisogno di utilizzare questi 2 attributi nei nostri form, possiamo anche non includere nessuna libreria e nessun script. Formalize funzionerà lo stesso a dovere.
Effetti sui form, pronti all'uso, con Formalize
È interessante soffermarsi su alcune proprietà e valori specificati nel CSS. Vediamo le più interessanti e a cosa servono:
-webkit-appearance: none;Resetta tutti gli stili attribuiti dal motore WebKit ad un elemento. Molto utile per esempio se non vogliamo usare l'interfaccia predefinita delle select e dei pulsanti in iOS.
-webkit-background-clip: padding;
-moz-background-clip: padding;
-ms-background-clip: padding-box;
-o-background-clip: padding-box;
background-clip: padding-box;Evita che il background di un elemento "trasbordi" quando viene utilizzata la proprietà border-radius. Utile per pulsanti con bordi arrotondati perfetti.
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
border: 0;
padding: 0;
}Elimina bordi e padding indesiderati dei pulsanti nello stato :focus su Firefox.
-ms-border-radius: 0;
-o-border-radius: 0;In tutto il framework è interessante notare come vengano specificati anche i vendor prefixes per Opera e i browser di Microsoft con i prefissi.
Usare Formalize o no?
È molto difficile gestire un design cross-browser sui form via CSS. Formalize aiuta moltissimo a omogeneizzare tutti gli elementi specificando anche proprietà obsolete o poco utilizzate. Il lavoro di ricerca dell'autore è notevole e certosino.
C'è da dire che non tutti saranno daccordo sull'utilizzare un framework così aggressivo e così vincolante a livello stilistico. Inoltre l'uso di 2 immagini e di uno script non rendono l'implementazione immediata come avviene invece per i CSS reset.
Link utili
