Which browsers already support CSS Media Queries Level 4?

In this article, we’ll explore browser support for Media Queries Level 4. Media Queries Level 4 is a CSS module that allows web pages to be rendered differently based on different media devices and contextual properties. This allows us to create responsive layouts for different screen sizes and resolutions, tailored to device characteristics.

Read more: CSS Tutorial

What is Media Queries Level 4?

Media Queries Level 4 is a CSS module that introduces new features and capabilities. It allows us to control the appearance and behavior of web pages based on device characteristics and environmental properties. By using Media Queries Level 4, we can adjust the web page’s style sheet based on information such as screen size, resolution, device type, display brightness, and display color properties.

Which browsers already support Media Queries Level 4?

Currently, support for Media Queries Level 4 is not very widespread. According to the Can I Use website, the following browsers already support some or all of the features of Media Queries Level 4:

• Chrome (Android and Desktop): Starting with Chrome 65, some features of Media Queries Level 4 have been supported.
• Firefox (Android and Desktop): Starting with Firefox 61, some features of Media Queries Level 4 have been supported.
• Safari (iOS and Desktop): Starting with Safari 12, some features of Media Queries Level 4 have been supported.
• Edge (Android and Desktop): Starting with Edge 16, some features of Media Queries Level 4 have been supported.

Note: While these browsers have begun supporting Media Queries Level 4 features, this does not mean that all features are fully supported. Supported features may vary depending on the browser version and device platform.

Some Examples of Media Queries Level 4

Here are some examples of using Media Queries Level 4:

1. Adjusting font size according to screen size

@media (min-width: 768px) {
body {
font-size: 20px;
}
}

@media (min-width: 1024px) {
body {
font-size: 24px;
}
}

In the above code example, when the screen width is greater than or equal to 768px, the font size is set to 20px; when the screen width is greater than or equal to 1024px, the font size is set to 24px.

2. Hide or show content based on device type

@media (hover: none) {
.hoverable {
display: none;
}
}

@media (hover: hover) {
.hoverable {
display: block;
}
}

In the above example code, the .hoverable element is hidden when the device doesn’t support mouse hover, and is shown when the device supports mouse hover.

3. Adjust the background color according to the display brightness

@media (light-level: dim) {
body {
background-color: #666666;
}
}

@media (light-level: normal) {
body {
background-color: #ffffff;
}
}

In the above example code, when the display brightness is low, the background color is set to gray; when the display brightness is normal, the background color is set to white.

These examples are just the tip of the iceberg of Media Queries Level 4; it has many other powerful features and can be combined with other CSS modules and features.

Summary

Media Queries Level 4 is a CSS module that allows web page style sheets to adapt to device characteristics and environmental properties. Currently, some major browsers have begun to support the features of Media Queries Level 4, but support is still limited. When writing responsive layouts, we can use Media Queries Level 4 to control styles based on different screen sizes, resolutions, device types, and other information. We hope that more and more browsers will support the full range of Media Queries Level 4 features in the future, allowing us to design and develop web pages with greater freedom.