Doing the Unstuck: how to make browsers compatible with Web JavaScript™

Dinosaur JS, June 24, 2016

Doing the Unstuck: how to make browsers compatible with Web JavaScript™

Mike Taylor, Mozilla

HELLO MY NAME
IS MIKE

what is web compat, and like, why is it important?

JS, DOM, CSS(OM) compat issues

JS

JS prototypes

String.prototype.contains()

    // Mootools 1.2
        'a bc'.contains('bc'); //returns true
        'a b c'.contains('c', ' '); //returns true
        'a bc'.contains('b', ' '); //returns false    
    // ES6
      str.contains(searchString[, position])
    

Array.prototype.contains(), Bug 1075059

      if (!this.contains(item)) {
        this.push(item)
      }
    

Array.prototype.contains()

      Array.forEachMethod(function(method, name){
        Elements.implement(name, method);
      });
    

Array.prototype.contains()

    object.forEachMethod = function(fn){
      if (!methodsEnumerable) {
        for (var i = 0, l = methods.length; i < l; i++){
          fn.call(prototype, prototype[methods[i]], methods[i]);
        }}
      for (var key in prototype) fn.call(prototype, prototype[key], key)
    };
    

Array.prototype.contains()

    Array.implement({
    ...
        contains: function(item, from) {
          return this.indexOf(item, from) != -1;
        },
    

TypeError: this.contains is not a function moo-clientcide-1.3.js:850

Array.prototype.contains()

The Array prototype object... has a length property whose initial value is 0 and whose attributes are { [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: false }.
ES2016

Array.prototype.values(), 883914

            me.definitions.push('function ' + name + '(' + me.fnArgs + ') {',
              ' try { with(values) {',
              '  ' + action,
              ' }} catch(e) {',
              '}',
            '}');
        
When `values` is an Array in that WithStatement, any reference to "values" in the body statement would become `values.values`, referring to Array.prototype.values instead of the original object.
883914#c13

Array.prototype[@@unscopables]

DOM

window.orientation, 920342

            if (is_iphone || android) {
            ...
              window.addEventListener(orientationEvent, function() {
                if (window.orientation != 0)
                  badOrientation();
              }}
        

window.orientation != 0

QUIZ
TIME

undefined != 0

badOrientation()

CSSOM

QUIZ
TIME

Which of these work in Firefox, Edge and Chrome?

  1. elm.style.webkitTransform
  2. elm.style.WebkitTransform
  3. elm.style['-webkit-transform']
  4. elm.style['transform']

Which of these work in Firefox, Edge and Chrome?

  1. elm.style.webkitTransform
  2. elm.style.WebkitTransform
  3. elm.style['-webkit-transform']
  4. elm.style['transform']

Which one is correct, per CSSOM spec?

  1. elm.style.webkitTransform
  2. elm.style.WebkitTransform
  3. elm.style['-webkit-transform']
  4. elm.style['transform']

Which one is correct, per CSSOM spec?

  1. elm.style.webkitTransform'
  2. elm.style.WebkitTransform'
  3. elm.style['-webkit-transform']*
  4. elm.style['transform']

* Possibly soon. see spec bug

CSSStyleDeclaration interface

        partial interface CSSStyleDeclaration {
          [TreatNullAs=EmptyString] attribute DOMString _camel_cased_attribute;
        };
      
        partial interface CSSStyleDeclaration {
          [TreatNullAs=EmptyString] attribute DOMString _webkit_cased_attribute;
        };
      

CSS

(what the frig this isn't a CSS conference)

    body#checkout #slide0 > p {
      color: #c5b3cb;
      background: -webkit-linear-gradient(
                        0,
                        rgba(180,180,250,0.7),
                        #fadce5 50%,#fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    

Turn that frown upside down

Removing stuff from the browser

So like, what can i do?

read standards

(and like, use web standards?)

test

use pre-release channels

report bugs

to browsers, to https://webcompat.com, and to me (miket@mozilla.com)

Thanks!


follow me on myspace
@miketaylr