- CSS-Tricks

December 11, 2016 at 2:43 pm #248877

Participant

Next phase of this question doesn’t require going to a test page… it’s now become more about semantics. So any opinion on it is welcome.

I somehow have the idea that feature testing should be as “passive” as possible. So just looking for the presence of a method would have preference over retrieving it as an object. Least favourable would be to have to create an element or actually access the method.

Unfortunately with unit calculation such as calc() and vh a passive approach is not possible as far as I can tell. One will have to at least manipulate an existing element or create a new one to do a feature test. Like is done with the example in the first post.

The element there has not been inserted into the DOM yet though so it’s not terribly intrusive. But the trouble is the calculated value will need to be retrieved, not the string value of the style attribute. This works for a non-inserted element with Firefox and IE but not with the browsers that have a Webkit heritage.

:-(

So a further step is needed – inserting it… or in that case we might as well target an already existing element. Which (finally) leads to my next question. Is it odd or perfectly valid to use the head for this? It’s not part of the page’s visible content and styling it seems weird. But it looks like it works and the element usually has display: none as a default value which makes it a better candidate than html for example.

Here with jQuery (just because that’s convenient):

var assay = (function() {
  $('head').css('width', 'calc(2 * 10px)');
  var mass = $('head').width();
  $('head').removeAttr('style');
  return mass == 20;
})();

Side note, I wasn’t aware HTML5 doesn’t even require a head section…

http://www.w3schools.com/tags/tag_head.asp

In HTML5, the <head> element can be omitted.

Interested to hear your thoughts about this.