ブラウザサポート

ユーティリティファーストのフレームワークでブラウザサポートについて考える方法を理解する


Tailwindには grid layout, object-fit/position, sticky positioningなど、最新の人気あるブラウザでのみ利用可能な 多くのCSS機能のサポートが含まれています。 またカスタムプロパティなどの他の最新のCSS機能を使用してtranslate, rotate, scaleなどのユーティリティを実装しています。

とはいえ、Tailwindは非常にローレベルのフレームワークであるため、IE10/11などの古いブラウザーをサポートする必要のあるサイトを構築するためにTailwindを簡単に使用できます。

Using Tailwind with older browsers

BootstrapやBulmaなどの一般的なコンポーネントベースのフレームワークでは、 各コンポーネントの実装の詳細が抽象化されているため、サポートされているブラウザーを知ることが重要です。

たとえば.row.col-4のようなクラスでグリッドを構築する場合、フレームワークの作成者がターゲットにしているブラウザを知る必要があります。 これらのクラスがfloat、Flexbox、またはCSS Gridを使用して実装されているかどうかわからないためです。

一方、Tailwindはローレベルのユーティリティフレームワークであり、ほとんどのクラスが個々のCSSプロパティに直接マップされます。 これは、どのブラウザをサポートするかは、フレームワークではなく、実際にはあなた次第であることを意味します

たとえば、これはTailwindのFlexboxユーティリティで構築された3列のグリッドです。FlexboxはIE9でサポートされていないため、IE10以上でのみ機能します。

<div class="flex">
  <div class="w-1/3"><!-- ... --></div>
  <div class="w-1/3"><!-- ... --></div>
  <div class="w-1/3"><!-- ... --></div>
</div>

IE9をサポートする必要がある場合は、代わりにfloatを使用してグリッドを構築できます。なぜならfloatは実質的にすべてのブラウザーでサポートされているためです。

<div class="clearfix">
  <div class="float-left w-1/3"><!-- ... --></div>
  <div class="float-left w-1/3"><!-- ... --></div>
  <div class="float-left w-1/3"><!-- ... --></div>
</div>

Tailwindは、UIでコンポーネントを構築する方法について意見を課さないため、独自のブラウザーサポートポリシーに従って、コンポーネントを好きなように実装できます。

どのCSS機能がどのブラウザでサポートされているかに関する最新情報については、Can I Useデータベースを検索してください。

Vendor Prefixes

Tailwindは、どのスタイルにもベンダープレフィックスを自動的に追加しません。 代わりにAutoprefixerを使うことをオススメします。

使用するには、npm経由でインストールしてください。

# Using npm
npm install autoprefixer

# Using Yarn
yarn add autoprefixer

次に、PostCSS設定のプラグインリストの最後に追加します。

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!