{"id":15423184,"url":"https://github.com/5t3ph/css-browser-support","last_synced_at":"2025-04-06T03:07:20.085Z","repository":{"id":41528804,"uuid":"509184224","full_name":"5t3ph/css-browser-support","owner":"5t3ph","description":"Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.","archived":false,"fork":false,"pushed_at":"2024-10-03T23:48:33.000Z","size":28,"stargazers_count":69,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T02:07:28.817Z","etag":null,"topics":["browser-support","caniuse","caniuse-data","css","css-browser-support"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/css-browser-support","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/5t3ph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-06-30T18:03:58.000Z","updated_at":"2025-02-02T18:14:19.000Z","dependencies_parsed_at":"2024-06-20T23:23:02.967Z","dependency_job_id":"caf733a2-2749-4e78-a50f-e883ebe5542d","html_url":"https://github.com/5t3ph/css-browser-support","commit_stats":{"total_commits":22,"total_committers":5,"mean_commits":4.4,"dds":"0.18181818181818177","last_synced_commit":"469ebfc1dcc778b25ad02725fa3160fbbd7c76a0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Fcss-browser-support","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Fcss-browser-support/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Fcss-browser-support/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Fcss-browser-support/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5t3ph","download_url":"https://codeload.github.com/5t3ph/css-browser-support/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427006,"owners_count":20937201,"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","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":["browser-support","caniuse","caniuse-data","css","css-browser-support"],"created_at":"2024-10-01T17:40:43.663Z","updated_at":"2025-04-06T03:07:20.061Z","avatar_url":"https://github.com/5t3ph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-browser-support\n\n\u003e Query for **CSS browser support data**, combined from caniuse and MDN, including version support started and global support percentages.\n\n## Usage\n\nInstall the package:\n\n```bash\nnpm i --save-dev css-browser-support\n```\n\nThen import it into your project:\n\n```js\nconst { cssBrowserSupport } = require(\"css-browser-support\");\n```\n\nAnd call it by passing a string or an array of strings containing the CSS features you'd like to query support:\n\n```js\ncssBrowserSupport([\n  \"aspect-ratio\",\n  \"margin-inline\",\n  \"border-radius\",\n  \":nth-last-child\",\n  \"@layer\",\n  \"gap\",\n]);\n```\n\nReturns an object that includes each browser for which support is available, example for `aspect-ratio`:\n\n```js\n{\n  'aspect-ratio': {\n    chrome: {\n      sinceVersion: '88',\n      flagged: true,\n      globalSupport: 22.46,\n      browserTitle: 'Chrome'\n    },\n    chrome_android: {\n      sinceVersion: '88',\n      flagged: false,\n      globalSupport: 41.34,\n      browserTitle: 'Chrome Android'\n    },\n    edge: {\n      sinceVersion: '88',\n      flagged: false,\n      globalSupport: 3.88,\n      browserTitle: 'Edge'\n    },\n    // ... continued for all browsers\n    globalSupport: 86.49\n  }\n}\n```\n\n## Supported CSS features\n\nThe API is intended to work for passing features as you would write them in CSS. As such, a few things will not be available if they exist on MDN under an expanded name. For example, `\u003e` would be available as `child`.\n\nAdditionally, some features are nested and may be missed by the API. Exceptions are grid features (ex. `repeat()`), and color types (ex. `color-contrast()`) which have been explicitly included.\n\nReview the data from MDN:\n\n- [at-rules](https://github.com/mdn/browser-compat-data/tree/main/css/at-rules)\n- [properties](https://github.com/mdn/browser-compat-data/tree/main/css/properties)\n- [selectors](https://github.com/mdn/browser-compat-data/tree/main/css/selectors)\n- [types](https://github.com/mdn/browser-compat-data/tree/main/css/types)\n\n### Special case: `gap`\n\nSince `gap` is a popular feature known to have been implemented for both flexbox and grid at different times, the API splits a request for `gap` to return support for both implementations.\n\nIn your implementation, you'll want to check for an input of `gap` and then update to handle for the two returned keys of `gap - flexbox` and `gap - grid`.\n\nExample:\n\n```js\nif (queries.includes(\"gap\")) {\n  queries.splice(queries.indexOf(\"gap\"), 1);\n  queries.push(\"gap - flexbox\");\n  queries.push(\"gap - grid\");\n}\n```\n\n## Implementing the data\n\n- if your implementation accepts properties with values, ex `margin-inline: auto`, you are responsible for removing values before passing the property to the API\n- due to the data returned from MDN, characters like `:` are stripped from selectors and pseudo-elements, and `@` is removed from at-rule, so for example `@layer` will be found in returned data as `layer`\n\nFor an example on using this data, see my Eleventy plugin implementation: **@11tyrocks/eleventy-plugin-css-browser-support**\n\n- [npm](https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-css-browser-support)\n- [GitHub repo](https://github.com/5t3ph/eleventy-plugin-css-browser-support)\n\n## Browser list\n\nYou can also import the full browser list as `BROWSERS`:\n\n```js\nconst { cssBrowserSupport, BROWSERS } = require(\"css-browser-support\");\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eView full browser list\u003c/summary\u003e\n\nThe list is as follows:\n\n```js\n[\n  \"chrome\",\n  \"chrome_android\",\n  \"edge\",\n  \"firefox\",\n  \"firefox_android\",\n  \"ie\",\n  \"opera\",\n  \"safari\",\n  \"safari_ios\",\n  \"samsunginternet_android\",\n];\n```\n\n\u003c/details\u003e\n\n## Credits\n\nTwo packages are being used to obtain support data:\n\n- [@mdn/browser-compat-data](https://www.npmjs.com/package/@mdn/browser-compat-data)\n- [caniuse-lite](https://www.npmjs.com/package/caniuse-lite)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2Fcss-browser-support","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5t3ph%2Fcss-browser-support","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2Fcss-browser-support/lists"}