{"id":20235709,"url":"https://github.com/browserslist/browserslist-example","last_synced_at":"2025-09-04T00:04:43.092Z","repository":{"id":47413361,"uuid":"91978223","full_name":"browserslist/browserslist-example","owner":"browserslist","description":"What tools and how uses Browserslist","archived":false,"fork":false,"pushed_at":"2025-07-30T18:10:07.000Z","size":428,"stargazers_count":206,"open_issues_count":0,"forks_count":22,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-09-04T00:02:13.644Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/ai/browserslist","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/browserslist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-05-21T18:19:05.000Z","updated_at":"2025-08-27T13:18:50.000Z","dependencies_parsed_at":"2024-12-26T19:07:31.322Z","dependency_job_id":"b707a8ee-5da4-43cd-aee4-062c3fec2501","html_url":"https://github.com/browserslist/browserslist-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/browserslist/browserslist-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browserslist%2Fbrowserslist-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browserslist%2Fbrowserslist-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browserslist%2Fbrowserslist-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browserslist%2Fbrowserslist-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/browserslist","download_url":"https://codeload.github.com/browserslist/browserslist-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browserslist%2Fbrowserslist-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273529550,"owners_count":25121828,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T08:17:23.170Z","updated_at":"2025-09-04T00:04:42.996Z","avatar_url":"https://github.com/browserslist.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Browserslist Example\n\n\u003cimg align=\"right\" width=\"120\" height=\"120\"\n     src=\"https://browserslist.github.io/browserslist/logo.svg\"\n     alt=\"Browserslist logo by Anton Lovchikov\"\u003e\n\n[Browserslist] is a config to share target browsers\nbetween different front-end tools.\n\nThis repository shows how Browserslist is used by:\n\n* **[developers](#developers)**\n* **[Autoprefixer](#autoprefixer)**\n* **[Babel](#babel)**\n* **[postcss-preset-env](#postcss-preset-env)**\n* **[postcss-normalize](#postcss-normalize)**\n* **[ESLint](#eslint)**\n* **[Stylelint](#stylelint)**\n\nSee [`package.json`] for config example.\n\n\u003ca href=\"https://evilmartians.com/?utm_source=browserslist-example\"\u003e\n  \u003cimg src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\"\n       alt=\"Sponsored by Evil Martians\" width=\"236\" height=\"54\"\u003e\n\u003c/a\u003e\n\n[`package.json`]: ./package.json\n[Browserslist]:   https://github.com/browserslist/browserslist\n\n## How to Add Browserslist to Your Project\n\nBrowserslist config can be defined in `.browserslistrc` file\nor in `browserslist` section of `package.json`.\n\nIn this example, we defined target browsers in `package.json`\nto reduce config files in project dir:\n\n```diff\n{\n  \"private\": true,\n+ \"browserslist\": [\n+   \"Edge 16\"\n+ ],\n  \"scripts\": {\n  }\n}\n```\n\nBrowserslist config is a list of browsers queries\n(like `last 2 Chrome versions`). You can find [queries list]\nin Browserslist docs.\n\n[queries list]: https://github.com/ai/browserslist#queries\n\n\n## Who Uses Browserslist\n\n### Developers\n\nYes, Browserslist is useful not only for tools.\nBrowserslist is a standard place to find project’s target browsers.\n\nWith Browserslist config new developers will not bother you\nwith questions like “What browsers do we support?”\nor “Do we support IE 11”? They will find an answer in the config.\n\nAlso, Browserslist has CLI tool to show what browser versions\nis selected by project’s Browserslist queries:\n\n```sh\n$ npx browserslist\nedge 16\n```\n\n\n### Autoprefixer\n\nAutoprefixer is a [PostCSS] plugin to add vendor prefixes to CSS.\nIt adds only actual prefixes according to Browserslist’s target browsers\nand [Can I Use] data.\n\nLet’s install it:\n\n```sh\n$ npm install postcss-cli autoprefixer\n```\n\nand add to `package.json`:\n\n```diff\n  \"browserslist\": [\n    \"Edge 16\"\n  ],\n+ \"postcss\": {\n+   \"plugins\": {\n+     \"autoprefixer\": {}\n+   }\n+ },\n  \"scripts\": {\n+   \"build:css\": \"postcss src/app.css -o build/app.css\",\n+   \"build\": \"npm run build:css\"\n  }\n```\n\nNow we can forget about prefixes and write clean code in [`src/app.css`]:\n\n```css\nbody {\n  user-select: none\n}\n```\n\nAutoprefixer will compile it to:\n\n```css\nbody {\n  -ms-user-select: none;\n      user-select: none\n}\n```\n\nAs you can see, Autoprefixer added only `-ms-` prefixes because\nBrowserslist told that we support only Edge 16.\n\n[`src/app.css`]: ./src/app.css\n[Can I Use]:     http://caniuse.com/\n[PostCSS]:       http://postcss.org/\n\n\n### Babel\n\n[Babel] is a tool to compile JS files. The most popular way to use it\nis to compile future JS syntaxes to JS supported by target browsers.\nFrom Babel 7.0 `@babel/preset-env` loads target browsers\nfrom the same Browserslist config.\n\nLet’s install it:\n\n```sh\n$ npm install @babel/core @babel/cli @babel/preset-env\n```\n\nand add to `package.json`:\n\n```diff\n  \"postcss\": {\n    \"plugins\": {\n      \"autoprefixer\": {}\n    }\n  },\n+ \"babel\": {\n+   \"presets\": [\n+     [\n+       \"@babel/preset-env\"\n+     ]\n+   ]\n+ },\n  \"scripts\": {\n    \"build:css\": \"postcss src/app.css -o build/app.css\",\n+   \"build:js\": \"babel src/app.js -o dist/app.js\",\n-   \"build\": \"npm run build:css\"\n+   \"build\": \"npm run build:css \u0026\u0026 npm run build:js\"\n  }\n```\n\nNow we can write future JS syntax in [`src/app.js`]:\n\n```js\nconst array = [1, 2, 3];\nconst [first, second] = array;\n```\n\nBabel will compile it for Edge 16:\n\n```js\nconst array = [1, 2, 3];\nconst first = array[0],\n      second = array[1];\n```\n\nNote, that Babel doesn’t change `const` since Edge 16 supports it.\n\n[`src/app.js`]: ./src/app.js\n[Babel]:        https://babeljs.io/\n\n\n### PostCSS Preset Env\n\n[`postcss-preset-env`] is a “Babel for CSS.” It compiles future CSS syntax\nto CSS supported by target browsers. It is similar to cssnext, but more accurate\nwith CSS spec and has `stage` option.\n\nLet’s install it:\n\n```sh\n$ npm install postcss-preset-env\n```\n\nand add to `package.json`:\n\n```diff\n  \"postcss\": {\n    \"plugins\": {\n+     \"postcss-preset-env\": {},\n      \"autoprefixer\": {}\n    }\n  },\n```\n\nNow we can write future CSS in [`src/app.css`]:\n\n```css\n.popup {\n  --text-color: black;\n  color: var(--text-color);\n  background-color: #bbb9;\n}\n```\n\nAnd `postcss-preset-env` will compile it for Edge 16:\n\n```css\n.popup {\n  --text-color: black;\n  color: var(--text-color);\n  background-color: rgba(187, 187, 187, 0.6);\n}\n```\n\nNote, plugin replaced `#bbb9` to `rgba()`, but didn’t replace CSS Custom\nProperties, because Edge 16 supports them.\n\n[`postcss-preset-env`]: https://github.com/jonathantneal/postcss-preset-env\n[`src/app.css`]: ./src/app.css\n\n\n### PostCSS Normalize\n\nBrowsers have different default styles. To have same styles\nin all browsers we need to “normalize” these differences.\n\n[`postcss-normalize`] is a fork of popular Normalize.css with 2 differents:\nit doesn’t have opinionated styles, and it adds only necessary fixes according\nBrowserslist target browsers.\n\nLet’s install it;\n\n```sh\n$ npm install postcss-normalize\n```\n\nand add to `package.json`:\n\n```diff\n  \"postcss\": {\n    \"plugins\": {\n+     \"postcss-normalize\": {},\n      \"postcss-preset-env\": {},\n      \"autoprefixer\": {}\n    }\n  },\n```\n\nNow plugin will replace `@import-normalize;` to CSS which normalize\nEdge 16 styles. You can check output in [`dist/app.css`].\n\nNote that inserted CSS is smaller than standard Normalize.css.\n`postcss-normalize` added rules necessary only for Edge 16.\n\n[`postcss-normalize`]: https://github.com/jonathantneal/postcss-normalize\n[`dist/app.css`]:      ./dist/app.css\n\n\n### ESLint\n\n[ESLint] finds mistakes in your JS. [`eslint-plugin-compat`]\nis a plugin to ESLint to warn that JS will not work in all target browsers.\n\nLet’s install it:\n\n```sh\n$ npm install eslint eslint-plugin-compat\n```\n\nand add to `package.json`:\n\n```diff\n+ \"eslintConfig\": {\n+   \"parserOptions\": {\n+     \"ecmaVersion\": 6\n+   },\n+   \"plugins\": [\n+     \"compat\"\n+   ],\n+   \"rules\": {\n+     \"compat/compat\": \"warn\"\n+   }\n+ },\n  \"scripts\": {\n    \"build:css\": \"postcss src/app.css -o dist/app.css\",\n    \"build:js\": \"babel src/app.js -o dist/app.js\",\n+   \"lint:js\": \"eslint src/*.js\",\n+   \"test\": \"npm run lint:js\",\n    \"build\": \"npm run build:css \u0026\u0026 npm run build:js\"\n  },\n```\n\nNow, if you will write `navigator.serviceWorker`, ESLint will warn\nyou that Edge 16 doesn’t support Service Workers:\n\n```\n$ npm test\n\n\u003e eslint src/*.js\n\n/browserslist-example/src/app.js\n  3:1  warning  navigator.serviceWorker() is not supported in Edge 16  compat/compat\n\n✖ 1 problem (0 errors, 1 warning)\n```\n\n[`eslint-plugin-compat`]: https://github.com/amilajack/eslint-plugin-compat\n[ESLint]:                 https://eslint.org\n\n\n### Stylelint\n\n[Stylelint] is a “ESLint for CSS” to warn you about mistakes in CSS.\nIt also has [`stylelint-no-unsupported-browser-features`] plugin\nto warn you when CSS property will not work in all target browsers.\n\nLet’s install it:\n\n```sh\n$ npm install stylelint stylelint-no-unsupported-browser-features\n```\n\nand add to `package.json`:\n\n```diff\n+ \"stylelint\": {\n+   \"plugins\": [\n+     \"stylelint-no-unsupported-browser-features\"\n+   ],\n+   \"rules\": {\n+     \"plugin/no-unsupported-browser-features\": true\n+   },\n+   \"defaultSeverity\": \"warning\"\n+ },\n  \"scripts\": {\n    \"build:css\": \"postcss src/app.css -o dist/app.css\",\n    \"build:js\": \"babel src/app.js -o dist/app.js\",\n+   \"lint:css\": \"stylelint src/*.css\",\n    \"lint:js\": \"eslint src/*.js\",\n-   \"test\": \"npm run lint:js\",\n+   \"test\": \"npm run lint:js \u0026\u0026 npm run lint:css\",\n    \"build\": \"npm run build:css \u0026\u0026 npm run build:js\"\n  },\n```\n\nNow, if you will write `will-change: transform` in your CSS, Stylelint will warn\nyou that Edge 16 doesn’t support this property:\n\n```\n$ npm test\n\n\u003e stylelint src/*.css\n\nsrc/app.css\n 14:3  ⚠  Unexpected browser feature     plugin/no-unsupported-browser-features\n          \"will-change\" is not                                                 \n          supported by Edge 16\n```\n\n[`stylelint-no-unsupported-browser-features`]: https://github.com/ismay/stylelint-no-unsupported-browser-features\n[Stylelint]:                                   https://stylelint.io\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrowserslist%2Fbrowserslist-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrowserslist%2Fbrowserslist-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrowserslist%2Fbrowserslist-example/lists"}