The ember way of detecting browser features

Design
1

I would like to setup a better way of testing support of certain browser features.

Currently I am testing on initialization and then injecting the results into every component.

//initializers/features.js
import Ember from 'ember';

var features = Ember.Object.extend({
  touch: Modernizer.touch,
  inputtypes: {
    date: Modernizr.inputtypes.date,
    time: Modernizr.inputtypes.time
  }
});

export default {
  name: 'features',
  before: 'registerComponentLookup',
  initialize: function(container, application) {
    application.register('settings:features', features, {singleton: true});
    application.inject('component', 'features', 'settings:features')
  }
};

So I would like to start a conversation about standardizing how browser features are detected.

I like the idea of explicitly testing on initialize but don’t like having to know the features api from within the component.

I am thinking a property browserFeatures should be added to the component that defines what features are to be tested and set on initialize.

Let me know if I am off my rocker.

2 Likes