Autoprefixer

3ステップで試す

1. 1

   Autoprefixer 10.6.1とPostCSSを導入する

   Autoprefixerとreview済みPostCSSをversion固定して一時projectへ導入します。

   demo=$(mktemp -d "${TMPDIR:-/tmp}/autoprefixer.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact postcss@8.5.29 autoprefixer@10.6.1コピー
2. 2

   Browserslistとprefix対象CSSを作る

   Safari 8をtargetに固定し、Browserslist設定からprefix要否が決まる最小例を作ります。

   printf "%s\n" 'Safari 8' > .browserslistrc && printf "%s\n" '.field { user-select: none; }' > input.css && printf "%s\n" "import fs from 'node:fs';" "import postcss from 'postcss';" "import autoprefixer from 'autoprefixer';" "const css = fs.readFileSync('input.css', 'utf8');" "const result = await postcss([autoprefixer()]).process(css, { from: 'input.css', to: 'output.css' });" "fs.writeFileSync('output.css', result.css);" > demo.mjsコピー
3. 3

   Autoprefixerを実行してvendor prefixを確認する

   user-selectへSafari向けprefixが追加され、browser targetがbuild outputへ反映されることを確認します。

   node demo.mjs && grep -q -- "-webkit-user-select" output.cssコピー

Built with

• JavaScript

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• normalize.css53,505 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  browserのuseful defaultを残しながら、default styleの差異と既知bugを補正する

  CSS
• Expo52,566 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  React NativeアプリをAndroid・iOS・Webへ一つのprojectから展開する

  TypeScript
• PostCSS28,974 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  CSSをASTへ変換し、JavaScript pluginでbuild時のstyle処理を組み立てる

  TypeScript
• Linaria12,350 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  CSS-in-JSのauthoring experienceを保ちつつ、styleをbuild時にstatic CSSへextractする

  TypeScript
• vanilla-extract10,435 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  TypeScriptで型安全なstyleを記述し、build時に静的CSSへ変換する

  TypeScript
• PurgeCSS8,050 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  content fileをscanして実際に参照されるselectorだけを残し、unused CSSを削減する

  TypeScript