Can you explain the guidelines for overlapping CSS media queries?

Question

Can you explain the guidelines for overlapping CSS media queries?

When it comes to spacing out media queries accurately to prevent overlap, how should we approach it?

Let's examine the following code as an example:

@media (max-width: 20em) {
    /* styles for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* styles for slightly wider viewport */
}

@media (min-width: 45em) {
    /* styles for everything else */
}

What happens at exactly 20em and 45em across different browsers that support these queries?

I've noticed that some people use specific pixel values like 799px and then 800px, but what about situations where the screen width is something like 799.5px? Especially on high-resolution displays like retina screens.

I'm particularly interested in understanding the specifications behind this query handling.

css responsive-design media-queries

Answer 1

Answer №1

What are the guidelines for CSS media query overlap?

Cascade.

@media rules follow the cascade, meaning that when multiple @media rules match simultaneously, browsers should apply styles from all matching rules and resolve any conflicts through cascading.¹

What occurs in all supported browsers at exactly 20em and 45em width?

When the viewport is precisely 20em wide, both your first and second media queries will match. Browsers will apply styles from both @media rules, resolving conflicts by giving precedence to the last-declared rule. The same applies when the viewport width is exactly 45em for the second and third media queries.

In your provided example code with actual style rules:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

At exactly 20em wide, both media queries will be true. In this case, display: block overrides display: none, and float: left will be applied to elements with the class .sidebar.

The cascade operates as if the media query conditions did not exist initially:

.sidebar { display: none; }
.sidebar { display: block; float: left; }

To prevent overlap, ensure that your media queries do not intersect.

Remember, both min- and max- prefixes signify "minimum inclusive" and "maximum inclusive," respectively. Thus, (min-width: 20em) and (max-width: 20em) will both match a viewport of exactly 20em in width.

Regarding fractional pixel values such as 799.5px, it's unclear how browsers handle them precisely due to logical pixels in CSS. Safari on iOS appears to round fractional values to ensure they fit within defined ranges like max-width: 799px or min-width: 800px.

¹ _{While not explicitly stated in the Conditional Rules module or the Cascade module (which is set for revision), the standard implies normal cascading behavior, instructing browsers to apply styles from all matching @media rules without special hierarchy.}

Answer 2

What are the guidelines for CSS media query overlap?

Cascade.

@media rules follow the cascade, meaning that when multiple @media rules match simultaneously, browsers should apply styles from all matching rules and resolve any conflicts through cascading.¹

What occurs in all supported browsers at exactly 20em and 45em width?

When the viewport is precisely 20em wide, both your first and second media queries will match. Browsers will apply styles from both @media rules, resolving conflicts by giving precedence to the last-declared rule. The same applies when the viewport width is exactly 45em for the second and third media queries.

In your provided example code with actual style rules:

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

At exactly 20em wide, both media queries will be true. In this case, display: block overrides display: none, and float: left will be applied to elements with the class .sidebar.

The cascade operates as if the media query conditions did not exist initially:

.sidebar { display: none; }
.sidebar { display: block; float: left; }

To prevent overlap, ensure that your media queries do not intersect.

Remember, both min- and max- prefixes signify "minimum inclusive" and "maximum inclusive," respectively. Thus, (min-width: 20em) and (max-width: 20em) will both match a viewport of exactly 20em in width.

Regarding fractional pixel values such as 799.5px, it's unclear how browsers handle them precisely due to logical pixels in CSS. Safari on iOS appears to round fractional values to ensure they fit within defined ranges like max-width: 799px or min-width: 800px.

¹ _{While not explicitly stated in the Conditional Rules module or the Cascade module (which is set for revision), the standard implies normal cascading behavior, instructing browsers to apply styles from all matching @media rules without special hierarchy.}

Answer 3

Answer №2

Following the recommended approach, I attempted the following:

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

Unfortunately, this method proved to be ineffective as it did not work on Chrome either on my Ubuntu desktop or Android phone. This issue is discussed further here: calc() not working within media queries. However, I discovered an alternative solution...

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

Success!

Answer 4

Following the recommended approach, I attempted the following:

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

Unfortunately, this method proved to be ineffective as it did not work on Chrome either on my Ubuntu desktop or Android phone. This issue is discussed further here: calc() not working within media queries. However, I discovered an alternative solution...

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

Success!

Answer 5

Answer №3

calc() can be utilized in order to address this issue

(min-width: 50em and max-width: calc(50em - 1px)

will be displayed correctly stacked), however, due to poor browser support, I do not recommend it.

@media (min-width: 20em) and (max-width: calc(45em - 1px)) {
    /* for slightly wider viewport */
}

Information:

Some have suggested that avoiding the em unit would improve the stacking of your queries.

Answer 6

calc() can be utilized in order to address this issue

(min-width: 50em and max-width: calc(50em - 1px)

will be displayed correctly stacked), however, due to poor browser support, I do not recommend it.

@media (min-width: 20em) and (max-width: calc(45em - 1px)) {
    /* for slightly wider viewport */
}

Information:

Some have suggested that avoiding the em unit would improve the stacking of your queries.

Answer 7

Answer №4

