ピクセルが死んでいる:なぜあなたはCSSでピクセルの使用を停止する必要があります

それが1999年であるようにウェブサイトを再度設計したいと思うか。 ピクセルは行く方法です。

この記事は、あなたの画面に表示される小さな赤緑と青のピクセルについてではありませんが、彼らは大丈夫だ心配しないでください。 これは、HTML&CSS内でのピクセルの使用に関するものです。 理論の必要はありません、CSSピクセルでは#f-ingスケール、ロールクレジットをしないでください!

なぜ正当な理由があるに違いありません…

ウェブは今日の世界のために設計されていない21歳以上の基準に基づいています

Exodus12:8

同じ夜、彼らは火の上で焼かれた肉を食べることになっています

聖書は、私たちが虐殺の日に動物の肉を食べるべきであることを示唆しています。 しかし私達に今新しく、古い問題のための解決として冷却装置、フリーザーおよび缶詰食品があります。

CSS1は言う:

ディスプレイはほぼすべて同じサイズなので、静的フォントを使用してください

私たちの要求は1996年以来変更されました。 私たちは今、考慮すべきデバイス、解像度、および表示比のはるかに多種多様を持っています。 新機能を導入したにもかかわらず、食品業界とは異なり、基礎となる技術は以下のために変更されていません:

下位互換性

そして当然のことながら、今、私たちはすべてインターネットの悲惨さに耐えることができるからです。

フォントサイズの誤解

過去に、私はいくつかの開発者やデザイナーの同僚とフォントサイズの誤解のトピックを議論してきました。

彼らが通常与える反応は、サンタクロースが初めて本物ではないと言っているかのようです…

Font-sizeは、画面上のピクセルサイズと具体的に相関していません

  • 16pxの1つのfont-familyは高さ24pxの”A”charを持つことができ、16pxの別のfont-familyは高さ26ピクセルの”a”charを持つことができます。
  • ブラウザやオペレーティングシステムがカーニング、スムージング、そして最も重要なのはデバイスのピクセル比をさまざまな方法で処理する方法を考慮していません。
  • ユーザーエージェントはそれぞれ、その上に異なるデフォルトのセットを持っています。

だから、ウェブ上で”ピクセルパーフェクト”についての話をシャットダウンしてください、あなたは、単一のタイプのデバイスの単一の画面サイズ上の単一

ピクセルを使用してWEBサイトを再度実装することはありません!

私は最初ではなく、これを吐き出す最後の人でもないので、あなたが最初の石を投げる前に他の罪人をチェックしてください。 深呼吸をする…

  • 浮動小数点精度: CSSのすべてのフォント単位(pxを含む)は、最新のブラウザで浮動小数点数を処理できます。 一般に、1pxが画面ピクセルの同等のサイズを”想定”している場合(これは間違っています)、ピクセル比が1のデバイスを設計するときに小数を使用して無意味に見えることがあります。 DPRが2/3または4のデバイスでこれらのメトリックを表示すると、小数の回避のために見かけの精度が失われます。 REMとEMは、10進数の使用によってより多くの精度を「奨励」します。
  • それは錯覚です:CSSのピクセルは実際の画面サイズのピクセルではありません。 それらは実際には光学参照単位です。 この混乱は、”プロ”で経験豊富なweb開発者に、CSSプリプロセッサ用のピクセルからemへの変換ミックスインを作成するような愚かなことをさせること これは、いくつかの小さなマージン/パディングの違いの上にUXデザイナーと論争に多くの時間を費やす理由である可能性があります。 デバイスのピクセル比は、光学参照ユニットのサイズを表し、それはデバイスまたはユーザーが設定したデスクトップのズームレベルにのみ依存します。
  • PXはより多くのメンテナンスをもたらします:ここでは何も新しいことを言っていませんが、一般的にパーセンテージ対ピクセルサイズのコンテナ
  • 相対寸法を設定するFONT-SIZEでスケール:通常、固定幅または高さを設定する必要がある場所では、常にREMまたはEM単位を使用します。 EMの寸法を持つコンテナは、そのフォントサイズに相対的です。 EM単位では、テキストコンテナのフォントサイズを更新すると、幅または高さ(EMsで設定)は比例して拡大縮小されます。 REMを使用すると、ドキュメントのルートfont-sizeを変更する場合に当てはまります。

