Compatibilita cross-browser per i CSS

Uno degli ostacoli più ostici incontrati da uno sviluppatore durante le fasi di sviluppo di un sito web o di una qualsiasi web app è il trovarsi prima o poi a fare i conti con la compatibilità cross-browser ovvero, come le sue realizzazioni si comportano se visualizzate con browser diversi. A titolo informativo, il problema può non essere solo visivo in quanto la compatibilità potrebbe essere compromessa, ad esempio, anche a livello di Javascript qualora il codice utilizzato non fosse bene interpretato e magari qualcosa che funziona su Firefox non necessariamente funziona anche su Internet Explorer.

Ho menzionato Internet Explorer non per caso, infatti i grattacapi provengono quasi esclusivamente da parte del browser Microsoft anche se con il rilascio delle nuove versioni, come affermato sul loro sito "Microsoft Developer Network" nella pagina relativa a Internet Explorer e i CSS, la versione di IE 8 è completamente compatibile con la specifica CSS, CSS 2.1 e supporta alcune funzionalità del CSS3, mentre le successive versioni aggiungono sempre più supporto al CSS3. I grossi problemi di compatibilità per questo browser con le specifiche CSS2 sorgono pertando con le sue versioni più primitive quali IE5, IE6 ed IE7.
Mentre per IE5 ed IE6 possiamo metterci una croce sopra e considerare questi browser come obsoleti e non più utilizzati, evitandomi così  di approfondire la discussione con le molteplici hack presenti in rete per cercare di conciliare il più possibile i layout, IE7 se pur stringendo i denti, ad oggi (2014), non è stato ancora "debellato", la conferma ci arriva da statCounter dal quale ho estrapolato uno screenshot sulla situazione delle versioni di IE utilizzate nel mondo da Agosto 2012 ad Agosto 2014:

Fig. 1 - Internet Explorer - Andamento sulle versioni utilizzate da Agosto 2012 ad Agosto 2014

Dal grafico, oltre a notare un costante declino di questo browser nel tempo (per approfondimenti leggere il mio articolo sui browser più utilizzati in Italia e nel Mondo) e l'alternanza dell'uso in base al rilascio delle nuove versioni, quello che interessa a noi ai fini della discussione è la resistenza di IE7 che nonostante sia passato dall'1,16% nell'agosto 2012 allo 0,14% nell'agosto 2014 potrebbe lasciare insoddisfatto qualche capo d'azienda richiedendo di tenerlo ancora in considerazione.

Il mio consiglio in questo caso è sfruttare una caratteristica del browser della Microsoft, ovvero quella di interpretare i commenti condizionali:

<!--[if IE 7]><style type="text/css">div { padding:10px }</style><![endif]-->

<!--[if lte IE 8]><link rel="stylesheet" type="text/CSS" href="css/style-ie.css"><![endif]-->

Il codice di cui sopra evidenzia la sintassi dei commenti condizionali da inserire nell'head delle pagine al di sotto del CSS principale (in modo che le regole vengano sovrascritte all'occorrenza), nel primo caso il codice inserito in modo incorporato all'interno dei commenti condizionali verrà eseguito solo se il browser che legge la pagina è Internet Explorer versione 7, nel secondo caso il codice (con link a un file esterno) verrà eseguito solo in presenza di IE 8 e versioni precedenti (nella condizione "lte" sta per "Less than or equal" ma ce ne sono anche altre come "lt" "Less than" oppure "gt" "Greater Then"). L'utilizzo di tali condizioni è consentito fino alla versione 9 e grazie all'utilizzo di regole CSS dedicate è possibile aggiustare i problemi di differenza di interpretazione delle specifiche.

Lasciando un attimo da parte la questione Internet Explorer c'è da dire che i vari browser tra loro, nonostante l'intercompatibilità, presentano delle minime differenze di interpretazione nella loro condizione di default, in altre parole scrivendo un codice HTML i diversi user agent possono interpretare i tag, a livello di padding, margin, allineamenti vari, dimensione del font, ecc..., in modo leggermente disomogeneo se confrontati tra loro. Nasce quindi l'esigenza di utilizzare una base di partenza conforme ed unificata per garantire il cross-browser, ed ecco che ci vengono subito incontro i file di reset. Un file di reset per CSS non è altro che, come intuibile dal nome, una sorta di azzeratore di regole che posto prima di qualsiasi altra serie di dichiarazioni interne o esterne alla pagina che siano, porta allo stato basale gli stili dei vari elementi. In questo modo ridefinendo gli stili per i vari tag garantisce una compatibilità e uniformità a livello visivo del risultato delle pagine.

Un file di reset può essere creato autonomamente a seconda delle proprie esigenze ma ne esistono di già pronti ed affermati come ad esempio "Reset CSS di Meyer" che è senza licenza, di pubblico dominio e dalla versione 2.0 supporta anche i nuovi tag HTML5; il codice lo trovate direttamente qui sotto:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Un altro reset si chiama Normalize ed è utilizzato anche da Framework conosciuti, uno tra tutti Bootstrap. Questo reset a differenza del primo fa una discriminazione in base al browser di turno ed applica solo le regole necessarie conservando i valori di default del browser che non influiscono a livello di cross-browser ma che possono sempre rivelarsi utili, evitando così di dover ridefinire tutti i tag per apportare personalizzazione al codice. Inoltre questo file CSS corregge diversi problemi di interpretazione fra browser e sistemi operativi includendo gli elementi dei form, le impostazioni di display nell'HTML5, il font dei caratteri e l’overflow SVG in IE9. Anche questo progetto è open source.