A library to make creating CSS polyfills much easier.

Last update: Oct 9, 2022

Related tags

Overview

UPDATE (2016-12-22): I am no longer supporting this library for all the reasons I address in my post The Dark Side of Polyfilling CSS. If you choose to use this library, please make sure you read the post, so you fully understand the challenges and limitations involved in writing CSS polyfills.

Polyfill.js

Polyfill.js is a library designed to make writing CSS polyfills much, much easier. It's an abstraction library that takes care of the boilerplate, so you can focus on what your polyfill actually does.

For most CSS polyfills, the hardest part is not the polyfill logic itself, it's the boring stuff, the stuff that the browser is supposed to do for you: downloading the CSS, parsing it, and finding the parts you care about. If the CSS contains media queries, you need to deal with them, detect when they apply, and manually listen for changes.

Furthermore, on the Web today, most polyfills exist isolated from each other, which means they all repeat the same expensive tasks. Polyfill.js solves this problem. It provides a common API for Polyfill authors to hook in to, so all the hard work happens only once at most. The stylesheets are downloaded, parsed, and stored in a cache so additional requests don't do double work.

How It Works

Polyfill.js makes writing your own CSS Polyfill easy by breaking it down into the following three steps:

1) Include the Polyfill.js library on your page.

It doesn't really matter where you put it, as long as it appears after the stylesheet(s) containing the rules you want to polyfill.

<script src="path/to/polyfill.js"></script>

2) Create a new Polyfill Instance

You create a new instance of the Polyfill object by passing in one or more keywords representing the CSS features you want to polyfill. The keywords can be declaration keywords (property-value pairs) or selector keywords.

The following expression creates an instance to polyfill the :local-link CSS pseudo-class:

var localLinkPolyfill = Polyfill({ selectors: [":local-link"] })

3) Register Event Callbacks

Once you have your polyfill instance, you simply register two callbacks: doMatched() and undoUnmatched(). When the page first loads and Polyfill.js has done all its work behind the scenes, the doMatched() callback is invoked and is passed a list of CSS rules that contain the specified keywords and match the current media.

If the media values change (usually by resizing the browser window) and new rules match, the doMatched() callback will be invoked again, each time being passed the newly matched rules.

If the media value changes and some rules no longer match, the undoUnmatched() callback is invoked and passed a list of rules that previously matched but no longer do.

Demos

Local Link: Local links (:local-link) is a new CSS pseudo-class for styling anchor tags that point to URLs within the current domain.
Position Sticky: "Sticky" is a new CSS position value to allow elements to stick in place only after a specified scroll position is met. This is most commonly used for navigation elements to stick in place after you start scrolling down the page.

Running the Tests

Polyfill.js includes a Jasmine test suite and uses an embedded iframe to test the media queries and resize events. Polyfill.js has been tested on the latest Chrome, Firefox, Safari, Opera, and IE 7-10.

If you use a browser other than these, please run the test suite in your browser and report back the results.

API

The full API can be found on project home page.

Comments

Support Polyfills on Dynamically Inserted DOM Elements

Adds support polyfilling elements that have been dynamically added to the DOM, by way of MutationObserver. This isn't supported in some older browsers, but it does allow modern browsers to use CSS polyfills (i.e. position: sticky) on single page applications or other dynamically updated applications.

opened by jsmecham 1
Add support for media attributes on link tags.
Possibly convert the rules array to be contained within a stylesheet object that has additional media properties.

{ "stylesheet": [rules], "media": "(min-width: 40em)" }
enhancement
opened by philipwalton 0
You can't change the `top` property of a stuck element later in the cascade
I'm trying to implement a sticky navigation that gets stuck below the WordPress admin bar, rather than appearing underneath it. The solution to this is simple:

.navigation_container.-sticky { position: sticky; top: 0; width: 100% !important; // polyfill miscalculates, should always be 100% } @media screen and (min-width: 601px) { .admin-bar .navigation_container.-sticky { top: 46px; } } @media screen and (min-width: 783px) { .admin-bar .navigation_container.-sticky { top: 32px; } }

Unfortunately, this doesn't appear to work. It always thinks top:0; is what should be set. I'm not sure if this is due to the added .admin-bar class, making it think that it's an entirely different stuck element, or if it's simply that I'm trying to change the top property at all.

In this use case, where I just want it to be stuck to the top of the body element, it doesn't make sense to add an inline style for top at all, preferably there should be a way to override that.
opened by JacobDB 0
Chrome iOS issue

Hi, We've just got to the bottom of a strange bug in Chrome on iOS 6 (i know, who uses that, its not even a proper browser as it uses WebViews etc!). The page just hangs and crashes the browser when polyfill.js is included. We've removed polyfill.js and the page loads fine. We use requirejs to load everything too.

opened by spenoir 0
Possible error in `position:sticky` demo?
Should you be passing one object to the constructor? Can't see where a second arg would be used.

Polyfill({ declarations:["position:sticky"], include: ["position-sticky"] }) .doMatched(doMatched) .undoUnmatched(undoUnmatched)
opened by bradparker 0
Add .stuck class
Hey, I thought it would be helpful to add a .stuck class to make it possible to style stuck elements.

I've never really used github before, but seeing as I got it working with only one line, I don't think its worth doing a pull/fork/push whatever its supposed to be.

Anyway, after line 38 in polyfill.position-sticky.js, add

$(data.$clone).addClass('stuck')

then you can style the element with .element.stuck {

It's not a perfect solution due to the way the polyfill works, but it works for small effects.

Thanks, euan.
opened by euancm 0
Permit insertion of stylesheet contents

I'm using Dojo Toolkit's dijit/Editor which is a rich-text editor, with its content contained within an iframe. I have added dynamically various scripts/stylesheets to the iframe, but I also need to run polyfill against it, and unfortunately Dojo gives the iframe a src attribute of "javascript:*". This means that any CSS script loading fails as a cross-domain request. Would it be possible to add an extra parameter (perhaps "stylesheetContents") to the initial options, that would then cause the program to check for provided stylesheet content, prior to attempting a (potentially) XSS attempt to retrieve them? I will fork the project and try and find the time to implement this in the fork.

opened by MartinDoyleUK 3