{"id":13564444,"url":"https://github.com/Schepp/CSS-Filters-Polyfill","last_synced_at":"2025-04-03T21:30:55.804Z","repository":{"id":4303522,"uuid":"5435483","full_name":"Schepp/CSS-Filters-Polyfill","owner":"Schepp","description":"This polyfill takes the official CSS filters syntax and translates it to the different equivalent techniques that the browsers know for those effects","archived":false,"fork":false,"pushed_at":"2018-11-20T17:33:50.000Z","size":301,"stargazers_count":758,"open_issues_count":5,"forks_count":63,"subscribers_count":45,"default_branch":"gh-pages","last_synced_at":"2025-04-01T22:41:12.226Z","etag":null,"topics":[],"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/Schepp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-08-16T06:30:56.000Z","updated_at":"2025-02-24T08:24:57.000Z","dependencies_parsed_at":"2022-08-30T16:11:29.902Z","dependency_job_id":null,"html_url":"https://github.com/Schepp/CSS-Filters-Polyfill","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Schepp%2FCSS-Filters-Polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Schepp%2FCSS-Filters-Polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Schepp%2FCSS-Filters-Polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Schepp%2FCSS-Filters-Polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Schepp","download_url":"https://codeload.github.com/Schepp/CSS-Filters-Polyfill/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247083001,"owners_count":20880758,"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":[],"created_at":"2024-08-01T13:01:31.468Z","updated_at":"2025-04-03T21:30:51.093Z","avatar_url":"https://github.com/Schepp.png","language":"JavaScript","readme":"Polyfilter - a CSS Filters Polyfill\n===================================\n\nThis polyfill takes the official CSS Filter Effects syntax, which spec you can find over [here](http://www.w3.org/TR/filter-effects/#FilterProperty) and translates it to the different equivalent techniques that the browsers know for those effects:\n\n* Prefixing for WebKit/Blink-based browsers\n* Translating into SVG-filters for Firefox\n* Translating into DirectX-filters for IE 6-9\n\nFor instance, this allows you to assign a property like \n\n`filter: blur(10px);`\n\nin your stylesheets and the polyfill will take care that it works in as many browsers as possible.\n\n## Supported Filters\n\n* grayscale*\n* sepia*\n* blur\n* invert*\n* brightness\n* drop-shadow\n\nHave a look at [this overview](http://schepp.github.io/CSS-Filters-Polyfill/examples/static-vs-animated/static.html).\n\n\\* _the IEs only support 0% or 100% values_\n\n## Supported Browsers\n\nCurrently the polyfill is able to support\n\n* Chrome 20+ (brightness filter 28+), \n* Opera 15+ \n* Safari 6+, \n* Yandex 1+,\n* Firefox 4+, \n* IE 6 - 9 on desktop (IE 6 \u0026 7 slightly degraded), \n\nand \n\n* iOS 6+ Safari/Chrome/Webview\n* Chrome 28+ on Android, \n* Opera Mobile 14+,\n* Blackberry Browser 10+, \n* Firefox 4+ on Mobile,\n* IE on Windows Phone 7, which just supports grayscale.\n\nAlso have a look at [http://caniuse.com/css-filters](http://caniuse.com/css-filters)\n\n## Not supported Browsers\n\n* IE 10+,\n* older Presto-based Operas,\n* Opera Mini,\n* Android browser\n\n### A word regarding IE 10+\n\nWhy is IE 6 - 9 supported, but not IE 10 or higher? Well, since Microsoft decided to switch sides and to now follow standards, they killed their old proprietary filters beginning with IE 10 which I rely on for emulation. \n\nAltough they did introduce SVG filters sadly those are limited to a usage inside SVGs. They cannot be applied to HTML-elements. \n\nEven triggering legacy mode does not help any more. So this is why we are left at the end with no hook/support at all in IE10+ :(\n\n### And what about those Presto-based Opera?\n\nOlder Operas with Presto engine are not supported, as they offer none of the hooks I used.\n\n## Setup\n\nFirst create a `\u003cscript\u003e` element in which you define the **absolute(!)** path to the polyfill library (the stuff in the /lib/ subfolder) in a variable named `polyfilter_scriptpath`, like so:  \n\n```html\n\u003cscript\u003e  \n\tvar polyfilter_scriptpath = '/css-filters-polyfill/lib/';  \n\u003c/script\u003e\n```\n\nThis is important both for the old IEs and the web worker script.  \n\nShould you not want the document stylesheets to not get automatically parsed, like when your plan is to apply filters only via JavaScript, then you can additionally set a `polyfilter_skip_stylesheets` switch:\n\n```html\n\u003cscript\u003e  \n\tvar polyfilter_scriptpath = '/css-filters-polyfill/lib/';  \n\tvar polyfilter_skip_stylesheets = true;  \n\u003c/script\u003e\n```\n\nThen you link `cssParser.js` and `css-filters-polyfill.js` from the polyfill library. \n\n```html\n\u003cscript src=\"/css-filters-polyfill/lib/cssParser.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/css-filters-polyfill/lib/css-filters-polyfill.js\"\u003e\u003c/script\u003e\n```\n\nIn an ideal world you should minify and concatenate both of them together with your other JavaScript. If you don't want your page to get blocked by script-loading you put the scripts way down before the closing `\u003c/body\u003e`. This might lead to some flickering of the filter effects during loading. If you can't live with the short flickering, put the scripts in the `\u003chead\u003e` of the page. Then it'll be gone, but your page will load slower. You decide.\n\n## Usage\n\n### Declarative assignment\n\nThis polyfill supports filter declarations in embedded (`\u003cstyle\u003e`) and external (`\u003clink rel=\"stylesheet\"\u003e`) stylesheets. It does not support inline-styles (i.e. style-attributes).\n\nYou define a filter by using the unprefixed W3C syntax, e.g.: \n\n```css\n.element{\n\tfilter: blur(10px);\n}\n```\n\nAnd you can even assign two filters at once, e.g.\n\n```css\n.element{\n\tfilter: sepia(1) blur(10px);\n}\n```\n\n### Programmatic assignment\n\nIn addition the polyfill also extends the JavaScript CSSStyleDeclaration object, so that you can assign filter styles on the fly as you are used to with CSS. But instead of exposing a `element.style.filter` property as one would think, you instead need to address `element.style.polyfilter`, e.g.:\n\n```javascript\nelement.style.polyfilter = 'blur(10px)';\n```\n\nor via jQuery:\n\n```javascript\n$(element).css('polyfilter','blur(10px)');\n```\nAnd, again, you can assign two filters at once, e.g.\n\n```javascript\nelement.style.polyfilter = 'sepia(1) blur(10px)';\n```\n\n_Note: This does not work for IE 6 \u0026 7. They just ignore any programmatic assignment._\n\n### Animations\n\nLikewise, if you want to animate a filter, then you do this:\n\n```javascript\nvar value = 0,   \n    increment = 1  \n    elem = document.getElementById('filtered');\n\nwindow.setInterval(function(){  \n    value += increment;  \n    elem.style.polyfilter = 'blur(' + value + 'px)';  \n    if(value \u003e= 10 || value \u003c= 0) increment *= -1;  \n},100);\n```\n\n_Note: This again does not work for IE 6 \u0026 7. They just ignore any programmatic assignment._\n\n### Cross Origin Restrictions\n\nIf you practice domain sharding and serve your assets from a different domain than the page you have two options to solve the problem of the poylfill not being allowed to refetch the stylesheets:\n\na) If you use the same domain, just with different subdomains, e.g. www.yourdomain.com + assets.yourdomain.com, then you can set\n```javascript\ndocument.domain = \"yourdomain.com\";\n```\nand you are fine.\n\nb) If you use different domains, then you need to activate HTTP CORS headers (Cross-Origin Resource Sharing) on the machine that hosts the stylesheets. If it is an Apache machine you can add the following to its/an .htaccess in its root:\n\n```\n\u003cIfModule mod_headers.c\u003e\n  \u003cFilesMatch \"\\.css$\"\u003e\n    Header set Access-Control-Allow-Origin \"*\"\n  \u003c/FilesMatch\u003e\n\u003c/IfModule\u003e\n```\n\nOr if you want more security, replace the * with the requesting domain:\n\n```\n\u003cIfModule mod_headers.c\u003e\n  \u003cFilesMatch \"\\.css$\"\u003e\n    Header set Access-Control-Allow-Origin \"requestingdomain.com\"\n  \u003c/FilesMatch\u003e\n\u003c/IfModule\u003e\n``` \n\n### Examples and Howtos\n\nSee [http://schepp.github.io/CSS-Filters-Polyfill/examples/](http://schepp.github.io/CSS-Filters-Polyfill/examples/)\n\n### License\n\nCopyright (c) 2012 - 2013 Christian Schepp Schaefer\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSchepp%2FCSS-Filters-Polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSchepp%2FCSS-Filters-Polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSchepp%2FCSS-Filters-Polyfill/lists"}