2024/12/7 TailwindCSS を扱うときのしくじり
がすべてです
前提として、今年やっている(おそらく年明けもしばらくやる)フロントエンドの作業は自分のチーム外のリポジトリです
主たるコードオーナーではなく、レビュイーとなる立場です
そのため毎日触っているわけではなく、必要のある場面でのみコミットしています
レイアウトシフト
https://web.dev/static/articles/cls/video/web-dev-assets/layout-instability-api/layout-instability2.webm
動画を扱ったサービスを今は主たる作業としているので画面表示に動画サムネイルや動画プレイヤーを伴う場面が多いです
そのため画像の読込やプレイヤーの読込後に画面が「ガタッ」(レイアウトシフト)とするのは避けたく、表示領域は確保しておきたいですよね
今年一番気にして使った Tailwind CSS のクラス名は aspect-video とも言えます
また、基本的に動画は16:9の比率ではあるので、未知の画像サイズであるなどはないのですが、もし読み込み時の画像サイズがわからない & コンテナの領域は確保しておきたい場合は object-contain なんかが便利ですね
今日は以上です