Navigateurs et appareils
Découvrez les navigateurs et les appareils, des plus modernes aux plus anciens, pris en charge par Bootstrap, y compris les bizarreries et les bogues connus pour chacun.
Navigateurs pris en charge
Bootstrap prend en charge les dernières versions stables de tous les principaux navigateurs et plates-formes. Sous Windows, nous prenons en charge Internet Explorer 10-11 / Microsoft Edge .
Les navigateurs alternatifs qui utilisent la dernière version de WebKit, Blink ou Gecko, que ce soit directement ou via l'API d'affichage Web de la plateforme, ne sont pas explicitement pris en charge. Cependant, Bootstrap devrait (dans la plupart des cas) s'afficher et fonctionner correctement dans ces navigateurs également. Des informations de support plus spécifiques sont fournies ci-dessous.
Vous pouvez trouver notre gamme de navigateurs pris en charge et leurs versions dans notre.browserslistrc file :
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
Nous utilisons Autoprefixer pour gérer la prise en charge prévue du navigateur via les préfixes CSS, qui utilise Browserslist pour gérer ces versions de navigateur. Consultez leur documentation pour savoir comment intégrer ces outils dans vos projets.
Appareils mobiles
De manière générale, Bootstrap prend en charge les dernières versions des navigateurs par défaut de chaque plate-forme majeure. Notez que les navigateurs proxy (tels que Opera Mini, le mode Turbo d'Opera Mobile, UC Browser Mini, Amazon Silk) ne sont pas pris en charge.
| Chrome | Firefox | Safari | Navigateur Android et WebView | Bord Microsoft | |
|---|---|---|---|---|---|
| Android | Prise en charge | Prise en charge | N / A | Android v5.0+ pris en charge | Prise en charge |
| iOS | Prise en charge | Prise en charge | Prise en charge | N / A | Prise en charge |
| Windows 10 Mobile | N / A | N / A | N / A | N / A | Prise en charge |
Navigateurs de bureau
De même, les dernières versions de la plupart des navigateurs de bureau sont prises en charge.
| Chrome | Firefox | Internet Explorer | Bord Microsoft | Opéra | Safari | |
|---|---|---|---|---|---|---|
| Mac | Prise en charge | Prise en charge | N / A | Prise en charge | Prise en charge | Prise en charge |
| les fenêtres | Prise en charge | Prise en charge | Pris en charge, IE10+ | Prise en charge | Prise en charge | Non supporté |
Pour Firefox, en plus de la dernière version stable normale, nous prenons également en charge la dernière version de support étendu (ESR) de Firefox.
Officieusement, Bootstrap devrait avoir une apparence et un comportement suffisants dans Chromium et Chrome pour Linux, Firefox pour Linux et Internet Explorer 9, bien qu'ils ne soient pas officiellement pris en charge.
Pour une liste de certains des bogues de navigateur auxquels Bootstrap doit faire face, consultez notre Mur de bogues de navigateur .
Internet Explorer
Internet Explorer 10+ est pris en charge ; IE9 et vers le bas n'est pas. Veuillez noter que certaines propriétés CSS3 et éléments HTML5 ne sont pas entièrement pris en charge dans IE10 ou nécessitent des propriétés préfixées pour une fonctionnalité complète. Visitez Puis-je utiliser… pour plus de détails sur la prise en charge par les navigateurs des fonctionnalités CSS3 et HTML5. Si vous avez besoin de la prise en charge d'IE8-9, utilisez Bootstrap 3.
Modaux et listes déroulantes sur mobile
Débordement et défilement
La prise en charge de overflow: hidden;l' <body>élément est assez limitée dans iOS et Android. À cette fin, lorsque vous faites défiler le haut ou le bas d'un modal dans l'un des navigateurs de ces appareils, le <body>contenu commence à défiler. Voir le bogue Chrome #175502 (corrigé dans Chrome v40) et le bogue WebKit #153852 .
Champs de texte iOS et défilement
À partir d'iOS 9.2, lorsqu'un modal est ouvert, si le toucher initial d'un geste de défilement se situe dans les limites d'un textuel <input>ou d'un <textarea>, le <body>contenu sous le modal défilera au lieu du modal lui-même. Voir le bogue WebKit #153856 .
Listes déroulantes de la barre de navigation
L' .dropdown-backdropélément n'est pas utilisé sur iOS dans la navigation en raison de la complexité de l'indexation z. Ainsi, pour fermer les listes déroulantes dans les barres de navigation, vous devez cliquer directement sur l'élément déroulant (ou tout autre élément qui déclenchera un événement click dans iOS ).
Zoom du navigateur
Le zoom de page présente inévitablement des artefacts de rendu dans certains composants, à la fois dans Bootstrap et dans le reste du Web. Selon le problème, nous pourrons peut-être le résoudre (recherchez d'abord, puis ouvrez un problème si nécessaire). Cependant, nous avons tendance à les ignorer car ils n'ont souvent pas de solution directe autre que des solutions de contournement hacky.
Collant :hover/ :focussur iOS
Bien que ce :hoverne soit pas possible sur la plupart des appareils tactiles, iOS émule ce comportement, ce qui entraîne des styles de survol "collants" qui persistent après avoir appuyé sur un élément. Ces styles de survol ne sont supprimés que lorsque les utilisateurs appuient sur un autre élément. Ce comportement est considéré comme largement indésirable et ne semble pas être un problème sur les appareils Android ou Windows.
Tout au long de nos versions alpha et bêta v4, nous avons inclus un code incomplet et commenté pour activer un shim de requête multimédia qui désactiverait les styles de survol dans les navigateurs d'appareils tactiles qui émulent le survol. Ce travail n'a jamais été entièrement terminé ou activé, mais pour éviter une rupture complète, nous avons choisi de déprécier ce shim et de conserver les mixins comme raccourcis pour les pseudo-classes.
Impression
Même dans certains navigateurs modernes, l'impression peut être bizarre.
Depuis Safari v8.0, l'utilisation de la .containerclasse à largeur fixe peut amener Safari à utiliser une taille de police inhabituellement petite lors de l'impression. Voir le problème #14868 et le bogue WebKit #138192 pour plus de détails. Une solution de contournement potentielle est le CSS suivant :
@media print {
.container {
width: auto;
}
}
Navigateur de stock Android
Prêt à l'emploi, Android 4.1 (et même apparemment certaines versions plus récentes) est livré avec l'application Navigateur comme navigateur Web par défaut (par opposition à Chrome). Malheureusement, l'application Navigateur présente de nombreux bogues et incohérences avec le CSS en général.
Sélectionnez le menu
Sur <select>les éléments, le navigateur de stock Android n'affichera pas les contrôles latéraux s'il y a un border-radiuset/ou borderappliqué. (Voir cette question StackOverflow pour plus de détails.) Utilisez l'extrait de code ci-dessous pour supprimer le CSS offensant et le rendre <select>en tant qu'élément sans style sur le navigateur de stock Android. Le reniflage de l'agent utilisateur évite les interférences avec les navigateurs Chrome, Safari et Mozilla.
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>
Vous voulez voir un exemple ? Découvrez cette démo JS Bin .
Validateurs
Afin de fournir la meilleure expérience possible aux navigateurs anciens et bogués, Bootstrap utilise des hacks de navigateur CSS à plusieurs endroits pour cibler des CSS spéciaux sur certaines versions de navigateur afin de contourner les bogues dans les navigateurs eux-mêmes. Ces hacks amènent naturellement les validateurs CSS à se plaindre qu'ils ne sont pas valides. Dans quelques endroits, nous utilisons également des fonctionnalités CSS de pointe qui ne sont pas encore entièrement normalisées, mais elles sont utilisées uniquement pour une amélioration progressive.
Ces avertissements de validation n'ont pas d'importance dans la pratique car la partie non hacky de notre CSS est entièrement validée et les parties hacky n'interfèrent pas avec le bon fonctionnement de la partie non hacky, d'où la raison pour laquelle nous ignorons délibérément ces avertissements particuliers.
Nos documents HTML contiennent également des avertissements de validation HTML triviaux et sans conséquence en raison de notre inclusion d'une solution de contournement pour un certain bogue de Firefox .