(はい、EMは古いにもかかわらずREMよりも高度ですが、EMは何らかの理由でブラウザ間のremよりもメディアクエリブレークポイントの方が優れています)。

ピクセルが必要な状況はほとんどなく、実際のレイアウトを構築する状況はほとんどありません。

これまでの画像の悲しい使用。

私がそこで何をしたか見て?

EMを使用したfont-sizeは、親コンテナのfont-sizeに対する相対的なものです。 しかし、時には配合することは望ましくなく、維持するのが困難です。 REM単位は、文書に対する相対的なものです。 疑問がある場合は、簡単にするためにREM(IE9+)を使用してください。

REMユニットの使用

あなたはピクセルの古代の世界から来ている場合は、それが困難なREMユニットを使用して突然起動するすべてのことがあります。 ここにある先端はある。もちろん、1remはCSSでは16pxですが、CSSの16pxは、特にfont-sizeの画面ピクセルの実際のメトリックではありません。 したがって、REMの使用には、ピクセルと一緒にやってきたのと同じ試行錯誤の推測ゲームが必要です。

  • ±0.5then±0.25:任意の種類の長さを推測している場合は、近接して合理的に取得するとすぐに、0.5ずつ増分または減少し、より具体的な推測を行う前に2.5ずつ増加または減少させます。 これは通常時間を節約します。
  • 電卓を使用する:アドレスバーはchromeの電卓です、当たり前!
  • 未来はデカルト的

    MIMETICを使用した例。rem単位とパーセンテージを使用したjs。

    HTMLを介したCSSはすでにデカルト座標系を使用していますが、それは私がここで議論していることではありません。 問題は、全体的に重要な成分「割合」が欠落していることです。 すべての要素は、font-sizeプロパティを除いて、%、vw、またはvhを使用してビューポートに関連して比例することができます。 REMユニットでさえ助けにはならない。 vwとvhユニットは、フォントサイズで使用するとデスクトップブラウザでズームアクセシビリティを破るので無視されます。

    CSS&HTMLは一緒に不純な2Dフレームワークを構成します

    これはSVGの場合ではありません。 しかし、SVGはまだテキストの折り返しや書式設定モデルを備えていません。

    私たちは1996年に立ち往生しています。 Webデザインを21世紀に移行するには、少なくともフォントサイズに比例した2Dシステムが必要です。

    x軸(ウィンドウ幅)のすべてを比例して保持する必要があります。 これにより、y軸の要素も比例してスケーリングされますが、y軸のスケーリングはx軸のスケーリングには影響しません。

    ブラウザでフォントを比例して拡大縮小しようとするJavaScriptの試みがいくつかあり、ピクセルを使用するものとem/rem単位を使用するものがあります。 ピクセルを使用するものには欠陥があります。

    では、なぜピクセルは死んでいるのですか?

    • それらは静的です(ただし、技術的には他のほとんどもそうです)
    • 変更後のルートフォントサイズを尊重しません(REMやEM単位のようなルートフォントサ
    • これらは整数として想定されているため、通常、さまざまな異なるピクセル比での実装の精度が低くなります。
    • どうやら、Bootstrap4はREMのピクセルを落としています。
    • ピクセルは、画面上のピクセルに等しいという錯覚を作り出し、誤解を招き、長期的には新しい開発者にとって混乱を招きます。
    • ピクセルは、デザインが包括的に比率についてであるため、将来的にフォントをスケーリングするための実行可能な解決策になる可能性は低いです。

    それがwebデザインのピクセルに深刻な未来がない理由を私のテイクです!

    コメントを残す

    メールアドレスが公開されることはありません。