cssで％の代わりに＄

Question

ボールドテキスト

cssで％の代わりに＄を用いても同じ結果になるのはなぜでしょう？(90%→90$)

さほど重要でないことかもしれませんが、気になったのでどなた知っている方がいましたら教えてください。

Answer 1

知っているわけではないのですが、不思議に感じたのでちょっと検証してみました。

結論としては、恐らく[auto]定義になっていると思われます。

.s1 {
border: solid 1px black;
width: 100%;
}

.s2 {
border: solid 1px black;
width: 100$;
}

.s3 {
border: solid 1px black;
width: auto;
}

.s4 {
border: solid 1px black;
}

こんな感じにスタイル比較してみたら s2,s3,s4 の結果が等しく、s1 の要素幅との間に 2px （borderの左右幅の和）の差が出ました。

※width の初期値は auto なので s3 と s4 が同じ結果になるのは当然ですが、そうであることを確認するためにあえて書いてます

ということで、ブラウザが「単位でもなく、かわからん文字だから無視（auto）でいいだろう」と解釈してるんじゃないかなと・・・。
ちなみに # や & を使ってみても同じ結果になります。

ご質問では「(90%→90$) の結果が同じ」とのことでしたが、90% と auto の結果に差がなく気づきにくいのだろうと解釈しましたが、いかがでしょう？

こんな曖昧な回答ですみません。。。

Comments

[twin_bird]

確認してみたら確かにその通りでした笑
何やら勘違いしてたみたいです、すみません泣