Le rotazioni con i CSS e la compatibilità cross-browser

Pubblicato il 06/08/2015

Abbiamo già visto come utilizzare le rotazioni con i CSS 3 in questi due articoli: etichette a 45 gradi e effetti di trasformazione con i css. E, in entrambi, abbiamo visto come il codice usato non sia funzionante su tutti i browser, in particolare su quelli di casa Microsoft

Per capire come renderlo cross-browser ripartiamo dal codice usato nel primo articolo:

#testBlk .testo {
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
}

Tale codice, come noterete di sicuro, utilizza i cosiddetti prefissi CSS dei fornitori di browser, o in inglese vendor prefix CSS. Se vi chiedete a cosa servano, e perché si utilizzino, la risposta è pronta: servono a permettere ai produttori di browser l'aggiunta di nuove funzionalità CSS, per sperimentazione e test, senza causare problemi di (retro)compatibilità.

Dopo tale fase, soprattutto se le funzionalità appaiono innovative, utili e comuni, succede spesso che vengano inglobate nel cosiddetto CSS standard. Ad esempio anni fa, per fare un angolo arrotondato servivano i vari -webkit-border-radius, -moz-border-radius e così via. Oggi si è sufficientemente certi che il solo uso di border-radius basti per il 99% dei browser in uso

Beh, ma perché usarli allora?

Semplice: per utilizzare le funzionalità richieste. Stando attenti però a lasciare sempre una via d'uscita per quei browser che non le supportano. Anche qui, un esempio visuale spiega meglio di 100 parole.
Supponiamo di avere un contenitore, con dentro un altro contenitore a cui vogliamo applicare un effetto neon

.containerEx {
	background:#333;
	width:300px;
	text-align:center; 
	padding:10px;
}
	.neonEx {
		display:block;
		background:#333;
		box-shadow:0 0 2px orange;
		padding:10px;
		margin-bottom:10px;
		color:orange;
	}

Nel caso in cui il nostro browser non supporti il border-radius avremo questo risultato:

In pratica perderemo la percezione del blocco. Come ovviare? Beh, dipende da voi: si può pensare di usare un colore alternativo al pulsante, di aggiungere un bordo arancio allo stesso e così via. L'importante è il dare sempre un'alternativa

 

Quali sono i prefissi e a quali browser sono associati?

I vendor prefix dei CSS sono essenzialmente:

• -moz- per Firefox
• -ms- per Internet Explorer
• -o- per Opera
• -webkit- per Android, iOS, Safari e Chrome

Probabilmente vi è chiaro che quasi tutto il traffico mobile si appoggi a Webkit: se progettate versioni mobile, tenetene conto!

 

Utilizzo pratico

È importante notare come tutti i browser moderni offrano supporto alle funzionalità più diffuse dei CSS con le ultime versioni. Ma per le versioni vecchie non sempre è vero. È necessario pertanto cercare di utilizzare codice per tutti i vendor a meno di non esser certi che il CSS sia compatibile con il 99% dei browser

Nell'esempio con cui abbiamo iniziato l'articolo ciò è ancora più vero perché la proprietà transform, supportata da quasi tutti i browser in commercio oggi e in passato, sia stata definita da molte regole diverse

Affinché sia il più cross-browser possibile, la regola che permette di ruotare un box di 45 gradi dovrebbe esser scritta in questo modo

.box {
	-webkit-transform:rotate(45deg); /* Chrome, iOS, Safari e Android */
	-moz-transform:rotate(45deg); /* Firefox */
	-o-transform:rotate(45deg); /* Opera */
	-ms-transform:rotate(45deg); /* IE 9 */
	transform:rotate(45deg); /* tutti i nuovi browser */
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

 

Conclusioni

C'è da notare come il codice appena postato sia un filo prolisso: non siate pigri pensando che tanto il solo transform:rotate mi assicuri una compatibilità con quasi tutti i nuovi browser. Certo, poi c'è da dire che le regole per IE6-7-8 in alcuni casi potrebbero anche essere omesse, soprattutto se il progetto non prevede la completa compatibilità con questi browser, e che la regola -ms-transform non sia obbligatoria visto che IE9 supporta di già il transform.

 

Qual è quindi il modo migliore per scrivere CSS corretto?

Semplice, e complicato allo stesso tempo: studiate bene il progetto, le specifiche e le necessità obiettive e solo in base a ciò valutate se spender tempo ad assicurare la retro-compatibilità richiesta.
Ricordate infine che la differenza tra i tanti arruffoni che popolano il nostro settore e un vero professionista sta qui: saper conciliare le richieste, analizzarle e offrire un prodotto ragionato, pensato e, soprattutto, funzionale.