レイアウトのパーセンテージの課題：ブラウザの違いと浮動(dòng)點(diǎn)精度の問(wèn)題

ブラウザの矛盾と浮動(dòng)點(diǎn)精度の仕様の欠如により、レイアウトの割合は非常に困難です。

SASSの利點(diǎn)：精度とコードの読みやすさを向上させます

SASSは、複雑な計(jì)算を処理し、StyleSheetを読みやすくしやすくすることで精度を向上させる前処理器スクリプト言語(yǔ)です。ただし、SASSのデフォルト精度オプションは5ですが、場(chǎng)合によっては低すぎる場(chǎng)合があります。

関數(shù)：ブラウザの計(jì)算と丸め

calc()

CSS関數(shù)により、ブラウザは計(jì)算と丸めを処理でき、より良い結(jié)果が得られる可能性があります。この関數(shù)は、SASS操作と組み合わせて、CSS精度の両方の最高の世界を提供します。

calc(..)

初期設(shè)定

説明全體を開始する前に、私たちのケースに非常に関連する小さなコードに取り組みます。

問(wèn)題は何ですか？

<code>.list-item {
  float: left;
  width: 33%;
}</code>

このコードの何が問(wèn)題なのか疑問(wèn)に思うかもしれません。外観から、大きな問(wèn)題はありません。これは3列のグリッドレイアウトであり、非常に一般的です。

ただし、33％33％は99％に等しく、100％ではありません。ほとんどの場(chǎng)合、これは違いをもたらさないかもしれませんが、直線のアライメントを扱う場(chǎng)合、1％が大きな影響を與える可能性があります。幅14ピクセルの容器の1％は14ピクセルです。これはかなりの距離です。

小數(shù)點(diǎn)をより正確にするために小數(shù)點(diǎn)を移動(dòng)する（または追加する）だけではないのですか？ギャップを1.4ピクセルまたは0.14ピクセルに減らすことができますが、これはもはやトラブルの価値がないと思います。次に、ここから始めます。

うまく機(jī)能しますが、それでも完璧ではありません。ジョン?アルビン?ウィルキンスは、この問(wèn)題でこの問(wèn)題を広範(fàn)囲に議論しています。まだ読んでいない場(chǎng)合は、読んでください。

ブラウザはこれを処理できませんか？

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

この時(shí)點(diǎn)で、ブラウザがなぜそれを機(jī)能させることができないのか疑問(wèn)に思うかもしれません。問(wèn)題は、CSS仕様が（皮肉なことに）、パーセンテージ數(shù)のフローティングポイント精度をどうするかをブラウザベンダーに指定していないことです。 CSSの仕様で詳細(xì)が省略されると、各ブラウザが獨(dú)自の方法でそれを処理することを確認(rèn)できます。

上記の記事の次の例：

[…]列あたり100％の幅の6列グリッド÷6 = 16.666667％を使用します。幅1000ピクセルのビューポートで（數(shù)學(xué)を簡(jiǎn)単にするために便利に選択しました）、各列は166.66667ピクセルに計(jì)算されます。仕様はガイドラインを提供していないため、ブラウザメーカーは獨(dú)自のルールを自由に策定できます。ブラウザが最も近いピクセルに丸くなると、この例では167ピクセルが得られます。しかし、167 x 6 = 1002ピクセル以降、私たちのビューポートの6つの列すべてを収容する余地はもうありません。または、ブラウザが列あたり166ピクセルまで丸められた場(chǎng)合、すべての列をビューポートに完全に入れるよりも4ピクセルが少なくなります。 - ジョン?アルビン?ウィルキンス

これが起こったことです。インターネットエクスプローラーの古いバージョン（主に6および7）が最も近い整數(shù)に丸みを帯びており、レイアウトの中斷を引き起こしました。 WebKitブラウザは締めくくります。これにより、壊滅的なレイアウトの結(jié)果が防止されますが、余分なスペースが殘ります。 Opera（少なくとも古いレンダリングエンジンでは）は、私が説明するのが面倒だという奇妙なことをしています。しかし、仕様にはこの動(dòng)作に関するルールはありませんので、誰(shuí)を責(zé)める必要がありますか？もちろん、サブピクセルレンダリングを使用するブラウザではありません。最終的にこれが最良の結(jié)果を生み出す方法だからです。

