CSSで小数点を指定。仕様上は間違いではないがpx指定の場合はブラウザが解釈しないので意味がない？ %は意味がある？

Question

CSSで小数点を指定することについて
・仕様上は間違いではないのでしょうか？

px指定の場合
・間違いではないが、ブラウザが解釈しないので意味がない？

%指定の場合
・ブラウザが解釈するので意味がある？

・ここら辺りについては、最終的にはブラウザ毎の仕様による？

Answer 1

CSSで小数点を指定することについて
・仕様上は間違いではないのでしょうか？

間違いではありません。

px指定の場合
・間違いではないが、ブラウザが解釈しないので意味がない？

解釈します。
ブラウザによって表示がピクセルにフィットするだけで、たとえば 1.5px + 1.5px はきちんと 3px として表示されます。

%指定の場合
・ブラウザが解釈するので意味がある？

ピクセルと同じことが起こります。ピクセルに直すと結果が中途半端になる値でも、計算上は 100% になり、表示段階でブラウザによってはピクセルにフィットされます。

ちなみにブラウザの拡大縮小機能が絡んでくるともっとややこしいようです…、

Comments

[re97]

・回答ありがとうございました

＞ピクセルに直すと結果が中途半端になる値でも、計算上は 100% になり、表示段階でブラウザによってはピクセルにフィットされます
・参考になりました

Answer 2

小数を使えるかどうかは対象プロパティに指定される型に依存します。

<integer> 型 (整数)

<integer> 型は整数値をとり、小数は許可されません。

• 4.1. 整数：<integer>型 - CSS Values and Units Module Level 3 日本語訳

<number> 型 (実数)

<number> 型は小数も許可します。

• 4.2. 実数：<number>型 - CSS Values and Units Module Level 3 日本語訳

<length> 型 (長さ)

<length> 型は文法上、<dimension-token> のトークンをとります。
<dimension-token> は <number-token>, <ident-token> から構成されますが、<number-token> は小数を許可する為、<length> 型は小数を許可します。

• 5. 長さの単位：<length>型 - CSS Values and Units Module Level 3 日本語訳
• <dimension-token> - CSS Syntax Module Level 3 （日本語訳）

他の型

他にも様々な型が存在しますが、全ては紹介しきれないので各種仕様書でプロパティが指定する型を確認してください。

• CSS Values and Units Module Level 3 日本語訳
• W3C仕様書などのまとめ【保存版】 | W3C仕様書関連の文書や日本語訳をまとめてみた。

Re: re97 さん

Comments

[re97]

・回答&リンク提示ありがとうございました

・仕様としては<integer> 型、<number> 型として定義されているんですね
・物凄く勘違いしていたことに気が付きました

・大変参考になりました！

[think49]

仕様の質問をたくさんされていますが、仕様書(日本語訳)を読むようにすると自分で調べる力が身につくと思いますよ。
仕様書のリンク集を親記事に追加しておきました。

[re97]

・コメント＆親記事追加ありがとうございました

Answer 3

https://moonglows76.tumblr.com/post/104315603318/css%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E5%B0%8F%E6%95%B0%E7%82%B9%E4%BB%A5%E4%B8%8B%E3%81%AE%E5%80%A4%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%ABpx%E3%81%AB%E3%81%BE%E3%82%8B%E3%82%81%E3%82%89%E3%82%8C%E3%82%8B%E3%81%8B

pxでも%でも小数点はブラウザごとの仕様で丸められてしまうようです。

Comments

[re97]

・回答ありがとうございました

Answer 4

ブラウザの表示倍率を200%なんかにしてると小数点以下のpxも効いてきます。

Comments

[re97]

・回答ありがとうございました

＞ブラウザの表示倍率を200%なんかにしてると小数点以下のpxも効いてきます
・初めて知りました
・参考になりました