CSS3のcalc()ファンクションを古い環境に対応させる
2015年7月22日
CSSで計算式を可能にできるcalc()ファンクション。
calc()ファンクションはパーセントとピクセルを混合した大きさを指定できるので
レスポンシブサイトを作る時はかなり重宝する。
例えば100%のwidthから10px引いた幅にしたいときは
.content{ width:calc(100% - 10px); }
と言った感じで書くことができる。
何とも便利なcalcだけど、こいつはiOS7未満とかAndroid4.4未満の古い環境では対応していない。
レスポンシブサイトだとまだまだ見過ごせないので結構致命的。
calc()ファンクションを古い環境で対応させる
ベンダープレフィックス付ければ古いSafariやiOSには対応できるけど
Androidは4.4でしか効かないんじゃあんまり意味が無い。
かと言って見た目が近い数値を指定するのも何か違う。
て事でjqueryで無理矢理CSS計算させちゃえばいいやって所に落ち着く。
上の例と同じ指定をするならこう書けばいい。
$(function() { $('.content').css('width', '100%').css('width', '-=10px'); });
適当な対応だけど効けばいいw
人気記事
- 1位:日本配送可能な海外PCパーツショップのメモ
- 2位:作ったWEBサービスのスタートダッシュ!サイトを宣伝する3つの方法
- 3位:ナビゲーションの現在位置表示を自動でしてくれるスクリプト
- 4位:WordPressで記事の投稿をトリガーにする
- 5位:レスポンシブサイトの表示チェックができるResponsive Checker
- 6位:ヘッダーやページトップの追尾系ナビゲーションのソースまとめ
- 7位:リキットじゃないレスポンシブサイトを画面にフィットさせるメモ
- 8位:Facebookが要らん事したのでPagePluginを無理矢理縮めてやった。
- 9位:「pageslide.js」での拡大崩れを防止する方法
- 10位:MXレコードが確認できるWEBサービス「mxtoolbox」