{"id":18389580,"url":"https://github.com/anseki/cssprefix","last_synced_at":"2025-12-12T04:22:32.239Z","repository":{"id":20417740,"uuid":"23694126","full_name":"anseki/cssprefix","owner":"anseki","description":"CSS Prefixer for JavaScript code. The simple library to get vendor-prefixed name (e.g. `webkitFlex`) and vendor-prefixed value (e.g. `-moz-inline-grid`) of CSS property. This is not pre-compiler for style-sheet, this is used to handle those in JavaScript code.","archived":false,"fork":false,"pushed_at":"2025-02-22T03:02:37.000Z","size":314,"stargazers_count":18,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-22T11:45:04.327Z","etag":null,"topics":["css","css-prefix","javascript","prefixer","property","value","vendor-prefix"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/anseki.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}},"created_at":"2014-09-05T07:25:12.000Z","updated_at":"2025-02-22T03:01:31.000Z","dependencies_parsed_at":"2023-01-13T20:58:03.618Z","dependency_job_id":null,"html_url":"https://github.com/anseki/cssprefix","commit_stats":null,"previous_names":["anseki/css-prefix"],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fcssprefix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fcssprefix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fcssprefix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fcssprefix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anseki","download_url":"https://codeload.github.com/anseki/cssprefix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247583508,"owners_count":20962046,"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":["css","css-prefix","javascript","prefixer","property","value","vendor-prefix"],"created_at":"2024-11-06T01:43:48.992Z","updated_at":"2025-12-12T04:22:32.180Z","avatar_url":"https://github.com/anseki.png","language":"JavaScript","readme":"# CSSPrefix\n\n[![npm](https://img.shields.io/npm/v/cssprefix.svg)](https://www.npmjs.com/package/cssprefix) [![GitHub issues](https://img.shields.io/github/issues/anseki/cssprefix.svg)](https://github.com/anseki/cssprefix/issues) [![dependencies](https://img.shields.io/badge/dependencies-No%20dependency-brightgreen.svg)](package.json) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\nCSS Prefixer for JavaScript code.\n\nThe simple library to get vendor-prefixed name (e.g. `webkitFlex`) and vendor-prefixed value (e.g. `-moz-inline-grid`) of CSS property.  \nThis is not pre-compiler for style-sheet, this is used to handle those in JavaScript code.\n\n## Usage\n\nLoad CSSPrefix into your web page.\n\n```html\n\u003cscript src=\"cssprefix.min.js\"\u003e\u003c/script\u003e\n```\n\n## Methods\n\n### `CSSPrefix.getName`\n\n```js\nprefixedName = CSSPrefix.getName(name)\n```\n\nReturn a vendor-prefixed name of CSS property, or an original name that doesn't require vendor-prefix. If nothing was found, return an `undefined`.\n\nFor example:\n\n```js\nprefixedName = CSSPrefix.getName('text-emphasis'); // 'textEmphasis' also is accepted\nconsole.log(prefixedName);\n// -\u003e \"webkitTextEmphasis\" on Chrome\n// -\u003e \"textEmphasis\" on Firefox\n\nprefixedName = CSSPrefix.getName('column-count'); // 'columnCount' also is accepted\nconsole.log(prefixedName);\n// -\u003e \"columnCount\" on Chrome\n// -\u003e \"MozColumnCount\" on Firefox\n```\n\n### `CSSPrefix.getValue`\n\n```js\nprefixedValue = CSSPrefix.getValue(name, value)\n```\n\nReturn a vendor-prefixed value of CSS property, or an original value that doesn't require vendor-prefix. If `value` is an Array that includes multiple values, try it with each value until any one of them is found. If nothing was found, return an `undefined`.  \n`name` can be an original name even if it requires vendor-prefix.\n\nFor example:\n\n```js\nprefixedValue = CSSPrefix.getValue('cursor', 'grab');\nconsole.log(prefixedValue);\n// -\u003e \"-webkit-grab\" on Chrome\n// -\u003e \"grab\" on Firefox\n\nprefixedValue = CSSPrefix.getValue('display', ['inline-grid', 'block']);\nconsole.log(prefixedValue);\n// -\u003e \"block\" on Chrome\n// -\u003e \"-moz-inline-grid\" on Firefox\n```\n\n## Differences from jQuery\n\njQuery also can find the vendor-prefixed name. But it can't find the vendor-prefixed **value**. And your code can't get the vendor-prefixed name that jQuery found.  \nAnd jQuery doesn't have cache. That affects performance.\n\n![sample](benchmark.png)\n\n*This is older version.*\n\nReported by [Benchmark.js](http://benchmarkjs.com/).  \nTest Code:\n\n```js\nvar elmJq = $('#elm4jquery'),\n  elmCp = document.getElementById('elm4cssprefix');\n\n// jQuery name\nfunction jqName() {\n  elmJq.css('column-width', '5px');\n  elmJq.css('column-width', '10px');\n}\n\n// CSSPrefix name\nfunction cpName() {\n  elmCp.style[CSSPrefix.getName('column-width')] = '5px';\n  elmCp.style[CSSPrefix.getName('column-width')] = '10px';\n}\n\n// jQuery value\nfunction jqValue() {\n  // jQuery can't find vendor-prefixed value.\n  elmJq.css('cursor', 'grab,-webkit-grab');\n  elmJq.css('cursor', 'grabbing,-webkit-grabbing');\n}\n\n// CSSPrefix value\nfunction cpValue() {\n  elmCp.style[CSSPrefix.getName('cursor')] = CSSPrefix.getValue('cursor', 'grab');\n  elmCp.style[CSSPrefix.getName('cursor')] = CSSPrefix.getValue('cursor', 'grabbing');\n}\n```\n\n## Breaking Changes\n\n### v2.0\n\n- `CSSPrefix.getProp` and `CSSPrefix.setValue` were removed, then `CSSPrefix.getName` and `CSSPrefix.getValue` were added. The `CSSPrefix.getValue` doesn't set a value.\n- Both `CSSPrefix.getName` and `CSSPrefix.getValue` don't require an element.\n- Both `CSSPrefix.getName` and `CSSPrefix.getValue` return `undefined` if nothing was found. Older methods returned an empty string but some CSS properties accept empty string, and that couldn't differentiate \"accepted empty string\" and \"value not found\".\n\n### v1.0\n\n- Since v1.0, the repository name and its package name were unified, and the `css-prefix.min.js` file also was renamed to `cssprefix.min.js`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Fcssprefix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanseki%2Fcssprefix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Fcssprefix/lists"}