Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

Question

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser.

Despite the general recommendation against browser detection, I find myself facing a situation where I need to dynamically calculate the number of available "slots" in a JS layout. This calculation is done using calc(100%/{0}), where {0} represents the number of slots.

In the case of iPads, setting the height with .css("height", "calc(100%/3)") will lead to failure since it requires the use of -webkit- prefix.

Given this scenario, could someone guide me on how to implement feature detection instead of relying on outdated methods like $.browser.webkit?

javascript css feature-detection

Answer 1

Answer №1

Begin by creating a dummy element and inserting it into the document. Then, apply the following code:

.cssText.height = 'calc(100px - 50px);'

. Finally, check if the element's height matches the expected value. Repeat this process for each vendor prefix.

It may be helpful to explore Modernizr's source code for similar feature detection scripts, like those found in calc.js.

While Modernizr can detect the presence of features, it does not provide information on which prefix to use. The snippet below demonstrates how to determine the correct prefix:

var calc = (function(){
    var dummy = document.createElement('div');
    var props = ['calc', '-webkit-calc', '-moz-calc', '-o-calc'];
    for (var i=0; i<props.length; ++i) {
        var prop = props[i];
        dummy.style.cssText = 'width:' + prop + '(1px);';
        if (dummy.style.length)
            return prop;
    }
})();

// Example of usage:
$('selector').css('height', calc + '(100% / 3)');

(Note: I omitted the -ms- prefix since IE now supports it without the prefix - refer to http://caniuse.com/calc.)

Answer 2

Begin by creating a dummy element and inserting it into the document. Then, apply the following code:

.cssText.height = 'calc(100px - 50px);'

. Finally, check if the element's height matches the expected value. Repeat this process for each vendor prefix.

It may be helpful to explore Modernizr's source code for similar feature detection scripts, like those found in calc.js.

While Modernizr can detect the presence of features, it does not provide information on which prefix to use. The snippet below demonstrates how to determine the correct prefix:

var calc = (function(){
    var dummy = document.createElement('div');
    var props = ['calc', '-webkit-calc', '-moz-calc', '-o-calc'];
    for (var i=0; i<props.length; ++i) {
        var prop = props[i];
        dummy.style.cssText = 'width:' + prop + '(1px);';
        if (dummy.style.length)
            return prop;
    }
})();

// Example of usage:
$('selector').css('height', calc + '(100% / 3)');

(Note: I omitted the -ms- prefix since IE now supports it without the prefix - refer to http://caniuse.com/calc.)

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

Answer №1

Similar questions

Guide: Utilizing JSON API data to generate marker labels on a leaflet map

Unable to transform Symbol data into a string - Error when making a React AJAX delete call

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

Customize the appearance of the date input box in MUI KeyboardDatePicker

This JavaScript operates in solitude, unable to collaborate with other JavaScripts

Executing a function on the window object in JavaScript

Aligning a div within another div with an image

I'm having trouble accessing the outcome from within the function

Performing a simulated click on a dynamically inserted element using pure JavaScript

Ways to showcase an item within additional items?

Tips on securely saving passwords using Greasemonkey

Surprising block of text suddenly popped up on the browser screen while I was in the middle of working on

Is there a way to convey a transition MUI property from a parent component to its child component in React?

Tips for adjusting the height of MUI Date Picker to fit your preferences

AngularJS Constants in TypeScript using CommonJS modules

When you use the useState object in NextJS, the context object may appear to be empty

React: Incorporating .map for nested arrays. Ensure each child component within the list is assigned a distinct "key" property

Trouble with Background Image Display in Internet Explorer 8

Issues with Angular preventing app from launching successfully

Just a simple canvas animation