Browsers that aren’t
<=8

Things you can start/stop using today by dropping support for IE8!

Wojtek Urbański / @wojtiku
4developers 2014, 07.04.2014r

About me

IE8 is as lame as jokes about it

Is it worth it?

  • IE 8 was almost 44% of all IE testing at Atlassian in last ~10 months
  • 2159 - number of test VM with IE8 instances created
  • Assuming one test session lasts for 1 hour…
    • it’s 90 days (24h)
    • or 270 man days (8h), ~13 man months!
  • Atlassian is dropping IE8 support...
    just about now!

IE usage

Statcounter.com

  • IE8 - 6.71%
  • IE9 - 3.78%
  • IE10 - 4.13%
  • IE11 - 8.97%

Ranking.pl

  • IE8 - 3.75%
  • IE9 - 2.17%
  • IE10 - 2.13%
  • IE11 - 5.46%

JIRA onDemand

  • IE8 - 6.34%
  • IE9 - 9,55%
  • IE10 - 7.05%
  • IE11 - 9.34%
  • Each website is different, check your stats
  • Windows XP SP3 support ends on April 8th, 2014.
    It's only !

What’s available?

HTML5 elements support

no more


            
          

addEventListener all the things!


            document.getElementById('my-button').addEventListener('click', handlerFunction);
          

is better than


          function addEventHandler(elem, eventType, handler) {
  if (elem.addEventListener)
    elem.addEventListener (eventType, handler, false);
  else if (elem.attachEvent)
    elem.attachEvent ('on'+eventType, handler); 
}
addEventHandler(document.getElementById('my-button'), 'click', handlerFunction);
          

Event capturing

event flow

jQuery 2.0

12% smaller than 1.x - Android 2.x the weakest link.

Better modularity - custom builds to shrink the size.

ECMAScript 5!

but no "use strict";(

Object.defineProperty


var o = {},
    val = 1;

Object.defineProperty(o, "propertyKey", {
  //visibility in the for(var x in o) loop
  enumerable: false,
  //ability to modify this descriptor or delete property from the object
  configurable: false, 
  //value can’t be changed via assignment operator
  writable: false, 
  // any valid JS value
  value: 123 
  // optional getter and setter!
  get: function() { return val * 2; }
  set: function(v) { val = v; }
});
          

Object.defineProperty


var o = {};  

o.a = 1;

// is equivalent to:
Object.defineProperty(o, "a", {
    value : 1,
    writable : true,
    configurable : true,
    enumerable : true
});

// you can get it with
Object.getOwnPropertyDescriptor(o, "a");
// Object {value: "a", writable: true, enumerable: true, configurable: true}
          

Getters and Setters

Imagine Backbone.js models like this

this.model.attrName = 123

instead of this

this.model.set("attrName", 123)

Native-like Observer

Check out Watch.JS and get/set like a boss


//defining our object however we like
var ex1 = {
    attr1: "initial value of attr1",
    attr2: "initial value of attr2"
};

//defining a 'watcher' for an attribute
watch(ex1, "attr1", function(){
    alert("attr1 changed!");
});

//when changing the attribute its watcher will be invoked
ex1.attr1 = "other value";
          

Object.create


// Shape - superclass
function Shape() { this.x = 0; this.y = 0; }
Shape.prototype.move = function(x, y) { this.x += x; this.y += y; };
// Rectangle - subclass
function Rectangle() { Shape.call(this); this.width = 1; this.height = 1; }
// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

// with second parameter
var square = Object.create(new Rectangle(), {
  surfaceArea: {
    configurable: false,
    get: function() { return this.width * this.height },
    set: function(v) { this.width = Math.sqrt(v); this.height = this.width; }
}});
          

Preventing modifications


var o = {};

Object.preventExtensions(o); // no new properties
Object.isExtensible(o);

Object.seal(o); // no new properties, existing non-configurable
Object.isSealed(o);

Object.freeze(o); // object is immutable
Object.isFrozen(o);
          

List of properties


var arr = ["a", "b", "c"];

Object.keys(arr);
> ["0", "1", "2"]

Object.getOwnPropertyNames(arr);
> ["0", "1", "2", "length"]
          

ECMAScript 5 support - Arrays

  • Array
    • map
    • reduce
    • filter
    • every
    • some
    • forEach
    • indexOf
    • and more...
  • Array.isArray

var arr = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,
           144, 233, 377, 610, 987, 1597, 2584, 4181];

arr
    .sort(function(a,b){
        return b - a;
    })
    .filter(function(item) {
        return item % 2 == 1
    })
    .map(function(item) {
        return item * 2;
    })
    .forEach(function(item, idx, array) {
        console.log(idx + ": " + item);
    });
              

JavaScript - Others

  • Function.prototype.bind - no more underscore!
  • String.prototype.trim - no more $.trim!
  • Immutable undefined
  • Date.now
  • Function.prototype.apply accepts array-like objects instead of just Arrays (e.g. arguments) (worked in IE8)
  • Text Selection API
  • Geolocation API
  • Canvas

Pseudo Class Selectors

  • :first-child
  • :last-child
  • :nth-child()
  • :only-of-type
  • :first-of-type
  • :last-of-type
  • :nth-of-type()
  • :only-child
  • :checked
  • :enabled
  • :disabled
  • :empty
  • :not

input:enabled + label { background: yellow; }
input:checked + label { background: red; }
input:disabled + label { background: silver; }
          
+


CSS Backgrounds

  • multiple backgrounds
    
    #foo { background: url(top.png) no-repeat top,
                       url(bottom.png) no-repeat bottom,
                       url(pattern.png) repeat-x; }
                            
  • RGBa/HSL colors
    
    #a { background: rgba(255, 0, 0, 0.5); } /*Red Green Blue Alpha*/
    #b { background: hsla(350, 50%, 45%, 1); } /*Hue Saturation Lightness Alpha*/
                  
  • background-size
    
    #foo { background-size: cover, contain, 100% auto; }
                  
  • SVG in CSS backgrounds

calc()

width: calc(100% - 20px);

Remember about performance!

New CSS units

  • rem
    • it’s like em, only better
    • relative to :root element
  • vw/vh
    • vw - 1% of viewport witdh
    • vh - 1% of viewport height
    • vmin and vmax not supported
    • be careful with font-sizing

CSS - others

  • media-queries
  • box-shadow
  • border-radius
  • max/min-width works correctly
  • -ms-transform
  • opacity (no more filter!)
  • no need for EOT fonts in @font-face

SVG support

  • Inline SVG in HTML
  • SVG in IMG tag
  • styling SVG via fill property

and

Want to drop IE9 in the process?

  • XMLHttpRequest 2
  • Web Workers
  • Web Sockets
  • File and FileReader API
  • IndexedDB
  • Offline web applications
  • (push|pop|replace)State
  • ECMAScript 5 Strict Mode
  • classList
  • PageVisibility API
  • CSS3 Transitions
  • CSS3 Text-shadow
  • CSS Repeating Gradients
  • CSS Gradients
  • CSS3 Animation
  • SVG filters

Resources

Questions?