Dado que o Twitter Bootstrap foi projetado para ser responsivo / amigável ao dispositivo, por que ele não usa tamanhos de fonte relativos?
Dado que o Twitter Bootstrap foi projetado para ser responsivo / amigável ao dispositivo, por que ele não usa tamanhos de fonte relativos?
Respostas:
Bem, parece que eles estão se escondendo atrás da desculpa do zoom do navegador . É muito triste ver uma estrutura tão usada e influente ignorar completamente os problemas de acessibilidade e a pedra angular do design responsivo. Eles estão em uma posição de grande responsabilidade e, infelizmente, parecem não ter intenção de agir de acordo.
[Update] Então, hoje Mark Otto respondeu no tópico que mencionei acima. Previsivelmente, não há menção de acessibilidade e uso da frase 'pixel-perfect':
Ok, então aqui está um pouco de pano de fundo sobre as decisões do ano passado e planos para seguir em frente.
Pixels fornecem controle absoluto e renderização consistente em todos os navegadores.
Os designers ainda pensam e operam principalmente em pixels.
Os navegadores aumentam a escala de páginas inteiras hoje em dia, então não é um problema com o dimensionamento de tipo ou algo assim.
Aninhar ems historicamente tem sido uma dor e pode exigir matemática extra para valores de pixels calculados / pretendidos.
Misturar unidades de medidas é feio e meu TOC interno odeia. Usar unidades na altura da linha é geralmente desencorajado, mas fornece conhecimento imediato de qual é o valor calculado. Provavelmente, tentaremos evitar isso no futuro. No futuro, provavelmente usaremos ems para dimensionamento de tipos, talvez rems até, mas não para mais nada. Isso também é discutível em tamanhos de fonte para entradas e similares. Não é assim que as pessoas criam sites perfeitos.
Está um pouco acabado e, com sorte, coerente o suficiente. Vou tentar fazer um blog sobre essas mudanças conforme elas surjam, mas não tenho certeza de quão próximo o 3.0 está e o que isso implicará ainda.
Eu sugeriria que qualquer pessoa com fortes sentimentos sobre isso vá e marque este tópico com +1 .
[Atualização] O roteiro da V3 delineado na postagem do blog da versão V2.3 não faz menção à adição de suporte para ems.
[Atualização] Muito mais informações sobre Bootstrap V3 disponíveis na solicitação de pull aqui, incluindo o seguinte de Mark Otto:
Exploramos o uso de unidades rem sobre pixels, mas encontramos poucos benefícios para compensar as implicações de seu uso. O IE8 ainda precisaria de um substituto de pixel, e isso é um monte de linhas de código duplicadas. Além disso, usar rems em todos os lugares em vez de pixels agravaria esse problema. Misturar rems e pixels também não parece fazer sentido agora. No entanto, podemos e continuaremos a avaliar isso em versões futuras.
Então, mais recentemente (em seus comentários):
Duvido muito que estejamos enviando com rems neste momento. Mudar tudo - além do tamanho das fontes - é uma tarefa enorme e que traz poucos benefícios para compensar isso. Deixando de lado o dobro das linhas de código para tamanhos de fonte, suportar rems de qualquer outra forma parece tedioso na melhor das hipóteses. Dito isso, sempre podemos revisitar em uma versão futura. Por enquanto, estamos nos limitando aos pixels.
Tendo crescido insatisfeito com um grande número de recursos do Bootstrap, incluindo a falta de suporte em, eu sugiro fortemente olhar para Susy se você quiser apenas grades, ou Zurb Foundation 4 para toda a enchilada. Não deixe a popularidade do Bootstrap prejudicar seu julgamento. Qualquer um pode construir algo com o Bootstrap, que é exatamente o seu problema - ele é projetado para pessoas com o mínimo de experiência na web. Só porque há muitos McDonalds no mundo não significa que seja um lugar saudável para comer.
[Editar] OK. Isso foi uma coisa boba de se dizer. Desde que escrevi isso, usei o BS3 e ele melhorou consideravelmente seu jogo. Eu não deveria ter feito esse comentário descartável, mas ainda acredito que tomou uma decisão errada ao usar pixels para o tamanho da fonte. Assim como os problemas de acessibilidade, os ems são úteis de outras maneiras.
[Atualizar] Parece que rems será compatível com V4 (Mdo citado aqui ):
Para aqueles que estão acompanhando, poderemos mudar de pixels para REMs na v4 quando deixarmos de oferecer suporte ao IE8. Não posso fazer muito até então.
[Atualização de fevereiro de 17] Bootstrap 4 ainda está em Alpha, mas mostra o uso de rems em seus documentos de Tipografia , mas não mostra o uso de rems em seus documentos de layout .
emé necessário para essas pessoas, portanto, "acessibilidade".
Não deixe a popularidade do Bootstrap prejudicar seu julgamento. Qualquer um pode construir algo com o Bootstrap, que é exatamente o seu problema - ele é projetado para pessoas com o mínimo de experiência na web. Só porque há muitos McDonalds no mundo não significa que seja um lugar saudável para comer.
Você pode argumentar para não deixar isso turvar seu julgamento de uma forma negativa. É uma estrutura sólida e, se você se preocupar em investir tempo em como usá-la de maneira eficaz, a maior parte do seu argumento cairá sobre ela.
Embora seja frequentemente usado por pessoas com experiência mínima - e não há nada de errado com isso - também é usado por pessoas com muita experiência.
No mínimo, é uma ferramenta de prototipagem inestimável. Na melhor das hipóteses, é totalmente personalizável. Você pode selecionar e escolher, modificar, adicionar a - é por isso que é chamado de 'estrutura'.
Tenho usado-o de maneira eficaz em alguns de meus projetos por mais de dois anos - é tão enxuto quanto você deseja. Usei apenas o framework de formulário, apenas as grades, todo o código-base e o personalize para atender às minhas necessidades. De muitas maneiras, ele "melhorou" meu jogo, levando-me mais adiante no pré-processamento, usando variáveis, aprimorando a maneira como estruturo projetos.
Sim, existem alguns problemas. pxpara tamanhos de fonte e usando Less são dois. No entanto, como é totalmente de código aberto, você pode encontrar opções para remediar ambos facilmente.
Eu investiguei a Foundation e gostei do que vi, mas estou na infeliz posição de ter que apoiar o IE8, como muitos desenvolvedores estão. A Foundation retirou o suporte para o IE8, tornando-o um 'proibido' para mim. Apesar disso, eu não estou prestes a demitir um quadro inteiro, mais especificamente algo que é livre de usar e livre para modificar com base apenas em algumas questões!
Heck, em um projeto, eu levantei partes do Foundation e partes do Bootstrap e adicionei meu próprio código personalizado - essa é a beleza do código aberto.
Se você ainda prefere Bootstrap com suporte em e rem, pode dar uma olhada nisso - https://github.com/ivayloc/twbs-rem-em, não há necessidade de fazer nenhum cálculo para converter pixels em unidades rem ou em, há um recurso @mixinspara isso - @include rem(property, values)- também fallback para px e para conversão em que você pode usar em(value).
Embora eu use o Bootstrap extensivamente, há algumas áreas em que a acessibilidade fica em segundo plano. Acho que há compensações inevitáveis com uma plataforma que é usada tão extensivamente.
Eu entendo completamente porque eles optaram por reter pixels para o tamanho da fonte. Os problemas de herança com em's para fontes de um framework são um pesadelo total.
rems são uma opção alternativa, mas o suporte do navegador ainda é problemático.
Você pode criar seu próprio rems mixin e substituir cada linha de less que usa a variável de tamanho de fonte base.
Essa é a beleza do bootstrap - e de estruturas semelhantes - é uma base sólida para trabalhar.
Sim, eu mencionei que há elementos no bootstrap do Twitter que não são tão acessíveis - um pequeno exemplo, o uso de 'display: none' em vez de clip. Tenho certeza de que há um motivo válido para isso - e, novamente, você pode modificar isso facilmente se quiser.
O bootstrap não é perfeito, mas duvido que algum dia tenha a intenção de ser a resposta final a todos os seus requisitos. É uma base - um 'bootstrap' - aprenda e utilize-o apropriadamente, acrescente, misture tudo - no mínimo, é uma estrutura incrível para prototipar ou montar um site rápido. Indo além, há uma base realmente sólida que pode ser aplicada a qualquer site.