How to Detect Media Query Support in CSS and JavaScript

Detecting Media Query Support in CSS and JavaScript

Media queries are a powerful feature in modern web development, allowing the presentation of content to be tailored to the user’s device and viewport size. Even with the wide variety of devices and viewport sizes, media queries allow developers to create responsive designs while keeping the code clean and concise. However, one of the challenges with media queries is detecting support for them in the first place. As media queries are part of the CSS specification, both JavaScript and CSS techniques can be used to detect if the user’s browser supports media queries.

CSS Media Query Detection

The best way to detect if the user’s browser supports media queries is to use CSS itself. The @media rule allows authors to specify different style rules for different media types or media features. By using the not keyword, it is possible to specify a media query that will only be applied if the browser does not support the given media query.

For example, to detect if the user’s browser supports max-width media queries, you could use the following media query:

@media not all and (max-width: 1000px) { 
    .no-support { display: block; } 
}

In this case, if the user’s browser does not support max-width media queries, the .no-support class will be applied and the element it is applied to will be visible.

JavaScript Media Query Detection

If you need to detect media query support at a more granular level, JavaScript can also be used. In fact, modern JavaScript APIs such as window.matchMedia() make it easy to detect if the user’s browser supports a given media query. For example, to detect if the user’s browser supports max-width media queries, you could use the following JavaScript code:

if (window.matchMedia("(max-width: 1000px)").matches) { 
    // Browser supports max-width media query 
} else { 
    // Browser does not support max-width media query 
}

In this case, if the user’s browser does not support max-width media queries, the else statement will be executed.

Conclusion

Detecting media query support in CSS and JavaScript is an important part of creating responsive designs that adapt to the user’s device and viewport size. Although there are different techniques that can be used, the best way to do this is by using CSS and the @media rule. For more granular control, however, JavaScript can also be used, taking advantage of APIs such as window.matchMedia().