"New" features you can use TODAY – SVG – HTML

"New" features you can use TODAY

SVG

• Mobile Friendly
• Bandwidth Friendly
• Retina Friendly
• Animation Friendly

HTML

• Contenteditable
• Input placeholder
• Form Validation ()
• Offline access (cache manifest)
• Range input ()
• Iframe sandboxing
• Content Security Policy
• Pushstate/Popstate session history (Pushed URL | Back)
• Audio/Video element

CSS

• calc()performance is not a problem
• 100% CSS Gradients
• Hyphenation -vendor-prefix
• 3d Transforms
• CSS Animations
• Border-images (> IE10)
• Border-radius
• Box-shadow
• HSL(a) RGB(a)
• Mulitple Backgrounds
• Multi-column layouts -vendor-prefix
• nth-child, nth-of-type
• Text-shadow
• CSS Transforms
• CSS Transitions
• Flex-box (sorta)
• Font feature settings
• REM units
• Viewport units
• ::selection pseudo element
• pointer events ( > IE10)
• user-select: none
• Demo

Javascript

• Web Workers
• Web Sockets
• Typed Arrays
• requestAnimationFrame
• pageVisibility
• Navigation Timing
• matchMedia
• matches()
• IndexedDB (!iOS)
• Geolocation
• Fullscreen API ( > IE 10)
• FileReader API
• File API
• Blob URLs
• Blob constructing

DOM

• getElementByClassname
• getComputedStyle
• script defer
• script async
• XMLHttpRequest 2
• ClassList
• Mutation Observer (> IE 10)

Stop spinning your wheels.

A small project can take up to two months

A medium project -- anywhere between two - six months.

A large project can take six months or more.

By the time you're done with a small project...

Firefox and Chrome have released at least one major version.

Safari and IE are preparing for beta releases of their browsers.

During the course of a medium size project

Firefox and Chrome will release anywhere from one - four major releases.

Safari/IE will be well into their beta period.

During a large project...

You are likely to see a major release from Safari and IE before your project launches.

Stop coding for the past!

Start coding for the future!

• Code to standards regardless of support
• Conditionally Polyfill where support lacks

Code to standards

Browsers are in an arms race to implement standards as soon as the spec is stable.

If the feature you need isn't available across all your supported browsers yet, it soon will be.

Conditionally Polyfill

If your feature doesn't exist in all supported browsers, there is almost certainly a polyfill

if (!Array.prototype.forEach) {
  Array.prototype.forEach = function(fn, thisArg) {
    "use strict";
    if (typeof fn !== "function")
      throw new TypeError();

    for (var i = 0, len = this.length; i < len; i++) {
        fn.call(thisArg, this[i], i, this);
    }
  };
}

Just make sure you test for the feature first. Don't load a polyfill if the browser supports the feature.

Burden the aged

• Older browsers are getting less used, not more.
• Code you write for the oldest browsers becomes obsolete the soonest — make that the throw away code, not your whole application.
• Build for the standard, polyfill or load fallbacks for the rest.
• Don't load what you don't need.