15 CSS & Javascript Polyfills

Have you ever wanted to try experimental JavaScript & CSS features before they’re available in the browser? What about use a feature that wouldn’t otherwise be supported by a specific browser? Soon browsers will support them; until then, use a polyfill.



CSS conic-gradient

Conic gradients are awesome, but browsers haven’t realized yet. This polyfill lets you experiment with them now

conic-polyfill-1

Polyfilter

This polyfill takes the official CSS filters syntax and translates it to the different equivalent techniques that the browsers know for those effects.

css-filter-2

CSS Shapes Polyfill

The shapes polyfill is a JavaScript implementation of the CSS Shapes specification. You can use the polyfill to approximate CSS Shapes behavior in browsers that do not support the feature. By default, the polyfill will not run when a native shapes implementation is available.

shape-polyfill-4

Grid Style Sheets

GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.

gss-3

Placeholder Polyfill with Password Support

The problem with placeholders is that the feature is not supported in IE 9 and below. This is a huge pain if you use placeholders as labels…

placeholder-5

Picturefill

A responsive image polyfill for picture, srcset, sizes, and more.

picturefill-6

Autoprefixer

Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.

autoprefixer-7

Fetch

A window.fetch JavaScript polyfill.

fetch-8

Vminpoly

A polyfill for CSS units vw, vh & vmin and now some media queries to boot.

vmin-9

REM unit polyfill

The polyfill will test any browser for REM support and patch it up if needed, although we all know IE8 and below is where the issue lies. Once lack of support is determined, it reads all the link tags for stylesheets and finds selectors that have rules using the REM unit. It then recalculates those rules to PX and writes them in the head to override in the cascade. Magic.

rem-unit-10

FastClick

FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

fastclick-11

PEP

Pointer Events Polyfill: a unified event system for the web platform.

pointer-12

SVG for Everybody

Use external SVG spritemaps today. SVG for Everybody minds the gap between SVG-capable browsers and those which do not support external SVG spritemaps.

svg-13

Document register element

document-register-element.js is a stand alone polyfill which aim is to support as many browsers as possible, without requiring extra dependencies at all, and in about 3KB minified and gzipped.

register-elm-14

Placeholders

Placeholders.js is a JavaScript polyfill for the HTML5 placeholder attribute. It’s lightweight, has zero dependencies and works in pretty much any browser you can imagine.

placeholder-15

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.