From c5a5384e846f242e901e859fe600d695d8990a9a Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sat, 14 Oct 2023 15:20:49 +0800 Subject: legacy browser support via plugins from postcss --- node_modules/postcss-will-change/README.md | 69 ++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 node_modules/postcss-will-change/README.md (limited to 'node_modules/postcss-will-change/README.md') diff --git a/node_modules/postcss-will-change/README.md b/node_modules/postcss-will-change/README.md new file mode 100644 index 00000000..515f9a55 --- /dev/null +++ b/node_modules/postcss-will-change/README.md @@ -0,0 +1,69 @@ +# PostCSS Will Change + + + +[PostCSS] plugin to insert 3D hack before [will-change] property. + +This plugin uses `backface-visibility` to force the browser to create +a new layer, without overriding existing `backface-visibility` properties. +This 3D CSS hack is commonly done with `transform: translateZ(0)`, +but `backface-visibility` is used here to avoid overriding +the more popular `transform` property. + +These hacks are required for browsers that do not support `will-change`. + +Use this plugin only before [Autoprefixer]. It will add vendor prefixes +to `backface-visibility`. + +[Autoprefixer]: https://github.com/postcss/autoprefixer +[will-change]: https://dev.opera.com/articles/css-will-change-property/ +[PostCSS]: https://github.com/postcss/postcss + +```css +.foo { + will-change: transform; +} +``` + +```css +.foo { + backface-visibility: hidden; + will-change: transform; +} +``` + + + Sponsored by Evil Martians + + + +## Usage + +**Step 1:** Install plugin: + +```sh +npm install --save-dev postcss postcss-will-change +``` + +**Step 2:** Check you project for existed PostCSS config: `postcss.config.js` +in the project root, `"postcss"` section in `package.json` +or `postcss` in bundle config. + +If you do not use PostCSS, add it according to [official docs] +and set this plugin in settings. + +**Step 3:** Add the plugin to plugins list: + +```diff +module.exports = { + plugins: [ ++ require('postcss-will-change'), + require('autoprefixer') + ] +} +``` + +[official docs]: https://github.com/postcss/postcss#usage -- cgit v1.2.3