Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to check if CSS property is supported in browser using JavaScript?
CSS properties aren't supported uniformly across all browsers. JavaScript's CSS.supports() method lets you check if a specific CSS property and value combination is supported by the current browser, preventing layout issues and enabling feature detection.
Syntax
CSS.supports("property: value");
CSS.supports("property", "value");
Parameters
property ? The CSS property name (e.g., "display", "grid-template-columns", "backdrop-filter")
value ? The property value to test (e.g., "flex", "repeat(3, 1fr)", "blur(5px)")
Return Value
Returns true if the browser supports the property-value combination, false otherwise.
Method 1: Direct Property Testing
Test specific CSS properties directly in your JavaScript code:
<script>
console.log("Float properties:");
console.log("float:left -", CSS.supports("float:left"));
console.log("float:right -", CSS.supports("float:right"));
console.log("float:top -", CSS.supports("float:top"));
console.log("float:bottom -", CSS.supports("float:bottom"));
console.log("\nModern CSS features:");
console.log("display:grid -", CSS.supports("display:grid"));
console.log("display:flex -", CSS.supports("display:flex"));
console.log("backdrop-filter:blur(5px) -", CSS.supports("backdrop-filter:blur(5px)"));
</script>
Float properties: float:left - true float:right - true float:top - false float:bottom - false Modern CSS features: display:grid - true display:flex - true backdrop-filter:blur(5px) - true
Method 2: Interactive CSS Property Validator
Create a user interface to test any CSS property dynamically:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Property Support Checker</title>
<style>
body {
min-height: 90vh;
display: flex;
place-content: center;
flex-direction: column;
text-align: center;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
max-width: 400px;
margin: 0 auto;
}
input {
width: 100%;
margin: 8px 0;
padding: 12px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
width: 120px;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
padding: 15px;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
}
.supported {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.not-supported {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS Property Support Checker</h1>
<input type="text" id="propertyName" placeholder="Enter CSS property (e.g., display)">
<input type="text" id="propertyValue" placeholder="Enter value (e.g., grid)">
<button onclick="checkSupport()">Check Support</button>
<div id="result"></div>
</div>
<script>
function checkSupport() {
const property = document.getElementById("propertyName").value.trim();
const value = document.getElementById("propertyValue").value.trim();
const resultDiv = document.getElementById("result");
if (!property || !value) {
resultDiv.innerHTML = "Please enter both property and value";
resultDiv.className = "not-supported";
return;
}
const cssString = property + ":" + value;
const isSupported = CSS.supports(cssString);
if (isSupported) {
resultDiv.innerHTML = `? Supported: ${cssString}`;
resultDiv.className = "supported";
} else {
resultDiv.innerHTML = `? Not Supported: ${cssString}`;
resultDiv.className = "not-supported";
}
}
// Example tests on page load
document.addEventListener('DOMContentLoaded', function() {
console.log("Testing common CSS properties:");
console.log("display:flex -", CSS.supports("display", "flex"));
console.log("position:sticky -", CSS.supports("position", "sticky"));
console.log("clip-path:circle() -", CSS.supports("clip-path", "circle()"));
});
</script>
</body>
</html>
Common Use Cases
Use CSS.supports() for progressive enhancement:
<script>
// Feature detection for modern layouts
if (CSS.supports("display", "grid")) {
document.body.classList.add("grid-supported");
console.log("Using CSS Grid layout");
} else {
document.body.classList.add("fallback-layout");
console.log("Falling back to flexbox");
}
// Check for advanced CSS features
const features = [
{ property: "backdrop-filter", value: "blur(10px)" },
{ property: "clip-path", value: "polygon(0 0, 100% 0, 100% 100%)" },
{ property: "scroll-behavior", value: "smooth" },
{ property: "aspect-ratio", value: "16/9" }
];
features.forEach(feature => {
const supported = CSS.supports(feature.property, feature.value);
console.log(`${feature.property}: ${supported ? "?" : "?"}`);
});
</script>
Browser Compatibility
| Browser | Support | Version |
|---|---|---|
| Chrome | ? Yes | 28+ |
| Firefox | ? Yes | 22+ |
| Safari | ? Yes | 9+ |
| Edge | ? Yes | 12+ |
Conclusion
The CSS.supports() method is essential for modern web development, enabling feature detection and progressive enhancement. Use it to provide fallbacks for unsupported CSS features and create more robust, cross-browser compatible websites.
Updated on: 2026-03-15T23:19:01+05:30
2K+ Views
Advertisements