JavaScript: Can't get Modernizr working

Question

I've been trying to get Modernizr working, but I think I must be doing something wrong, as I can't seem to get it doing anything at all.

My ultimate purpose is to try and test browser support for webkit-line-clamp, but I've just been trying to get an example from the doc's working, and I don't even seem able to do that.

So, I went to the Modernizr website, and selected the Modernizr.addtest() code, and copied it into the head of my html page, as so:

<script>
/*! modernizr 3.5.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-addtest-setclasses !*/
!function(n,e,o){function t(n,e){return typeof n===e}function s(){var n,e,o,s,i,a,l;for(var u in f)if(f.hasOwnProperty(u)){if(n=[],e=f[u],e.name&&(n.push(e.name.toLowerCase()),e.options&&e.options.aliases&&e.options.aliases.length))for(o=0;o<e.options.aliases.length;o++)n.push(e.options.aliases[o].toLowerCase());for(s=t(e.fn,"function")?e.fn():e.fn,i=0;i<n.length;i++)a=n[i],l=a.split("."),1===l.length?Modernizr[l[0]]=s:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=s),r.push((s?"":"no-")+l.join("-"))}}function i(n){var e=c.className,o=Modernizr._config.classPrefix||"";if(d&&(e=e.baseVal),Modernizr._config.enableJSClass){var t=new RegExp("(^|\\s)"+o+"no-js(\\s|$)");e=e.replace(t,"$1"+o+"js$2")}Modernizr._config.enableClasses&&(e+=" "+o+n.join(" "+o),d?c.className.baseVal=e:c.className=e)}function a(n,e){if("object"==typeof n)for(var o in n)u(n,o)&&a(o,n[o]);else{n=n.toLowerCase();var t=n.split("."),s=Modernizr[t[0]];if(2==t.length&&(s=s[t[1]]),"undefined"!=typeof s)return Modernizr;e="function"==typeof e?e():e,1==t.length?Modernizr[t[0]]=e:(!Modernizr[t[0]]||Modernizr[t[0]]instanceof Boolean||(Modernizr[t[0]]=new Boolean(Modernizr[t[0]])),Modernizr[t[0]][t[1]]=e),i([(e&&0!=e?"":"no-")+t.join("-")]),Modernizr._trigger(n,e)}return Modernizr}var r=[],f=[],l={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(n,e){var o=this;setTimeout(function(){e(o[n])},0)},addTest:function(n,e,o){f.push({name:n,fn:e,options:o})},addAsyncTest:function(n){f.push({name:null,fn:n})}},Modernizr=function(){};Modernizr.prototype=l,Modernizr=new Modernizr;var u;!function(){var n={}.hasOwnProperty;u=t(n,"undefined")||t(n.call,"undefined")?function(n,e){return e in n&&t(n.constructor.prototype[e],"undefined")}:function(e,o){return n.call(e,o)}}();var c=e.documentElement,d="svg"===c.nodeName.toLowerCase();l._l={},l.on=function(n,e){this._l[n]||(this._l[n]=[]),this._l[n].push(e),Modernizr.hasOwnProperty(n)&&setTimeout(function(){Modernizr._trigger(n,Modernizr[n])},0)},l._trigger=function(n,e){if(this._l[n]){var o=this._l[n];setTimeout(function(){var n,t;for(n=0;n<o.length;n++)(t=o[n])(e)},0),delete this._l[n]}},Modernizr._q.push(function(){l.addTest=a}),s(),i(r),delete l.addTest,delete l.addAsyncTest;for(var p=0;p<Modernizr._q.length;p++)Modernizr._q[p]();n.Modernizr=Modernizr}(window,document);
</script>

and then added the following code (as per the example at https://modernizr.com/docs):

<script>
Modernizr.addTest('itsTuesday', function() {
var d = new Date();
return d.getDay() === 2;
});
</script>

and then, at the foot of the page, added the following code:

<script>
if (itstuesday())
{
alert("it's Tuesday");
}
else
{
alert("Not Tuesday");
}
</script>

I also tested with if (Modernizr.itsTuesday()) and if (itsTuesday()), and if (Modernizr.itstuesday()) and everything else I could think of that might work, but all I end up with in the console are errors such as Uncaught ReferenceError: itstuesday is not defined and Uncaught ReferenceError: Modernizer is not defined, etc.

The Modernizr doc's do note "One thing to notice is that the names of feature detect functions are always lowercased when added to the Modernizr object. That means that Modernizr.itsTuesday will not exist, but Modernizr.itstuesday will."

I guess I'm just not understanding how I'm meant to be using or implementing the code properly, so any assistance would be much appreciated.

If, further to that, anyone can suggest exactly how I can go about testing feature support, such as webkit-line-clamp, with Modernizr then even better. Unfortunately, although the site has a ton of things one can test for, with their default set of code, that particular property doesn't seem to be amongst them.

Thanks!

Update:

Okay, so I managed to get this working. I needed to use the Modernizr.addTest() and the Modernizr.testAllProps(), and then added the test:

<script>
Modernizr.addTest('lineclamp', function() {
    return Modernizr.testAllProps('line-clamp');
});
</script>

and made use of it per below:

<script>
if (Modernizr.lineclamp)
{
alert("yay");
}
else
{
alert("nay");
}
</script>

Tested it in several different browsers and got the anticipated results.

Answer 1

From my reading of the docs, you'd do this instead:

if(Modernizr.itsTuesday) {
  // do something
} else {
  // something else
}

Tests appear to result in properties, not functions.