とにかく、これは単に混亂であり、この記事の結(jié)論でこの問(wèn)題について再び議論します。

sassはどうですか？

SASSは數(shù)學(xué)的操作をサポートしています。これは新しいものではありません。実際、SASSが最初に使用したいくつかのことの1つです（數(shù)學(xué)ベースのグリッドシステムの構(gòu)築に）。容器の幅を3つの等しい部分に分割したいとSASSに伝えることができます。

<code>.list-item {
  float: left;
  width: 33%;
}</code>

同じ結(jié)果を取得するためにパーセンテージ（..）関數(shù)を使用することもできます。

RubyとLibsassでは、SASSの精度オプションは5です。これは、非常に低いため、実際には問(wèn)題です。

<code>.list-item {
  float: left;
  width: 33.33%;
}</code>

このコードは、次のCSSを生成します：

これはブラウザの問(wèn)題を解決するものではありませんが、執(zhí)筆スタイルシートを簡(jiǎn)単にします。計(jì)算や精度に対処する必要がないだけでなく、計(jì)算を?qū)g際に表示することで、コードを読みやすく更新しやすくします。

<code>.list-item {
  float: left;
  width: (100% / 3);
}</code>

これは良いことだと思います。

両方の世界の最高の

これまでのところ、SASSが値をハードコードするのではなく、計(jì)算を処理させる方が良いことを?qū)Wびました。さて、最良の方法は、ブラウザにこれをできる限り最良の方法で処理させることです。これを行うには、

css関數(shù)を使用できます。

calc(..)

このコードは何にもコンパイルされません。著者が書くように、ブラウザに表示されます。ブラウザは、それを最大限に活用する責(zé)任があります。ブラウザが通常の値と同じように

<code>.list-item {
  float: left;
  width: percentage(1 / 3);
}</code>

値を処理するかどうかは完全に正直に言っています。私は彼らが計(jì)算をしてからラウンドすると思います。一部のブラウザは、式にサブピクセルレンダリングを組み込んでいるようです。これに関する洞察がある場(chǎng)合は、コメントで共有してください。

calc(..)式（主にInternet Explorer 8およびOpera Mini）をサポートしていないブラウザの場(chǎng)合、SASS操作として表される靜的値をその前に配置できます。このようにして、私たちは両方の世界で最高のものを持つことができます。

<code>.list-item {
  float: left;
  width: 33%;
}</code>

結(jié)論

すぐにレビューしましょう。第一に、ブラウザの矛盾と浮動(dòng)小數(shù)點(diǎn)精度の仕様の欠如により、レイアウトの割合を処理するのは困難です。

次に、複雑な計(jì)算によって生成されたハードコード値は通常、良い考えではありません。 SASSに近似値（5小數(shù)點(diǎn)）を計(jì)算できます。

さらに良いことに、ブラウザに近似値を計(jì)算できます。理想的な世界では、ブラウザが數(shù)學(xué)とレンダリングを擔(dān)當(dāng)するとき、それを最大限に活用できるはずです。この方向に移動(dòng)するには、calc(..)関數(shù)に依存します。

これはほぼ現(xiàn)在の狀況です。新しいものは何もありませんが、簡(jiǎn)単なレビューが役立つと思います！

CSSおよびSASS精度（FAQ）

に関するFAQ

CSSとSASSの違いは何ですか？

CSS（Cascading Style Sheet）は、HTMLで書かれたドキュメントの外観とフォーマットを説明するために使用されるStyleSheet言語(yǔ)です。 SASS（SyntaxのSmart StyleSheets）は、CSSに解釈またはコンパイルされたプリプロセッサスクリプト言語(yǔ)です。 2つの主要な違いは、SASSには、変數(shù)、ネスト、ミックス、継承など、CSSには存在しない機(jī)能があることです。これらの機(jī)能により、SASSはCSSよりも強(qiáng)力で柔軟になります。

