【CSS】daisyUIをIEに対応させる
こんにちは!tailwindから離れられないMizutani(@sirycity)です。だって便利すぎるもん...他のCSS使えない。
今日はそんなtailwind系列のコンポーネントライブラリのdaisyUIを、本来対応してないIEに対応させる方法です。Next.jsを例に説明しますがどんな環境でもいける。はず。
はじめに
- tailwindはCSSのフレームワークです。daisyUIはその拡張版みたいなやつです。
- というか、tailwindもPostCSSの拡張版みたいなもんです。
- tailwindは最新版がv3なんですが、IEに対応してるのはv1までです。
- daisyUIはtailwindがv1だと使えません。
- つまりdaisyUIはIEに対応してません。
- んで、そこをなんとかするのがこの記事です。
そもそもなぜIE非対応なのか
tailwindはv3だとIEに非対応です。正確にはv2から非対応です。でもなんででしょう?
非対応ってことは、言い方を変えると tailwindはIEが非対応の機能を容赦なく使っているということです。実際その通りで、tailwindがv2からがっつり使っているCSS変数がIE非対応の機能です。
ってことは逆に言えばCSS変数を使ってなければIEでも使えるってことです。
PostCSSでCSS変数を解除しよう
CSS変数なんですが、別にめっちゃくちゃ重要な機能というわけではないです。その気になれば使わなくても大丈夫です。
世の中には便利なもので、CSS変数を解除できるPostCSSのプラグインがあるんです(解除って言い方おかしい?)それがこちら
こいつをインストールしてpostcssに設定してやりましょう。
tailwindはプラグイン?
余談ですが、postcss視点から見たらこのpostcss-css-variables
とtailwindはどちらもプラグインです。並列です。tailwindはCSSフレームワークなんですが PostCSSに依存しているため、postcssのプラグインという見方もできます。というかそのように考えた方が設定しやすいです。
感覚としてpostcssを使ってtailwindからCSS変数を抜き取るのではなく、元々あるCSSのコードにフィルター1(tailwind)を適用した後フィルター2(CSS変数解除)を適用すると考えた方が理解が進むかと思います。
postcssの設定ファイルに定義
それでは実際にPostCSSの設定ファイルに書いていきましょう。こんなかんじ。
module.exports = {
plugins: [
require('tailwindcss'),
require('postcss-css-variables')({
preserve: true,
}),
],
}
ポイントはpreserve: true
を付けることです。これはCSS変数を解除するけど一応解除前のやつも残しておくぜって設定です。そもそもIE以外はCSS変数を問題なく読み込めるので、このような設定にしています。ここだけの話postcss-css-variables
のCSS変数解除は完璧ではなく、適用する際に元のCSS変数を使ったコードを完全に消してしまうとdaisyUIの表示が一部崩れてしまったりします。分かりやすい所だとBreadcrumbsとか。なので元のコードも残しときます。
さいごに
daisyUIは基本的にモダンフロントエンドの環境を前提としているため、IEみたいな古の環境が非対応となるのは分かります。ってかそれが正しいと思います。でも大人の事情でIEに対応させる必要もあると思います。そんな時に参考にしてくれると嬉しいです。以上。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介