PX フォールバックを備えた REM ユニットを使用して、新しいサイトの作業を開始しました。さて、ばかげているかもしれない質問がありますが、具体的に言及しているものは何も見つからないので、ここで質問します.
プロパティの省略形と特定のプロパティを使用すると、ブラウザーChromeで両方の読み込みが有効になるようです。
body{ font:16px/23px sans-serif;
font-size:1rem;
line-height:1.438; }
一方、短縮形または両方の特定のプロパティを使用すると、どちらか一方が取り消されます (たとえば、両方ではなく、プライマリまたはフォールバックを使用します)。
body{ font-family:sans-serif;
font-size:16px; font-size:1rem;
line-height:23px; line-height:1.438; }
また
body{ font:16px/23px sans-serif;
font:1rem/1.438 sans-serif; }
ここで、正確にベストプラクティスはどれですか? すべての例が検証されます。同じプロパティをターゲットにしているにもかかわらず、短縮形と特定のプロパティの両方がブラウザーのChromeに読み込まれる理由はありますか? それらは実際に両方ともロードされていますか？これは、ブラウザ/デバイスがスタイルをレンダリングする方法に悪影響を及ぼしますか?
私はChrome経由でこれを調べただけで、テストを通じて違いを識別することはできませんでした. しかし、rem を使用してすべての要素に対して同じコードの 2 つの反復を使用しなければならなかった場合、少しかさばることがわかります。
更新: 以下のすべてのブラウザーの最新バージョンでのみテストされています。すべてのテストは最初のコード スニペットに関連しています。
Firefox では、これは問題ではないようです。短縮コードの font-size/line-height を rem サイズに置き換えるだけです。IE、safari、および Opera では、ショートコードを取得して特定のプロパティに分割しますが、px 単位を無視して rem 単位をロードします。
少なくとも最新バージョンでは、Chrome に固有のようです。そこで質問なのですが、Chrome がそれをどのように処理しているかを知るにはどうすればよいでしょうか? この投稿の下部に表示されている画像で、もう少し説明がつくかもしれません。両方のフォント プロパティが読み込まれ、どちらも無視されたり優先されたりしないことがわかりますか?
更新 #2: マージンを使用すると、Chrome は適切に動作します。次の「壁から離れた」例を使用して説明します。
margin:16px 0 19px 0;
margin-top:1rem;
margin-bottom:1.188rem;
クロムで次のように読み取ります。
margin:1em 0 1.188rem 0;
(ソース: leftdeaf.com )
