Check if the browser supports for an element attribute

We can detect if the current browser supports for given attribute, `pattern` for example, as following:

const isPatternSupported = 'pattern' in document.createElement('input');

If you would like to check for the value of attribute, it takes more steps. The sample code below determines whether the native date input is supported:

const isDateInputSupported = () => {
    // Create new input element
    const ele = document.createElement('input');

    // Set the type attribute
    ele.setAttribute('type', 'date');

    const invalidValue = 'not-a-valid-date';

    // Set an invalid value
    ele.setAttribute('value', invalidValue);

    return ele.value !== invalidValue;
};

If the browser supports the date input, invoking `setAttribute` with an invalid date won't have effect on the `value` attribute. As a result, `ele.value` will be an empty string.

Otherwise, the input is treated as normal text input and `ele.value` returns the original value.

Center an element vertically and horizontally

Checkout the previous branch