9時半頃起床。昨日延長12回まで球場にいたので疲労が残っている。
10時からもくもく会。
今日は久々に何も無い日だったので、ゴロゴロしたりコード書いたりしていた。
今日の学びは、Tailwind CSSのaspect-ratioについて。Tailwind CSSのユーティリティクラスを用いてアスペクト比を指定する方法は二通りある。
ひとつは、Tailwind CSS v3.0以降に組み込まれたコアプラグインとしてのaspect-ratio指定で、公式ドキュメント*1に記載されているものだ。これは、Tailwind CSS v3.0以降をインストールすれば勝手についてくる。もう一つは、これまた公式が外部プラグインとして提供している@tailwindcss/aspect-ratioだ。こちらは、パッケージマネージャを利用して本体とは別にインストールする必要がある。
両者ともやりたいことは一緒だが、アプローチが違う。前者は、CSSのaspect-ratioプロパティを利用している。一方後者は、テストを見る限りはaspect-ratioプロパティを使わずにそれっぽいことを実現しているようだ。*2
@tailwindcss/aspect-ratioのREADMEには下記のような記載がある。つまり、Safari 14のようなaspect-ratioをサポートしていないブラウザを相手にしたいなら、プラグイン使ってねということだ。
Tailwind CSS v3.0 shipped with native aspect-ratio support, and while these new utilities are great, the aspect-ratio property isn't supported in Safari 14, which still has significant global usage. If you need to support Safari 14, this plugin is still the best way to do that.
自分は特に古いブラウザをサポートしたいわけでもないし、仮に古いブラウザでアクセスされたとして画像ローディング前後でレイアウトシフトが起こるだけなので、公式の方を使うことにした。
ここで注意が必要なのが、Web上にあるTailwind CSS入門記事では当たり前のようにプラグインを使う設定が書かれており、Tailwind CSS v3.0では公式のaspect-ratioとプラグインとが競合してしまうことがあるということだ。
もし公式の方を使いたいのであれば、プラグインを入れて有効化してはいけない。逆にプラグインの方を使いたいならば、公式の方を無効化しなければならない。（やり方はプラグインのREADME参照）
日記に書くことが無さ過ぎて今日のコーディングでの気付きを書いたのだけど、これはZennにでも書けばよかったのでは？というか、最近技術記事書いてない気がするなあ。