CSSとSASSでの精度はどのように機(jī)能しますか？

CSSおよびSASSの精度とは、スタイルレンダリングの詳細(xì)と精度を指します。 CSSでは、変數(shù)や関數(shù)が不足しているため、精度はしばしば制限されています。一方、SASSは、高度な機(jī)能のおかげでより高い精度を可能にします。たとえば、特定の色またはサイズの変數(shù)を定義し、スタイルシート全體で一貫して使用して、設(shè)計(jì)の正確性と一貫性を確保できます。

どんなWebプロジェクトでもSASSを使用できますか？

はい、あらゆるWebプロジェクトでSASSを使用できます。 SASSは、CSSのすべてのバージョンと互換性があります。したがって、CSSから始めて、必要に応じてSASS機(jī)能を追加できます。ただし、SASSにはプリプロセッサがブラウザが解釈できるCSSに変換する必要があることを忘れないでください。

CSSでSASSを使用することの利點(diǎn)は何ですか？

SASSは、CSSよりもいくつかの利點(diǎn)を提供します。これにより、変數(shù)、ネスト、ミックスイン、継承を使用することで、スタイルシートがより整理され、再利用可能で、メンテナンスが容易になります。 SASSは數(shù)學(xué)操作もサポートしており、スタイルシートで寸法と色を直接計(jì)算できるようにします。

CSSまたはSASSコードの精度を改善する方法は？

変數(shù)を使用して一貫した値を取得し、數(shù)學(xué)操作を使用して正確な計(jì)算を?qū)g行し、関數(shù)とミキシンを使用して再利用可能なスタイルを取得することにより、CSSまたはSASSコードの精度を改善できます。さらに、CSSリセットを使用すると、異なるブラウザー間の一貫性を確保できます。

CSSプリプロセッサとは何ですか？なぜSASSはそれを必要とするのですか？

CSSプリプロセッサは、CSSのデフォルト機(jī)能を拡張するスクリプト言語(yǔ)です。 StyleSheetsで変數(shù)、ネストされたルール、ミックス、機(jī)能、數(shù)學(xué)操作を使用できます。 SASSはCSSプリプロセッサです。ブラウザはCSSのみを解釈できるため、必要です。したがって、SASSコードは、Webプロジェクトで使用される前にCSSにコンパイルする必要があります。

SASSは、ドライの書き込み（自分自身を繰り返さないでください）コードをどのように役立ちますか？

SASSは、変數(shù)、Mixin、継承などの機(jī)能をサポートしています。これは、ドライコードの書き込みに役立ちます。変數(shù)を使用すると、一度に値を定義し、複數(shù)の場(chǎng)所で使用できます。 Mixinを使用すると、他のルールに含めることができる再利用可能なスタイルを作成できます。継承を使用すると、あるセレクターから別のセレクターにCSSプロパティのセットを共有できます。

SASSを使用する潛在的な落とし穴は何ですか？

SASSには多くの利點(diǎn)がありますが、潛在的な落とし穴もあります。前処理者の必要性は、開発プロセスの複雑さを高める可能性があります。さらに、ネストや混合物などの一部のSASS機(jī)能により、不適切に使用するとCSS出力が膨満し、非効率性が発生する可能性があります。

學(xué)習(xí)とSASSの使用を開始する方法は？

オンラインでSASSを?qū)Wぶために利用できるリソースがたくさんあります。公式SASS Webサイトは、開始するための包括的なガイドを提供しています。 Web開発Webサイトやオンライン學(xué)習(xí)プラットフォームでチュートリアルを見つけることもできます。 SASSを始めるには、開発環(huán)境にSASSプリプロセッサをセットアップする必要があります。

既存のCSSコードをSASSに変換できますか？

はい、既存のCSSコードをSASSに変換できます。 SASSはCSSのスーパーセットであるため、有効なCSSは有効なSASSです。まず、.cssファイルを.scss（sassy css）に変更してから、コードでsass機(jī)能の使用を徐々に開始できます。

以上がCSSとSASS精度の物語(yǔ)の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。