Vi voglio segnalare un altro ottimo plugin JQuery, che ritengo molto utile quando si sviluppano siti con layout a dimensioni fisse e con la possibilità di avere diverse risoluzioni a schermo. Questo plugin Jquery implementa funzionalità di media queries, ovvero delle espressioni logiche dichiarate nel media type, che ci consentono di creare una dinamismo nelle nostre pagine in base a dei controlli (min-width e max-width in px), determinando quale css applicare dinamicamente in base alla risuluzione dell’utente. Molto importante ricordare che questo jquery plugin media queries rispetta gli standard W3C ed è compatibile con tutti i browser moderni, ovvero >= IE6.

Lo script come possiamo vedere dall esempio sotto riportato, è molto semplice da utilizzare, come del resto lo sono tutti i Jquery che stò apprezzando e utilizzando sempre di più nei miei siti web. Ecco un esempio di utilizzo:

Come possiamo vedere nel codice abbiamo un CSS di default per i media screen e projection al quale vengono aggiunti altri 2 CSS che per la visualizzazione a schermo attraverso i controlli diventano esclusivi.

Sulla pagina ufficiale del plugin è possibile testarne il funzionamento effettuando un resize della pagina notando il cambiamento del colore del box, indice di switching del css.

Riferimenti:
http://www.protofunc.com/scripts/jquery/mediaqueries/

L’obbiettivo di questo tips è quello di ridurre al minimo l’incompatibilità tra diversi browser nel parsing delle pagine, soprattutto per quanto riguarda altezze, margini, dimensioni dei font, tag di heading ecc..
Questo perchè ogni browser utilizza una diversa impostazioni di default per il rendering della pagina, quindi per evitare dimenticanze, è necessario operare effettuando delle sovrascritture riportando ad una impostazione di default più consona e consistente, permettendoci poi di lavorare serenamente occupandoci solamente del layout che stiamo creando.
La necessità di creare lo stile di reset generico, è venuta con l’avvento dei framework css come ad esempio blueprint, e ora anche se non si utilizza un framework css è buona regola per semplificarci il lavoro includere nelle nostre pagine questo css, perchè ci fornisce un punto di partenza consistente multi-browser.

Qui sotto riportato un esempio stabile di un css di reset, che l’autore Eric A. Meyer di meyerweb.com ci lascia tranquillamente utilizzare e modificare.

Riferimenti:
http://meyerweb.com/eric/tools/css/reset/

http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/