Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Schepp/CSS-Filters-Polyfill
This polyfill takes the official CSS filters syntax and translates it to the different equivalent techniques that the browsers know for those effects
https://github.com/Schepp/CSS-Filters-Polyfill
Last synced: about 2 months ago
JSON representation
This polyfill takes the official CSS filters syntax and translates it to the different equivalent techniques that the browsers know for those effects
- Host: GitHub
- URL: https://github.com/Schepp/CSS-Filters-Polyfill
- Owner: Schepp
- License: mit
- Created: 2012-08-16T06:30:56.000Z (about 12 years ago)
- Default Branch: gh-pages
- Last Pushed: 2018-11-20T17:33:50.000Z (almost 6 years ago)
- Last Synced: 2024-07-28T11:08:35.022Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 294 KB
- Stars: 760
- Watchers: 47
- Forks: 66
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
Polyfilter - a CSS Filters Polyfill
===================================
This 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:
* Prefixing for WebKit/Blink-based browsers
* Translating into SVG-filters for Firefox
* Translating into DirectX-filters for IE 6-9
For instance, this allows you to assign a property like
`filter: blur(10px);`
in your stylesheets and the polyfill will take care that it works in as many browsers as possible.
## Supported Filters
* grayscale*
* sepia*
* blur
* invert*
* brightness
* drop-shadow
Have a look at [this overview](http://schepp.github.io/CSS-Filters-Polyfill/examples/static-vs-animated/static.html).
\* _the IEs only support 0% or 100% values_
## Supported Browsers
Currently the polyfill is able to support
* Chrome 20+ (brightness filter 28+),
* Opera 15+
* Safari 6+,
* Yandex 1+,
* Firefox 4+,
* IE 6 - 9 on desktop (IE 6 & 7 slightly degraded),
and
* iOS 6+ Safari/Chrome/Webview
* Chrome 28+ on Android,
* Opera Mobile 14+,
* Blackberry Browser 10+,
* Firefox 4+ on Mobile,
* IE on Windows Phone 7, which just supports grayscale.
Also have a look at [http://caniuse.com/css-filters](http://caniuse.com/css-filters)
## Not supported Browsers
* IE 10+,
* older Presto-based Operas,
* Opera Mini,
* Android browser
### A word regarding IE 10+
Why 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.
Altough they did introduce SVG filters sadly those are limited to a usage inside SVGs. They cannot be applied to HTML-elements.
Even 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+ :(
### And what about those Presto-based Opera?
Older Operas with Presto engine are not supported, as they offer none of the hooks I used.
## Setup
First create a `` 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:
```html
<script>
var polyfilter_scriptpath = '/css-filters-polyfill/lib/';
```
This is important both for the old IEs and the web worker script.
Should 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:
```html
var polyfilter_scriptpath = '/css-filters-polyfill/lib/';
var polyfilter_skip_stylesheets = true;
```
Then you link `cssParser.js` and `css-filters-polyfill.js` from the polyfill library.
```html
```
In 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 `