twitter-bootstrap - Twitter Bootstrapがフォントサイズにピクセルを使用するのはなぜですか？

Question

Twitter Bootstrapはレスポンシブ/デバイスフレンドリーになるように設計されているのに、相対的なフォントサイズを使用しないのはなぜですか？

Answer 1

さて、彼らはブラウザのズームの言い訳の後ろに隠れているようです。このように頻繁に使用され、影響力のあるフレームワークがアクセシビリティの問題とレスポンシブデザインの基本的な基礎を完全に無視しているのを見るのは本当に悲しいことです。彼らは大きな責任を負っており、残念ながらそれに応じて行動するつもりはないようです。

[更新]それで、今日、MarkOttoは私が上で参照したスレッドに返信しました。予想通り、「pixel-perfect」というフレーズのアクセシビリティと使用については言及されていません。

さて、これが昨年の決定と前進する計画の背景です。

ピクセルは、すべてのブラウザで絶対的な制御と一貫したレンダリングを提供します。

設計者は今でもほとんどの場合、ピクセル単位で考えて操作しています。

最近のブラウザはページ全体をスケールアップするので、タイプのスケーリングなどの問題はありません。

emsのネストは歴史的に苦痛であり、計算された/意図されたピクセル値を計算するために追加の計算が必要になる場合があります。

測定単位の混合は醜く、私の内側のOCDはそれを嫌っています。行の高さで単位を使用することは一般的に推奨されていませんが、計算された値が何であるかを即座に知ることができます。将来的にはこれを避けようとするでしょう。将来的には、タイプのサイズ設定にemsを使用する可能性が高く、おそらくremsも使用しますが、それ以外の場合は使用しません。これは、入力などのフォントサイズについても議論の余地があります。人々がピクセルパーフェクトサイトを構築する方法ではありません。

それは少し全体であり、うまくいけば十分に首尾一貫しています。これらの変更がさらに出てきたらブログに載せようと思いますが、3.0がどれほど近いか、そしてそれがすべて何を伴うのかはまだわかりません。

私はこれについて強い感情を持っている人は誰でもこのスレッドを+1することをお勧めします。

[更新] V2.3リリースのブログ投稿で作成されたV3ロードマップでは、emsのサポートの追加については言及されていません。

[更新]MarkOttoからの以下を含む、ここでのプルリクエストで利用可能なBootstrapV3に関する多くの情報：

ピクセルよりもレムユニットの使用を検討しましたが、それらの使用の影響を相殺するメリットはほとんどありませんでした。IE8にはまだピクセルのフォールバックが必要であり、それは多くの重複したコード行です。さらに、ピクセルの代わりにどこでもレムを使用すると、その問題が悪化します。レムとピクセルを混合することも、今のところ意味がないようです。ただし、今後のリリースでこれを評価することは可能であり、今後も継続していきます。

それからもっと最近（そのコメントで）：

この時点でレムと一緒に出荷されるかどうかは非常に疑わしいです。フォントサイズ以外のすべてを変更することは大きな作業であり、それを相殺する利点はほとんどありません。フォントサイズのコード行を2倍にすることは別として、他の方法でレムをサポートすることは、せいぜい退屈に思えます。とは言うものの、将来のリリースではいつでも再訪できます。今のところ、私たちはピクセルにこだわっています。

Bootstrapの多くの機能に不満を持っているため、特にem-supportがないこともあります。グリッドだけが必要な場合は、 Susyを、エンチラーダ全体についてはZurbFoundation4を検討することを強くお勧めします。Bootstrapの人気があなたの判断を曇らせないようにしてください。誰でもBootstrapを使って何かを構築できますが、これはまさにその問題です。Webの経験が最小限の人向けに設計されています。世界にマクドナルドがたくさんあるからといって、それが健康的な食事場所であるとは限りません。

[編集]OK。これは愚かなことです。これを書いたので、私はBS3を使用しました、そしてそれはそのゲームをかなり上向きにしました。私はそのような使い捨てのコメントをするべきではありませんでしたが、それでもフォントのサイズ設定にピクセルを使用することに関して悪い決定をしたと私は信じています。アクセシビリティの問題だけでなく、emsは他の方法でも役立ちます。

