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

view-source://, September 14, 2016

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

HELLO MY NAME
IS @miketaylr

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

JS, DOM, CSS(OM) compat issues

JS prototypes

String.prototype.contains()

    // ES6 proposal
    str.contains(searchString[, position])
     
    "BrazilJS".contains("Br"); // true
    "BrazilJS".contains("Br", 1); // false

String.prototype.contains()

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

And that's how we got String.prototype.includes()

window.orientation, 920342

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

window.orientation != 0

QUIZ
TIME

undefined != 0

badOrientation()

window.orientation

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 are correct, per CSSOM spec?

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

Which are correct, per CSSOM spec?

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

CSSStyleDeclaration interface

        partial interface CSSStyleDeclaration {
          [TreatNullAs=EmptyString] attribute DOMString _webkit_cased_attribute;
          [TreatNullAs=EmptyString] attribute DOMString _camel_cased_attribute;
          [TreatNullAs=EmptyString] attribute DOMString _dashed_attribute;
        };
      
    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;
    }

-webkit-background-clip: text;

-webkit-text-stroke

users >
authors >
implementors >
specifiers >
theoretical purity

So like, what can i do?

read standards

(and like, use web standards? maybe?)

test

use pre-release channels

report bugs

to browsers

to webcompat.com

or, to me
miket@mozilla.com

Thanks!


join my webring
miketaylr.com/posts/