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


回答:


129

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

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

さて、ここでは、昨年の決定の背景と、前進するための計画を少し紹介します。

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

デザイナーは今でもほとんどピクセルで考え、操作しています。

ブラウザは最近、ページ全体を拡大するので、タイプの拡大やその他の問題はありません。

歴史的にemsをネストすることは面倒であり、Figureの計算された/意図されたピクセル値に対して追加の計算が必要になる場合があります。

測定の混合単位は醜く、私の内部OCDはそれを嫌っています。通常、行の高さで単位を使用することはお勧めしませんが、計算された値が何であるかがすぐにわかります。将来的には、これを避けようとするでしょう。将来的には、タイプのサイズ設定にemsを使用する可能性があります。これは、入力などのフォントサイズについても議論の余地があります。それは人々がピクセル完璧なサイトを構築する方法ではありません。

それは少しやりすぎで、うまくいけば十分に首尾一貫しています。今後、これらの変更点についてはブログに掲載するつもりですが、3.0がどれほど近いか、それがすべて何を伴うかはわかりません。

私はこの行くことについて強い感情を持つ人とこのスレッドを+1することをお勧めします

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

[更新] Bootstrap V3について、Mark Ottoからの以下のプルリクエストを含むプルリクエスト入手できる多くの情報:

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

次に、より最近(コメントで):

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

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

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

[更新]レム V4でサポートれるようです(Mdoはここから引用しています):

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

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


4
問題は、PXよりもEMを使用する方が「アクセスしやすい」理由を説明する人がいないように見えることです。私は大丈夫です、紙の上ではそれは明白に見えますが、実際の生活では?ピクセルベースのWebサイトに立ち往生しているユーザーの実例はありますか?ピクセルが引き起こす実際の統計と実際の問題について?これは私が思うこの討論における本当の問題です。証明の欠如は、ほとんどの人がPXを使用する理由です。
adriendenat 2013

7
オペレーティングシステムレベルとブラウザレベルのフォントは、視覚障害のある人によって増加します。emそのような人々には「アクセシビリティ」が必要です。
Steven Vachon 2013

1
フォントサイズの増加がズームよりも優れている理由を説明するディスカッションがあります。webaim.org/ discussion / mail_thread?thread = 5849 「昨年、CSUNで誰かと話をしました。彼は非常に視力が低く、読むためにページ上のテキストのサイズをかなり大きくする必要があります。しかし、ページズームを使用する場合は、左右にスクロールする必要があります。テキストを読んで、それは非常に速く古くなります。それをしなければならないとき、あなたの場所を失うのは非常に簡単です。」
トニー

4
Emベースのサイズもモバイル開発に不可欠です。デバイスの製造元は、デバイスを読みやすくするための最適な基本フォントサイズを決定するために、お金と時間を費やしています。「font-size:14px」と言うと、すべての調査が無効になります。UltraAwesomeRetina3.0でそれはどういう意味ですか??以下のピクセルあたりインチメーカーにベースフォントサイズをアップしたままと52"スクリーン上のベストプラクティス、無地でシンプルです。filamentgroup.com/lab/... blog.cloudfour.com/...
ジェイDansand

3
私はEM狂信者です(単に呼んでみましょう)ので、この回答を更新し続けたという事実を気に入っています。+1 ;)
e-sushi

11

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

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

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

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

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

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

私はFoundationを調査し、見たものを気に入っていましたが、多くの開発者がそうであるように、IE8をサポートする必要があるという不幸な立場にいます。FoundationはIE8のサポートを打ち切り、私にとっては「ノーゴー」です。それにもかかわらず、私は、全体のフレームワークを却下するのに約ないんだけど、ある最も具体的に何かの自由使用すると、自由にのみいくつかの問題に基づいて修正します!

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


6
それは完全に公平であり、正直に言うと、Bootstrap 3を使用することで、ゲームが本当に向上したと思います。振り返ってみると、少しばかげたことですが、それは欲求不満から生まれたものであり、Bootstrapを使用しているサイトの大部分は非常に遅延して使用していると思います。プロトタイピングや非公開ページ(管理領域など)に最適なツールです。デフォルトを超えてスタイルを設定する方法を理解している場合は、公開サイトに最適なツールにもなります。他のツールと同様に、簡単に乱用され、使いやすさがその結果として(乱用)の量につながると思います。
邪魔にならない

2
ええ、私はあなたを聞きます-時々あなたはコーディングにとても熱狂し、あなたは暴力を振るう:)少なくとも、ブートストラップ3.0では、乱用されると、いくつかの標準が整っています。同じことが財団にも当てはまります。両方から学べることはたくさんあります。結局のところ、時間を考えると、「自分でローリング」することが前進です。
Matthew Trow 2013年

2
回答を投稿して別の回答にコメントするのはやや混乱します…(言っているだけ)
e-sushi

いくつかのバランスがこれにもたらされているのを見るのはうれしい:) Bootstrapは、経験豊富な人も初心者も同じように、多くの人に適しています。
Aaria Carter-Weir 2015

これは質問の答えにはなりません。
グレッグ・シュミット

6

それでもemとremをサポートするBootstrapを好む場合は、こちらをご覧ください-https://github.com/ivayloc/twbs-rem-emピクセルをremまたはem単位に変換するために計算を行う必要はありません。で、ビルドがあり@mixins、このためには- @include rem(property, values)- EMはconvertionもフォールバックPXにとのためにあなたが使用することができますem(value)


Foundationの方がよく考えられているので、TBSを使用しなくなりましたが、これは妥協案のようです。
2014

1

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

彼らがフォントサイズのピクセルを保持することを選択した理由は完全にわかります。フレームワークのフォントに対するemの継承の問題は、完全に悪夢です。

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

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

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

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

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


1
Bootstrapの皮肉の1つは、アプリケーションを「ブートストラップ」するだけではないということです。これは非常に多くのレベルで規定されており、その中でもレイアウトは重要です。怠惰を除いて、非常に多くのサイトが明らかに明らかにブートストラップベースである理由は、デフォルトから脱却するのがそれほど簡単ではないためです。はい、アスペクトをカスタマイズするための変数がいくつかありますが、恐ろしい特異性の問題により、他のアスペクトをオーバーライドすることは大きな頭痛の種になります。たぶんBootstrap 3のほうがいいでしょう。個人的には、Foundation 4が好きです。フレームワークではなく、自分が担当しているように感じます。
2013

0

私は、それはデスクトップの最初のアプローチのためだと思います。Twitter Bootstrapは、応答性に優れていますが、「グレースフルデグラデーション」アプローチです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.