Nella prima lezione abbiamo avuto modo di raccontare i grandi vantaggi offerti da Bootstrap, ma è bene dedicare qualche riflessione anche al supporto offerto ai diversi browser ed ai diversi dispositivi da parte di questo framework.
Ufficialmente Bootrstrap supporta le più recenti versioni dei seguenti browser
- Chrome (Mac, Windows, iOS e Android)
- Safari (ma solamente per Mac e iOS)
- Firefox (Mac, Windows)
- Internet Explorer
- Opera (Mac, Windows)
Anche Chromium per Linux e Internet Explorer 7, pur non essendo ufficialmente supportati, sono in grado di effettuare un rendering abbastanza corretto delle pagine create con Bootstrap. Una serie di bug, più o meno importanti, sono stati rilevati su quasi tutti i browser in commercio: per un elenco completo ed aggiornato si faccia riferimento a questa pagina.
Problemi noti di compatibilità con Internet Explorer
Chi lavora abitualmente con le pagine web sa che, in qualche modo, Internet Explorer è sempre un "caso a parte".
Abbiamo detto che ufficialmente le ultime versioni di questo browser sono supportate, ma come ci si può aspettare, è necessario fare alcune precisazioni.
Internet Explorer 8 non supporta alcune proprietà CSS3 come, ad esempio, i bordi arrotondati e le ombre, questo significa che i componenti e gli elementi a cui sono applicate regole che usano queste proprietà funzionano correttamente, ma sono visualizzati in modo un po’ diverso da come avviene sugli altri browser pienamente compatibili con CSS3 (in pratica gli angoli appariranno a 90° e le ombre non verranno visualizzate).
Entrambe le versioni 8 e 9, poi, non supportano a pieno le novità introdotte da HTML5 con l’attributo placeholder per i campi del form. Anche in questo caso, quindi, dovremo mettere in conto una piccola limitazione.
Un altro limite di Internet Explorer 8 è il mancato supporto per media query, ossia la possibilità di definire per quale dispositivo vanno applicate determinate regole di stile, permettendo quindi la creazione di layout che si adattano al dispositivo su cui la pagina viene visualizzata. A questa mancanza si può ovviare utilizzando la libreria respond.js.
In realtà anche Internet Explorer 10 presenta un problema con media query perché non distingue la larghezza del dispositivo sulla base della larghezza della viewport e questo fa sì che media query non sia applicato correttamente. Per ovviare al problema, è necessario aggiungere al nostro foglio di stile queste semplici righe di codice:
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }Ed è necessario aggiungere nell HEAD del documento questo piccolo codice, il quale deve essere il primo Javascript della pagina:
(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();Un altro aspetto da tenere presente quando si lavora con Internet Explorer è che se la pagina è scritta in modo che Internet Explorer ne effettui il rendering in modalità di compatibilità, ossia una modalità che emula le vecchie versioni di Internet Explorer, Bootstrap non è più supportato.
Per far sì che Internet Explorer utilizzi la più recente modalità possibile per il rendering della pagina richiesta, è bene aggiungere al codice HTML il tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">Chi desiderasse approfondire la spinosa questione della modalità di compatibilità in Internet Explorer può fare riferimento a questa discussione (in Inglese) sul sito StackOverflow in cui la questione è spiegato in modo chiaro e approfondito.