Recently, I made an interesting discovery while experimenting with device emulation in MS Edge (v118.0.2088.46) within DevTools. When selecting Responsive dimensions and setting a width of 599px, I noticed that the specified media query was not being applied as expected:

@media (max-width: 599px) {
    ...
}

Strangely, adjusting the display width to 598px or slightly modifying the media query to max-width: 599.5px results in the desired outcome. It seems like there may be some sort of internal rounding issue causing this behavior.

I also observed the same issue in Chrome version 118.0.5993.89 and Firefox version 118.0.2.

Answer 8

Recently, I made an interesting discovery while experimenting with device emulation in MS Edge (v118.0.2088.46) within DevTools. When selecting Responsive dimensions and setting a width of 599px, I noticed that the specified media query was not being applied as expected:

@media (max-width: 599px) {
    ...
}

Strangely, adjusting the display width to 598px or slightly modifying the media query to max-width: 599.5px results in the desired outcome. It seems like there may be some sort of internal rounding issue causing this behavior.

I also observed the same issue in Chrome version 118.0.5993.89 and Firefox version 118.0.2.

Answer 9

Answer №5

Starting from March 2023, newer browsers (check out Can I Use) have implemented support for the new range syntax. This allows for more concise expressions of queries. For instance, you can now write width <= 20em instead of max-width: 20em.

What's interesting about this syntax is that it not only supports the <= and >= operators (similar to min-width and max-width comparisons), but also includes < and >. You now have the ability to make a decision on whether or not to include the endpoints of your range!

Take for example your original query:

@media (width < 20em) {
    /* styles for narrow viewport */
}

@media (20em <= width < 45em) {
    /* styles for slightly wider viewport */
}

@media (width >= 45em) {
    /* styles for everything else */
}

This eliminates any uncertainty when dealing with specific viewport widths like exactly 20 em. It clarifies that only the second rule will apply in that scenario. Similarly, at exactly 45 em, only the third rule will take effect.

If desired, you can modify some of the <= comparisons to < and vice versa. This way, when the viewport is exactly 20 em wide, the first rule will be triggered instead of the second. You also have the option to have both rules applied at the breakpoints if needed. The key point here is that you now have control over what happens at precise width points in your design.

Answer 10

Starting from March 2023, newer browsers (check out Can I Use) have implemented support for the new range syntax. This allows for more concise expressions of queries. For instance, you can now write width <= 20em instead of max-width: 20em.

What's interesting about this syntax is that it not only supports the <= and >= operators (similar to min-width and max-width comparisons), but also includes < and >. You now have the ability to make a decision on whether or not to include the endpoints of your range!

Take for example your original query:

@media (width < 20em) {
    /* styles for narrow viewport */
}

@media (20em <= width < 45em) {
    /* styles for slightly wider viewport */
}

@media (width >= 45em) {
    /* styles for everything else */
}

This eliminates any uncertainty when dealing with specific viewport widths like exactly 20 em. It clarifies that only the second rule will apply in that scenario. Similarly, at exactly 45 em, only the third rule will take effect.

If desired, you can modify some of the <= comparisons to < and vice versa. This way, when the viewport is exactly 20 em wide, the first rule will be triggered instead of the second. You also have the option to have both rules applied at the breakpoints if needed. The key point here is that you now have control over what happens at precise width points in your design.

Answer 11

Answer №6

If you only have two options, you can utilize the not operator:

@media (max-width: 20em) {
    html { background-color: red; }
}

@media not all and (max-width: 20em) {
    html { background-color: blue; }
}

Please Note: Including all in the query is necessary to use not.

Note: The not operator will negate the entire query regardless of parentheses, see: Inverting a query's meaning

Answer 12

If you only have two options, you can utilize the not operator:

@media (max-width: 20em) {
    html { background-color: red; }
}

@media not all and (max-width: 20em) {
    html { background-color: blue; }
}

Please Note: Including all in the query is necessary to use not.

Note: The not operator will negate the entire query regardless of parentheses, see: Inverting a query's meaning

Can you explain the guidelines for overlapping CSS media queries?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Is Flex still wrapping elements even when set to nowrap?

The fixed position seems to be malfunctioning and behaving more like absolute

In Bootstrap 5, the anchor tag is causing a shift in the background color of surrounding tags upon being clicked

Looking for assistance with text alignment?

Easily showcase a limitless number of items within a 10-column grid using Bootstrap!

5 horizontal navbar with dropdown menu in Bootstrap

Angular is throwing error TS2322 stating that the type 'string' cannot be assigned to the type '"canvas" while working with ng-particles

Is storing text in data-content and utilizing bootstrap-popover.js compatible?

How can we refine the user information based on the selection of a radio button?

The Material UI month picker interface is not displaying correctly

I aim to arrange three div elements in a single row with varying widths - placing one on the left, another in the center, and the last

Creating CSS style rules for aligning table column headers in JavaFXML

Utilizing Ajax to fetch a div element from a web page

Separate Your Navbar with Bootstrap 4 Separators

Finding an element based on its styling attribute, such as its position on the left or right side

Is there a Unicode character substitution happening?

Navigate between pictures using hover in jQuery

Searching for a comprehensive guide to web-related terminology that is widely accepted

HTML list style with varying images at the same level in a ul tag