計算式を使った幅指定

| コメント(0)
width : calc(100% - 10px) ;

上記のような指定です。
SS3が出てきた頃、「計算式を使っての幅指定」がついに使えるようになるのか!と喜んだものの、実際にはブラウザの対応がまったくで使えるのは当分先になりそう...という残念な思いをしました。

下記のサイトが各ブラウザの対応状況をまとめてくださっているのですが、それを見る限り気を付ければ使って行けそうな感じ(スマホが若干心配ではあります)。



width : 98% ; /* 旧ブラウザ用 */
width : -webkit-calc(100% - 10px) ;
width : calc(100% - 10px) ;


現在(2016年7月)ではそろそろ必要ないかもしれませんが、念のためベンダープレフィックスとフォールバック用のスタイルを書いておくとよさそうです。

コメントする

このブログ記事について

このページは、gravity-worksが2016年7月13日 10:40に書いたブログ記事です。

ひとつ前のブログ記事は「IEで互換表示させない」です。

次のブログ記事は「iPhoneで画面を回転させたときに文字サイズが変わる」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。