Web Compatible JavaScript and CSS

JSConfUY, 16 de abril, 2016

Web Compatible
JS & CSS

Mike Taylor, Mozilla

HOLA MI NOMBRE
ES MIKE

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

JS, DOM, CSS(OM) compat issues

JS

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]

CSS

    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;
    }
    

DOM

window.orientation, 920342

            if (is_iphone || android) {
              var supportsOrientationChange = "onorientationchange" in window,
                  orientationEvent = supportsOrientationChange ? 
                                     "orientationchange" : "resize"
              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 both 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 both 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-spec?

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

Which one is "correct", per-spec?

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

* Probably 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;
        };
      

adding stuff to the browser

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 webcompat.com and to me (miket@mozilla.com)

¡Gracias!


sígueme en myspace
@miketaylr