Giter VIP home page Giter VIP logo

polyfill's Introduction

polyfill - JavaScript Polyfills, Shims and More

  • A shim lets you write the same code across all browsers by implementing a new API in downlevel browsers.
  • A polyfill is a shim or collection of shims (and a catchy name).
  • A prollyfill is a shim for a proposed API
  • A helper helps write cross-browser code where a true API shim/polyfill is not possible.

Note that my general approach to polyfills is not to produce 100% compliant behavior, but to provide a broad subset of functionality so that, where possible, cooperative code can be written to take advantage of new APIs. No assumptions should be made about security or edge cases. It is preferrable to use a shim where it is possible to create one on supported browsers. If not possible, a helper should be used that lets the same code be used in all browsers.

I use these in various pages on my sites; most are by me, or I have at least tweaked them. A more comprehensive list can be found at The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks by Paul Irish.

ECMAScript / JavaScript Polyfills

ECMAScript 5 - Most recent standard, supported by all modern browsers. Frozen.

ECMAScript 6 - Based on nearly complete draft standard. Should be stable apart from bug fixes.

ECMAScript 7 - At the initial proposal/strawman stage. Here there be dragons.

JavaScript 1.X String Extras - ref

  • String prototype: trimLeft, trimRight, quote

HTML

script - tests - living standard

  • document.head (for IE8-)
  • 'shiv' of newer HTML elements (section, aside, etc), to fix parsing (for IE8-)
  • dataset and data-* attributes spec (for IE8+, not available in IE7-)
    • str = element.dataset[key] - yields undefined if data-key attribute not present
    • element.dataset[key] = str - fails unless data-key attribute already present
  • Base64 utility methods (for IE9-)
    • encodedString = window.btoa(binaryString) - Base64 Encode
    • binaryString = window.atob(encodedString) - Base64 Decode

DOM

script - tests - living standard

  • Selectors (for IE7-) - adapted from Paul Young
    • element = document.querySelector(selector)
    • elementArray = document.querySelectorAll(selector)
  • elementArray = document.getElementsByClassName(classNames) (for IE8-)
  • Node constants: Node.ELEMENT_NODE, etc (for IE8-)
  • DOMException constants: DOMException.INDEX_SIZE_ERR (for IE8-)
  • Events (for IE8)
    • Where EventTarget is window, document, or any element:
      • EventTarget.addEventListener(event, handler) - for IE8+
      • EventTarget.removeEventListener(event, handler) - for IE8+
    • Event.target
    • Event.currentTarget
    • Event.eventPhase
    • Event.bubbles
    • Event.cancelable
    • Event.timeStamp
    • Event.defaultPrevented
    • Event.stopPropagation()
    • Event.cancelBubble()
  • Non-standard Event helpers for IE7- - adapted from QuirksMode
    • window.addEvent(EventTarget, event, handler)
    • window.removeEvent(EventTarget, event, handler)
  • DOMTokenList - classListspec, relListspec
    • tokenList = elem.classList - for IE8+
    • tokenList = elem.relList - for IE8+
    • tokenList.length
    • tokenList.item(index)
    • tokenList.contains(token)
    • tokenList.add(token)
    • tokenList.remove(token)
    • tokenList.toggle(token)
    • Non-standard helpers for IE7-:
      • tokenList = window.getClassList(element)
      • tokenList = window.getRelList(element)

XMLHttpRequest

script - tests - living standard

Timing

script

CSS OM

script - spec

Polyfill for width and height in getBoundingClientRect() in IE8-

URL API

script - tests - living standard

var url = new URL(url, base);
var value = url.searchParams.get(name);
var valueArray = url.searchParams.getAll(name);
url.searchParams.append(name, valueOrValues);
url.searchParams.delete(name);

URL objects have properties:

  • href, origin, protocol, username, password, host, hostname, port, pathname, search, searchParams, hash

URLSearchParams objects have:

  • append(name, value)
  • delete(name)
  • get(name)
  • getAll(name)
  • has(name)
  • set(name, value)
  • [Symbol.iterator]() - if defined

Keyboard Events

script - demo page - draft spec

// Adds the following properties to each KeyboardEvent:
event.code
event.key
event.location

// You can get a label for the key using:
KeyboardEvent.queryKeyCap(code);

// IE7- only: In your keydown/keyup handler, call this in your handler
// before accessing the `code`, `key`, or `location` properties:
window.identifyKey(keyboardEvent);

more details

Geolocation API

script - demo page - spec - uses freegeoip.net

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);
navigator.geolocation.clearWatch(watchId);

Obsolete

Obsolete and Unmaintained Polyfills

polyfill's People

Contributors

caridy avatar hzr avatar inexorabletash avatar lukaszzdanikowski avatar triblondon avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.