web-dev-qa-db-ja.com

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

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

104
Undistraction

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

[更新]それで今日、Mark Ottoは私が上記で参照したスレッドについて答えました。予想どおり、アクセシビリティと「ピクセルパーフェクト」というフレーズの使用については言及されていません。

さて、ここで、昨年の決定と前進するための計画の背景について少し説明します。

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

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

最近のブラウザはページ全体を拡大するため、タイプの拡大縮小などの問題はありません。

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

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

それは少し終わっており、うまくいけば十分に首尾一貫しています。私はこれらの変更がより詳細になったらブログに書いてみようと思うが、3.0がどれほど近いか、そしてそれが何をもたらすかはまだ分からない。

私は、このゴーと+1 このスレッド について強い思いを持っている人をお勧めします。

[更新] V2.3 release blogpost に記載されているV3ロードマップでは、emのサポートの追加については言及されていません。

[更新]プルリクエストで利用可能なBootstrap V3に関する多くの情報 ここ Mark Ottoからの以下を含む:

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

それから最近(そのコメントで):

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

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

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

[更新]レムがV4でサポートされるようになりますhere から引用されたMdo):

これに続くものについては、IE8サポートを廃止すると、v4でピクセルからREMに変更できるようになります。それまではあまりできません。

[17年2月更新] Bootstrap 4はまだAlphaですが、その Typography docs でレムの使用を示していますが、doesn 'tlayout docs でレムの使用を示します。

129
Undistraction

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

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

最小限の経験を持つ人々がよく使用しますが、それは何の問題もありませんが、経験のあるlotを持つ人々も使用します。

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

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

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

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

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

11
Matthew Trow

それでもまだBootstrap emおよびremのサポートが必要な場合は、こちらをご覧ください- https://github.com/ivayloc/twbs-rem-em そこでremまたはem単位でピクセルを変換するために計算を行う必要はありません。これには@mixinsが組み込まれています-@include rem(property, values)-pxにフォールバックし、em変換にはem(value)

6
ivayloc

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

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

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

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

それがbootstrap-とそれに似たフレームワークの美しさです-それは作業するための強固な基盤です。

はい、Twitterにはbootstrapにアクセスできない要素があることに言及しました-1つの小さな例、クリップを使用する代わりに 'display:none'を使用します。これには正当な理由があります-そして、必要に応じてこれを非常に簡単に変更できます。

ブートストラップは完璧ではありませんが、その後、すべての要件に対する最終的な答えになることを意図していたとは思いません。それはベース-「ブートストラップ」-それを学び、適切に活用し、それを追加し、すべてを混ぜ合わせます-少なくとも、プロトタイプを作成したり、クイックサイトを一緒に作成したりするための素晴らしいフレームワークです。さらに進むと、any Webサイトに適用できる非常に強固な基盤があります。

1
user2584840

デスクトップファーストのアプローチのためだと思います。 Twitter Bootstrapはレスポンシブフレンドリーですが、「グレースフルデグラデーション」アプローチです。

0
gocsp