[更新]レムはV4でサポートされるようです（Mdoはここから引用）：

以下の方のために、IE8のサポートを終了すると、v4でピクセルからREMに変更できるようになります。それまではなかなかできません。

[2017年2月更新]Bootstrap4はまだアルファ版ですが、タイポグラフィのドキュメントではレムの使用を示していますが、レイアウトのドキュメントではレムの使用を示していません。

Answer 2

Bootstrapの人気があなたの判断を曇らせないようにしてください。誰でもBootstrapを使って何かを構築できますが、これはまさにその問題です。Webの経験が最小限の人向けに設計されています。世界にマクドナルドがたくさんあるからといって、それが健康的な食事場所であるとは限りません。

あなたはそれがあなたの判断を否定的に曇らせないように主張することができます。これは堅固なフレームワークであり、それを効果的に使用する方法に時間を費やすのであれば、議論の大部分は頭に浮かびます。

経験が最小限の人がよく使用しますが、問題はありませんが、経験の豊富な人も使用します。

少なくとも、それは非常に貴重なプロトタイピングツールです。せいぜい、それは完全にカスタマイズ可能です。選択、選択、変更、追加が可能です。これが「フレームワーク」と呼ばれる理由です。

私は2年以上の間、私のプロジェクトのいくつかでそれを効果的に使用してきました-それはあなたが望むように無駄がありません。フォームフレームワーク、グリッド、コードベース全体を使用し、ニーズに合わせてカスタマイズしました。多くの点で、それは私のゲームを「向上」させ、変数を使用して前処理にさらに進み、プロジェクトの構造化の方法を磨きます。

はい、いくつかの問題があります。pxフォントサイズとLessの使用は2つです。ただし、完全にオープンソースであるため、両方を簡単に修正するためのオプションを見つけることができます。

私はFoundationを調査し、見たものが気に入りましたが、多くの開発者がそうであるように、IE8をサポートしなければならないという不幸な立場にあります。FoundationはIE8のサポートを終了し、私にとっては「ノーゴー」になりました。それにもかかわらず、私はフレームワーク全体、特にいくつかの問題だけに基づいて自由に使用および変更できるものを却下しようとはしていません！

あるプロジェクトでは、Foundationの一部とBootstrapの一部を削除し、独自のカスタムコードを追加しました。これがオープンソースの美しさです。

Answer 3

それでもemとremをサポートするBootstrapを好む場合は、これを確認できます-https ://github.com/ivayloc/twbs-rem-emピクセルをremまたはem単位で変換するために計算を行う必要はありません。@mixinsこれには@include rem(property, values)組み込みがあります---pxへのフォールバックもあり、em変換にはを使用できますem(value)。

Answer 4

私はBootstrapを幅広く使用していますが、アクセシビリティが後回しになる領域がいくつかあります。非常に広く使用されているプラ​​ットフォームには、避けられないトレードオフがあると思います。

彼らがフォントサイズのピクセルを保持することを選んだ理由を完全に理解しています。フレームワークのフォントのemの継承の問題は、まったくの悪夢です。

remsは代替オプションですが、ブラウザのサポートにはまだ問題があります。

独自のレムミックスインを作成し、ベースフォントサイズ変数を使用するlessのすべての行を置き換えることができます。

それがブートストラップの美しさであり、そのようなフレームワークは、そこから機能するための強固な基盤です。

はい、私はそれほどアクセスできないTwitterブートストラップの要素があることを述べました-1つの小さな例、クリップを使用する代わりに「display：none」を使用します。これには正当な理由があると確信しています。繰り返しになりますが、必要に応じてこれを非常に簡単に変更できます。

ブートストラップは完璧ではありませんが、それがすべての要件に対する最終的な答えになることを意図していたのではないかと思います。それはベースであり、「ブートストラップ」であり、それを学び、適切に利用し、追加し、すべてを混ぜ合わせます。少なくとも、プロトタイプを作成したり、クイックサイトをまとめたりするのに最適なフレームワークです。さらに進んで、どんなウェブサイトにも適用できるいくつかの本当に堅実な基礎があります。

Answer 5

デスクトップファーストのアプローチによるものだと思います。Twitter Bootstrapはレスポンシブフレンドリーですが、「優雅な劣化」アプローチです。