← #30 Remove the border from the last navigation item
#31

Check if the browser supports for an element attribute

Topics: DOM, JavaScript

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.

Fix a typo or suggest an improvement
#32 Create a descending list of numbered items