- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to check if CSS property is supported in the browser using JavaScript?
Nowadays, some CSS properties are deprecated, and some browsers do not support them. So, sometimes we require to check if CSS property is supported by the browser or not and need to use it accordingly to style the elements.
However, we can do that using the ‘supports’ rule of CSS, but here we will see different methods to check whether CSS property is supported by the browser using JavaScript.
Use the CSS.supports() method to check if the browser supports the CSS property
We can use the CSS.supports() method in JavaScript to check if the browser supports particular CSS property.
Syntax
Users can follow the syntax below to use the CSS.supports() method to check for supported CSS properties by the web browser.
let isSupported = CSS.supports(CSS_Property_name, CSS_property_value); let isSupported = CSS.supports(CSS_condition);
In the above syntax, we have written two different syntaxes of supports() method, which both will work.
Parameters
CSS_property_name − It is a property name of CSS, such as display, height, width, etc.
CSS_property_value − It is a value for the CSS_property_name property.
CSS_condition − We can pass the whole CSS condition as a parameter like ‘width: 1vh’ rather than passing width and 1vh as separate parameters.
Example
In the example below, we have used the CSS.supports() method to check whether the browser supports the CSS property. We have created the isPropertySupported() function, which invokes the CSS.supports () method and shows a different HTML on the web browser according to whether the property is supported.
<html>
<body>
<h3>Using the<i> supports() method </i> to check whether CSS property is supported by the browser or not. </h3>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
function isPropertySupported(property, value) {
// using the CSS.supports() methods
let isSupported = CSS.supports(property, value);
if (isSupported) {
output.innerHTML += "The " + property + " CSS property and " + value + " is supported by the current browser! <br/>";
} else {
output.innerHTML += "The " + property + " CSS property and " + value + " is not supported by the current browser! <br/>";
}
}
isPropertySupported("height", "10me");
isPropertySupported("display", "flex");
</script>
</body>
</html>
In the above output, users can observe that the support method returns true for the property display and value flex and returns false for the property margin and value 10me. However, the margin property is supported by every browser, but we have assigned a value with the wrong unit, ‘me’, which is not supported.
Example
In the example below, when users click on the “check valid CSS property” button, it invokes the validateCSS() function two times with different CSS conditions passing as an argument.
We have passed the CSS condition as an argument of the CSS.supports() method in this example, which returns a boolean value based on the CSS property that is valid in the browser.
<html>
<body>
<h3>Using the <i> supports() method </i> with condition parameter to check whether CSS the browser supports property or not. </h3>
<div id = "output"> </div><br>
<button onClick = "validateCSS('flex-direction: row'); validateCSS('margin: 10tr')"> Check for Valid CSS property </button>
<script>
let output = document.getElementById("output");
function validateCSS(condition) {
// using the CSS.supports() methods
if (CSS.supports(condition)) {
output.innerHTML += "The " + condition + " CSS condition" + " is supported by the current browser! <br/>";
} else {
output.innerHTML += "The " + condition + " CSS condition" + " is not supported by the current browser! <br/>";
}
}
</script>
</body>
</html>
In the above output, users can observe that ‘flex-direction: row’ is supported by the browser, but ‘margin: 10tr’ is not supported.
Create a custom algorithm in JavaScript to check if the browser supports the CSS property
We can create a custom algorithm in JavaScript via custom logic to check if the browser supports the CSS property. We can simply create an HTML element, try to assign a value for a particular property, and check if property is initialized by value.
Syntax
Users can follow the syntax below to use the custom algorithm.
var dummyElement = document.createElement("div");
dummyElement.style[property] = value;
if (dummyElement.style[property] === value) {
// CSS property supported
} else {
// CSS property supported
}
In the above syntax, we have used the createElement() method to create a dummy HTML element in the document.
Steps
Step 1 − Use the document.createElement() method and create any dummy HTML element.
Step 2 − Access the style attribute of the dummy element. A style attribute is an object containing the CSS properties and their value as a key-value pair. Try to add new keyvalue pair to the style object.
Step 3 − If the CSS property is valid, we can successfully add it to the style object. Now, try to access the value of the CSS property using the property as a key from the style object and compare it with the actual value.
Step 4 − If the actual value and value we get from the style object are the same, the browser supports the CSS property and its value.
Example
The example below uses the custom logic and implements the given steps to check if the browser supports the CSS property and its valuer.
<html>
<body>
<h3>Using the <i> custom algorithm </i> to check whether the CSS property is supported by the browser or not.</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
function isValidCSSProperty(property, value) {
var dummyElement = document.createElement("div");
dummyElement.style[property] = value;
if (dummyElement.style[property] === value) {
output.innerHTML += "The " + property + " CSS property and " + value + " value is supported by the browser! <br/>";
} else {
output.innerHTML += "The " + property + " CSS property and " + value + " value is not supported by the browser! </br>";
}
}
isValidCSSProperty("flex-direction", "height");
isValidCSSProperty("flex-direction", "row");
</script>
</body>
</html>
Users can use the supports() method to write a one-liner code to check if the browser supports the CSS property.
645 Views
