カテゴリー: CSS

最近WordPressさわってない…。

大したことではないのだが、cssのキャッシュを無効化する方法を記述。ファイルに日付をつけるだけだけど…。ファイルの更新日の認識だったけど、そうかキャッシュが無効になるのか。なるほどなるほど。

style.css?20190717

phpで自動化もできるみたい。

<link rel="stylesheet" href="/css/style.css?<?= filemtime('css/style.css'); ?>">

例えば、width: calc(calc(100% / 3)とすれば幅をちょうど３分割になるように計算してくれる。いかに便利かというのはググってみてほしい。んで、今制作しているサイトをEdgeでみて愕然とした。calcが効いていないのである。calcは使えないんだっけ？使えるはずじゃん！なんでなんで。

で、検索したところ、IE11とEdgeではflexの中ではcalc()は使えないんだと。横並びをflexで使っていたのだった。

下記は参考サイト、ありがとうございます。他にもいくつか問題点が報告されているようです。

IE9/10から使えるCSS：calc()

コピペ用。
半径のセットは/で区切られている。
左上・右上・右下・左下の順で指定。

４隅角丸

/* border-radius */
border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

上２隅角丸

/* border-radius */
border-radius: 10px 10px 0 0 / 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0 / 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0 / 10px 10px 0 0;

下２隅角丸

/* border-radius */
border-radius: 0 0 10px 10px / 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px / 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px / 0 0 10px 10px;