[whatwg] Better DOM hooks for polyfilling CSS properties?

Problem
===

It's difficult to know when an unsupported property was set for any arbitrary
element, and manually sifting through stylesheets isn't very easy.

This makes polyfilling CSS harder than it needs to be.

Strawman
===

The endgoal is to easily get a NodeList containing elements that have a
particular invalid/unsupported property applied.

Suggestion 1: Dictionary
---

Object populated with information about elements that have a rejected CSS
property applied.  It updates continuously to reflect the app's most
current state.

document.rejectedCSSProperties = {
  "<rejectedPropertyName>": <NodeList>,
  ...
  ...
};

This, combined with Object.observe, would allow authors an extensible way to
handle unsupported CSS.

Suggestion 2: Query Method
---

document.getElementsByRejectedProperty('foo-bar');

This is the most direct solution.  Maybe more difficult to implement/maintain
vendorside.  Should return live NodeLists, a la getElementsByClassName.

Suggestion 3: Event
---

document.oncsspropertyrejected = function(event) {
  element.property // "foo-bar"
  event.elements // NodeList
};

Kind of similar semantically to the solution in Suggestion 1, but in a
more traditional format.  I prefer Suggestion 1, as it offers a
centralized "registrar" of rejected properties.

Received on Thursday, 10 July 2014 21:39:31 UTC