[CSS]CSS と Sass Precision の物語（译）_html/css_WEB-ITnose

CSS および Sass レイアウトの精度について

元のアドレス: http://www.sitepoint.com/a-tale-of-css-and-sass -precision/

Edenspiekermann では、提出したコードが厳格なコード レビューを通じて十分に完全であることを確認します。数値のあいまいさは、特に小数点を含む数値でよく遭遇する問題です。したがって、ここでは簡単な記事でこの問題を明確にします。

初期セットアップ

記事を理解しやすくするために、次に進む前に、例として小さなコード ブロックを使用してみましょう。

.list-item {  float: left;  width: 33%;} 

何が問題ですか?

おそらく、このコード ブロックに何か問題があるのではないかと疑問に思うかもしれません。一見すると、これは何も問題がないように見えますが、これは典型的な 3 列のグリッド レイアウトではないでしょうか。

ただし、33% + 33% +33% は 100% ではなく 99% です。ほとんどの場合、この小さなギャップは何の影響もありませんが、直線レイアウトに影響を与える場合、1% のギャップが大きな影響を与える可能性があります。 1400 ピクセル以上のコンテナでは、1% の差は少なくとも 14 ピクセルであり、これは大きな差であることを知っておく必要があります。

より正確にするために小数点を移動してみませんか?ギャップを 1.4 ピクセル、さらには 0.14 ピクセルまで減らすことができ、この距離はもう気にならなくなります。

.list-item {  float: left;  width: 33.33%;} 

効果は向上しましたが、まだ完全ではありません。この問題は、John Albin Wilkins による記事「Responsive Design’s Dirty Little Secret」で詳しく研究されています。この素晴らしい記事をまだ読んでいないなら、ぜひ読んでください。

ブラウザはそれを処理できないのでしょうか?

現時点で、なぜブラウザはこの問題を完全に解決できないのかと考えているかもしれません。実際、CSS 仕様では、ブラウザが保持する精度の小数点以下の桁数は指定されていません。 CSS 仕様で詳細が指定されていない場合は、各ブラウザが独自の標準セットを持っていると考えて間違いありません。

以下は上記の記事からの引用です:

6 列のグリッド レイアウトでは、各列の幅は 100% ÷ 6 = 16.666667% です。したがって、1000 ピクセルのビューでは (計算を簡単にするため)、各列の幅は 166.66667 ピクセルになると計算されます。明確な文書がないため、ブラウザの製造元は独自のルールを策定することができます。ブラウザーが最も近い整数まで正確であれば、この場合は 167 ピクセルになります。ただし、167 * 6 = 1022px であるため、ビュー内のこれら 6 つの列に十分なスペースを提供できません。逆に、ブラウザが各列のサイズを正確に 166 ピクセルに設定すると、ビュー内に 4 ピクセルのギャップが作成されます。

– ジョン・アルビン・ウィルキンス

それは真実です。古いバージョンの IE (主に IE6 と IE7) は値を最も近い整数に変換し、レイアウトの問題を引き起こします。 Webkit ブラウザは切り捨てられるため、レイアウトのずれは防止されますが、余分なスペースが残ります。 Opera (少なくとも以前のレンダリング エンジンでは) は、奇妙で不可解なことをいくつか行います。繰り返しになりますが、これに関しては何のルールも定められていないので、誰があなたを責めることができるのでしょうか？ページのレンダリングにピクセルを使用しているブラウザを責めることはできません。それは確かです。そのため、現時点ではこれが最良の結果と思われます。

とにかく、かなり混乱していますが、結論としてそれに戻ります。

Sass についてはどうですか?

Sass は数値演算をサポートしています。これは新しい領域ではなく、実際に Sass の新しいプロジェクト (デジタル インフラストラクチャ グリッド システムを構築するため) で使用されています。私たちができることは、コンテナを 3 つの等しい部分に分割したいことを Sass に伝えることです。

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

パーセンテージ関数percentage(..)を通じて同じ結果を取得することもできます。

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

Ruby と LibSass のどちらを使用しても、小数点以下 5 桁がサポートされます。精度が非常に低いため、これは実際には問題です。小数点以下 10 桁までにしておくと良いのですが、残念ながらこれはデフォルトの設定ではありません (設定を変更することは可能ですが、簡単な方法ではありません)。

上記のコードは次の CSS 効果を生成します:

.list-item {  float: left;  width: 33.33333%;} 

これはブラウザの問題を解決しませんが、スタイルシートを簡素化します。 WYSIWYG 計算モデルにより、精度の値を自分で計算する必要がなくなるだけでなく、コードが読みやすく、保守しやすくなります。

これは良いことだと言わざるを得ません。

両方の長所

これまでのところ、Sass にこれらの計算を処理させるほうが、手動で値を計算するよりもはるかに正確であることがわかりました。さて、最善の方法は、ブラウザにこの操作を最適な方法で処理させることです。したがって、CSS の calc(..) 関数を使用できます。

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

这个代码块并不会被编译成其他东西，它由浏览器编译，然后由浏览器选择最佳方案。我可以坦诚的告诉你，我并不了解浏览器处理 calc(..)函数是否是和其他函数一样的流程。我推测它先执行运算，然后取整。有些浏览器似乎会把像素也带入计算。如果您有这方面的见解，欢迎在评论中分享。

对于那些 不支持 calc(..)表达式的浏览器 （主要是 IE8 和 Opera Mini），我们可以在 Sass 操作前放入一个静态表达式，通过这种方式达到平衡。

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

结论

让我们回顾一下。首先，因为浏览器之前的差异性和缺乏统一的标准，所以基于百分比的布局很难处理。

其次，通过一些复杂运算而导致的硬编码值通常也不是一个好主意。我们可以通过 Sass 计算出近似值（浮点后五位数）。

更好的方法是，我们让浏览器自己计算近似值。在理想的情况下，浏览器可以同时掌控算数和渲染，那么它能生成最好的方案。朝这个方向前进，我们需要依赖 calc(..)函数的使用。

目前为止就讲这么多了。没有新的内容，但我想一个快速的回顾会对你有帮助的！