CSS  »  Articoli  »  CSS hack e tecniche cross browser 

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.js ad 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.

Altri articoli

Altre guide

Altre newsletter