{"id":13803132,"url":"https://github.com/nuxodin/ie11CustomProperties","last_synced_at":"2025-05-13T15:32:18.084Z","repository":{"id":46788146,"uuid":"194600479","full_name":"nuxodin/ie11CustomProperties","owner":"nuxodin","description":"CSS variables (Custom Properties) polyfill for IE11","archived":false,"fork":false,"pushed_at":"2023-11-24T13:27:57.000Z","size":246,"stargazers_count":920,"open_issues_count":17,"forks_count":84,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-04-14T08:30:56.934Z","etag":null,"topics":["css-variables","custom-properties","ie11","polyfill"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/nuxodin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":null,"patreon":"tobias_buschor","open_collective":"ie11CustomProperties","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-07-01T04:38:18.000Z","updated_at":"2024-04-12T07:11:09.000Z","dependencies_parsed_at":"2023-11-30T00:33:35.906Z","dependency_job_id":"cc2d15f1-52cb-4a98-9244-9b0c3bd27ee6","html_url":"https://github.com/nuxodin/ie11CustomProperties","commit_stats":{"total_commits":271,"total_committers":13,"mean_commits":"20.846153846153847","dds":0.08118081180811809,"last_synced_commit":"febf3137abd6050dd37f89891cde6a7e3d658d52"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxodin%2Fie11CustomProperties","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxodin%2Fie11CustomProperties/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxodin%2Fie11CustomProperties/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxodin%2Fie11CustomProperties/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxodin","download_url":"https://codeload.github.com/nuxodin/ie11CustomProperties/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224987480,"owners_count":17403142,"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-variables","custom-properties","ie11","polyfill"],"created_at":"2024-08-04T01:00:23.200Z","updated_at":"2024-11-18T19:31:19.506Z","avatar_url":"https://github.com/nuxodin.png","language":"HTML","funding_links":["https://patreon.com/tobias_buschor","https://opencollective.com/ie11CustomProperties"],"categories":["HTML","Polyfills"],"sub_categories":["Responsive"],"readme":"\n# CSS Variables Polyfill for IE11\nThe most complete \"Custom Properties polyfill\" for Internet Explorer 11.  \nUsed on about 150'000 [Live Websites](https://publicwww.com/websites/ie11CustomProperties/ \"source\")  \n  \n**[See the demo!](https://rawcdn.githack.com/nuxodin/ie11CustomProperties/6c465d21a8c043a45cba939995bb434966048377/demo.html)**  \n\n## Discontinued\nThe IE11 market share is steadily decreasing. I personally have no need to support IE11 anymore.  \nThat's why I have decided to stop working on this project.\n\n## Features\n- chaining `--bar:var(--foo)`\n- fallback `var(--color, blue)`\n- :focus, :target, :hover\n- handle dynamically added html-content\n- handle dynamically added `\u003cstyle\u003e`, `\u003clink\u003e`-elements\n- js-integration:\n    - `style.setProperty('--x','y')`\n    - `style.getPropertyValue('--x')`\n    - `getComputedStyle(el).getPropertyValue('--inherited')`\n- Houdini’s new API: `CSS.registerProperty({name:'--red', inherit:false, initialValue:'#e33'})` (of course not animatable)\n- style-attributes `\u003cdiv ie-style=\"--foo:bar\"...`\n- cascade works\n- inheritance works\n- `!important` on setters and getters (see limitations)\n- `inherit`, `initial`, `unset` and `revert` keyword for variables\n- SVG support\n- media-queries (redraw on media-changes)\n- transform relative to absolute urls\n- under 4k (min+gzip) and dependency-free\n\n## Usage\nYou only want IE11 to load the polyfill, use this snippet in the head of your html file, it just works:\n```html\n\u003cscript\u003ewindow.MSInputMethodContext \u0026\u0026 document.documentMode \u0026\u0026 document.write('\u003cscript src=\"https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js\"\u003e\u003c\\/script\u003e');\u003c/script\u003e\n```\n\n## Help wanted!\n- Add a ⭐️ this could be my first 1000-stars project! :)\n- Vote for this solution at stackoverflow   \nhttps://stackoverflow.com/a/57000437/4865307 and  \nhttps://stackoverflow.com/a/57000620/4865307\n- Test, report bugs and send pull requests.\n- Tweet about if you like it.\n\n## How it works\nThe script makes use of the fact that IE has minimal custom properties support where properties can be defined and read out with the cascade in mind. This is not possible with properties starting with double dashes.\n`.myEl {-ie-test:'aaa'} // only one dash allowed! \"-\"`\nthen you can read it in IE with javascript:\n`getComputedStyle( querySelector('.myEl') )['-ie-test']`\nIn the raw CSS, it replaces for example `--foo` with `-ie-foo`.\nIt searches for all rules containing variable getters and setter, remembers the affected selectors so future affected Elements can be found in a mutation observer.\nEach affected Element gets a uniq class-attribute and its own style-sheet to draw the Element.\nThese are the steps that the script does:\n1. given the CSS\n```css\nheader { --myColor:red; }\nmain { --myColor:green; }\nli { color:var(--myColor); }\n```\n2. rewritten CSS\n```css\nheader { -ie-myColor:red; }\nmain { -ie-myColor:green; }\nli { -ieHasVar-color:var(-ie-myColor); }\n```\n3. find all affected Elements and get their property-values\n```js\nquerySelectorAll('li').forEach(function(){\n    var color = getComputedStyle(this).getPropertyValue('--myColor');\n    // getPropertyValue is extended to handle custom properties\n    // draw_the_Element()\n})\n```\n3. draw Elements, this leads in separate rules for each Element\n```css\nli.iecp-u1 { color:red; }\nli.iecp-u2 { color:red; }\nli.iecp-u3 { color:green; }\nli.iecp-u4 { color:green; }\n```\n[![custom-properties-ie11.png](https://i.postimg.cc/bryMt02N/custom-properties-ie11.png)](https://postimg.cc/gX7N9ZDf)\n\n\n## Limitations\n#### Styles in element-attributes\nThere is no way to get the raw content of style-attributes in IE11.\nUse `\u003cdiv style=\"--color:blue\" ie-style=\"--color:blue\"\u003e` for this.  \n\n#### Specificity for properties containing \"var()\"\n...is ~~always little~~ higher if vars are not served by root, because each selector gets an additional class-selector\neg. `#header` results in `#header.iecp_u44`\n\n#### @import\nvars in @import is not supported at the moment\n\n#### !important\nThere are problems with !important. I need a minimal, reproducible testcase on https://jsbin.com/ \n\n#### Stylesheets outside the domain\nIf you'd prefer the polyfill to ignore (not run) on a particular stylesheet add the  *iecp-ignore* tag to the link element.\n\n## Tests\n[See the tests](https://rawcdn.githack.com/nuxodin/ie11CustomProperties/6c465d21a8c043a45cba939995bb434966048377/tests.html)  \nPRs welcome\n\n## More Polyfills to love\nhttps://github.com/nuxodin/lazyfill\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxodin%2Fie11CustomProperties","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxodin%2Fie11CustomProperties","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxodin%2Fie11CustomProperties/lists"}