Browsers e dispositivos
Aprenda sobre os browsers e dispositivos (dos modernos até os antigos) que suportam o Bootstrap, incluindo quirks e bugs conhecidos, em cada.
Suporte de browsers
Bootstrap é suportado pelas versões mais recentes e estáveis dos maiores navegadores e plataformas. No Windows, somos suportados pelo Internet Explorer 10, 11 e Microsoft Edge.
Navegadores alternativos que usam a versão mais recente do WebKit, Blink ou Gecko (tanto diretamente, quanto através da API web view da plataforma) não suportam explicitamente o Bootstrap. Contudo, o framework funciona normalmente (na maioria dos casos) nesses browsers. Informações mais específicas a respeito estão abaixo.
Você pode consultar nosso leque de browsers com suporte e suas versões no nosso arquivo browserslistrc.json:
# 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
Nós usamos o Autoprefixer para obter o suporte esperado (usando prefixos CSS), o qual usa Browserslist para gerenciar as versões destes navegadores.
Dispositivos móveis
No geral, Bootstrap é suportado pelas versões mais recentes das maiores plataformas padrões dos browsers. No entanto, lembre-se que proxy browsers (como o Opera Mini, modo turbo do Opera Mobile, UC Browser Mini, Amazon Silk) não são suportados.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Suportado | Suportado | N/A | Android v5.0+ Suportado | Suportado |
| iOS | Suportado | Suportado | Suportado | N/A | Suportado |
| Windows 10 Móvel | N/A | N/A | N/A | N/A | Suportado |
Browsers desktop
De forma parecida, as versões mais recentes da maioria dos navegadores desktops são suportadas.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Suportado | Suportado | N/A | N/A | Suportado | Suportado |
| Windows | Suportado | Suportado | Suportado, IE10+ | Suportado | Suportado | Not Suportado |
No Firefox, em adição ao release mais recente e estável, nós também temos suporte da recente versão “Extended Support Release (ESR)”.
Não oficialmente, Bootstrap vai se apresentar e comportar bem no Chromium, Chrome e Firefox para Linux, além do Internet Explorer 9 (apesar de não termos suporte oficial).
Para consultar alguns bugs que o Bootstrap enfrenta, veja nosso Mural de bugs.
Internet Explorer
Do Internet Explorer 10 acima, nós temos suporte. No entanto, do IE9 para baixo, não temos. Portanto, esteja atento que algumas propriedades CSS3 e elementos HTML5 não são, totalmente, suportadas no IE10 ou requerem prefixos para compatilidade. Visite o site Can I use… para detalhes sobre suporte CSS3 em browsers e recursos HTML5.
Se você precisa de suporte no IE8 ou 9, use o Bootstrap 3. É a versão mais estável do nosso código e nosso time ainda dá suporte para reparar bugs críticos e alterar a documentação. Contudo, nem um recurso novo será adicionado a ela.
Modais e dropdowns em dispositivos móveis
Overflow e rolagem
Suporte para overflow: hidden; no elemento <body> é um pouco limitado, no iOS e Android. Nesse sentido, quando você rola perto da parte superior ou inferior do modal (em algum dos browsers destes dispositivos), o conteúdo do <body> vai começar a rolar. Veja o bug do Chrome #175502 (reparado no Chrome v40) e o bug Webkit #153852.
Campos de texto e rolagem no iOS
A partir do iOS 9.2, enquanto o modal está aberto, se o toque inicial do gesto de rolagem está dentro dos limites de um <input> de texto ou <textarea>, o conteúdo do <body> abaixo do modal vai ser rolado, invés do modal. Veja o bug Webkit #153856.
Dropdowns navbar
O elemento .dropdown-backdrop não é usando no iOS, por causa da complexidade do z-index. Portanto, para fechar dropdowns em navbars, você deve clicar diretamente no elemento dropdown ou qualquer outro elemento que vai acionar o evento de clique no iOS).
Zoom em browsers
Dar zoom em páginas irá mostrar, inevitavelmente, artefatos de renderização em alguns componentes, tanto no Bootstrap quando no resto da web. Dependendo do problema, poderemos consertá-lo, bastando pesquisar antes e depois abrir um issue (se necessário). Contudo, nós tendemos a ignorar estes problemas, já que eles não possuem soluções diretas, aléms de hacks, normalmente.
Sticky :hover/:focus no iOS
Enquanto o :hover não é possível na maioria dos dispositivos de toque, o iOS emula este comportamento, resultando em estilos que persistem depois de soltar um elemento. Estes estilos hover só são interrompidos quando o usuário toca outro elemento. Este comportamento é considerado, largamente, indesejável e aparenta não ser um problema nos dispositivos Android ou Windows.
Durante nossos realeases v4 alpha e beta, nós incluímos códigos incompletos e comentados para dar a opção de usar uma media query que desativaria estilos hover em dispositivos de toque que emulam estes estilos. Isto nunca foi finalizado ou ativado, mas para evitar quebra total, nós optamos em defazar isto e manter os mixins como atalhos para as pseudo-classes.
Impressão
Mesmo em alguns browsers modernos, imprimir pode ser bem chatinho.
A partir do Safari v8.0, o uso da classe .container pode levar o Safari a usar pequenos tamanhos de fontes, quando imprimindo. Veja o issue #14868 e WebKit bug #138192, para mais detalhes. Uma possível solução alternativa é o seguinte CSS:
@media print {
.container {
width: auto;
}
}Browser padrão do Android
O Android 4.1 e algumas versões mais recentes são lançadas com um app Browser padrão, que não é o Chrome. Infelizmente, o app Browser tem muitos bugs e inconsistências com CSS.
Menu Select
Em elementos <select>, o app Browser não irá mostrar os controles laterais se houver border-radius ou border aplicadas (veja esta questão no StackOverflow, para mais detalhes). Use o snippet abaixo para remover o CSS problemático e renderizar o <select> como um elemento não estilizado, no app Browser do Android. O sniffer do user agent evita interferência com o Chrome, Safari e navegadores 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>Quer ver um exemplo? Veja esta demo no JS Bin.
Validação
Pensando em dar a melhor experiência para os antigos e bugados browsers, Bootstrap usa hacks CSS em diversos locais para conseguir um CSS único em algumas versões de browsers e, consequentemente, trabalhar em cima dos próprios bugs. Estes hacks, compreensivelmente, levam os validadores CSS a falarem que o código está inválido. Em outros locais, nós também usamos recursos CSS inovadores que ainda não foram padronizados. No entanto, eles são usados puramente para progressive enhancement.
Estes avisos de validação não significam nada na prática, já que a parte sem hacks valida normalmente e a parte com hacks não interfere no funcionamente da parte sem hacks. Portanto, se ignorarmos estes avisos, a parte com hacks é usada em progressive enhancement.
Nossa documentação HTML, da mesma forma tem alguns avisos de validação triviais e inconsequentes, devido a inclusão de uma solução para um certo bug no Firefox.