カテゴリー
CSS

cssのキャッシュ無効化

最近WordPressさわってない…。

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

style.css?20190717

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

<link rel="stylesheet" href="/css/style.css?<?= filemtime('css/style.css'); ?>">
カテゴリー
CSS

Edgeでcalc()が効かない

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

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

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

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

カテゴリー
CSS

【CSS】角丸

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

4隅角丸

/* 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;

上2隅角丸

/* 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;

下2隅角丸

/* 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;