What Are the Rules For CSS Media Query Overlap

What are the rules for CSS media query overlap?

What are the rules for CSS media query overlap?

Cascade.

@media rules are transparent to the cascade, so when two or more @media rules match at the same time, the browser should apply the styles in all the rules that match, and resolve the cascade accordingly.¹

What will happen, across all supporting browsers, at exactly 20em, and 45em?

At exactly 20em wide, your first and second media query will both match. Browsers will apply styles in both @media rules and cascade accordingly, so if there are any conflicting rules that need to be overridden, the last-declared one wins (accounting for specific selectors, !important, etc). Likewise for the second and third media query when the viewport is exactly 45em wide.

Considering your example code, with some actual style rules added:

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

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

When the browser viewport is exactly 20em wide, both of these media queries will return true. By the cascade, display: block overrides display: none and float: left will apply on any element with the class .sidebar.

You can think of it as applying rules as if the media queries weren't there to begin with:

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

Another example of how the cascade takes place when a browser matches two or more media queries can be found in this other answer.

Be warned, though, that if you have declarations that don't overlap in both @media rules, then all of those rules will apply. What happens here is a union of the declarations in both @media rules, not just the latter completely overruling the former... which brings us to your earlier question:

How do we space out media queries accurately to avoid overlap?

If you wish to avoid overlap, you simply need to write media queries that are mutually exclusive.

Remember that the min- and max- prefixes mean "minimum inclusive" and "maximum inclusive"; this means (min-width: 20em) and (max-width: 20em) will both match a viewport that is exactly 20em wide.

It looks like you already have an example, which brings us to your last question:

I've seen people use: things like 799px and then 800px, but what about a screen width of 799.5 px? (Obviously not on a regular display, but a retina one?)

This I'm not entirely sure; all pixel values in CSS are logical pixels, and I've been hard pressed to find a browser that would report a fractional pixel value for a viewport width. I've tried experimenting with some iframes but haven't been able to come up with anything.

From my experiments it would seem Safari on iOS rounds all fractional pixel values to ensure that either one of max-width: 799px and min-width: 800px will match, even if the viewport is really 799.5px (which apparently matches the former).

¹ _{Although none of this is explicitly stated in either the Conditional Rules module or the Cascade module (the latter of which is currently slated for a rewrite), the cascade is implied to take place normally, since the spec simply says to apply styles in any and all @media rules that match the browser or media.}

How can I avoid media query overlap?

The only reliable way to create two mutually exclusive @media blocks for any given media query is to use not to negate it in one of the blocks. Unfortunately, this means repeating your media query once for each @media block. So, instead of this for example:

@media (max-width: 49.9375em) {
    body {
        color: red;
    }
}

@media (min-width: 50em) {
    body {
        font-size: larger;
    }
}

You would have this:

/* 
 * Note: Media Queries 4 still requires 'not' to be followed by a
 * media type (e.g. 'all' or 'screen') for reasons I cannot comprehend.
 */
@media not all and (min-width: 50em) {
    body {
        color: red;
    }
}

@media (min-width: 50em) {
    body {
        font-size: larger;
    }
}

Interactive jsFiddle demo

This is very effective at closing the gap with range media features like width and height since it essentially turns this into an either-or scenario. But, like your first two options, it isn't perfect: as mentioned, you have to repeat the same media query twice, and add not to one of them. There is no if/else construct for @media as described in Conditional Rules 3.

Although I mention this in my answer to your previous question:

From my experiments it would seem Safari on iOS rounds all fractional pixel values to ensure that either one of max-width: 799px and min-width: 800px will match, even if the viewport is really 799.5px (which apparently matches the former).

It should be noted, still, that I've noticed some quirks when it comes to rounding. That said, I haven't been able to find a fractional value that would evade both media queries and end up not receiving styles from either set of rules (which, by the way, is the worst that can happen, so don't worry about potentially creating a space-time rift). That must mean browsers — at least, Safari as I've tested — do a reasonable job of ensuring they satisfy media queries even if you have values that differ (by exactly 1 CSS pixel).

When it comes to units with larger gaps that can be observed on desktop browsers, though, like ems, there is a much larger margin of error. For example, one comment suggests using 49.99999em instead of something more arbitrary than 49.9375em, but apparently there is a difference, at least with a default font size of 16px.

I simplified your code, changed the media queries to use decimal values, and put the code in jsFiddle:

@media (max-width: 49.9375em) {
    body {
        color: red;
    }
}

@media (min-width: 50em) {
    body {
        font-size: larger;
    }
}

If you resize the Result pane to exactly 800 pixels (the text will update to guide you along), you actually end up with different results depending on whether @media (max-width: 49.9375em) is used, or @media (max-width: 49.99999em) is used (I was surprised by this too)...

Either way, you're right: option 2 has its drawbacks too. I'm not particularly fond of it, to be honest, because I wouldn't want to crack my head over device and user agent quirks which are out of my control. If you're like me, I suppose it would be better to go through the inconvenience of redeclaring your rules at the cost (?) of being more vigilant around your code, as that's at least still within your control as an author.

Why are my media queries stepping on each other?

I think you are having hard time with orientation remove orientation and all works fine.

Check that snippet.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
  }

  body {
    background-color: yellow;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1366px) {
    body {
      background-color: blue;
    }
  }

  @media only screen and (min-width: 810px) and (max-width: 1080px) {
    body {
      background-color: red;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    body {
      background-color: pink;
    }
  }

Should media query rules coincide at the breaking point or not?

min- and max-width are both inclusive, i.e. min-width: 860px means any screen that is 860px wide or wider. This means that

@media (max-width: 860px) { ...
@media (min-width: 860px) { ...

do overlap and the usual css precedence rules determine which to choose at a screen of width 860px exactly. So if you want to be absolutely, totally sure which rule will apply when, one should use 859px (or 861px).

Luckily, the Media Queries Level 4 spec, which is beginning to roll out to browsers, enables using regular comparison operators, making this cleaner and more obvious. You can then write

@media (width < 860px) { ...
@media (width >= 860px) { ...

And for three breakpoints, you can even do

@media (width < 860px) { ...
@media (860 <= width < 1080) { ...
@media (width >= 1080) { ...

CSS: media queries to match width x and width = x. Weird behavior

However, I have notice that there is a certain width of the window where the styles from both media queries seem to be mixed together. (It definitely isn't the case that no query is applied.)

Correct; instead, both of them are being applied, and that's when the width of the viewport exactly equals 34 ems. What happens then is that the cascade applies as usual. See my answer to the following question for an explanation:

What are the rules for CSS media query overlap?

The easiest way to handle this for two ranges of screen sizes is to utilize the cascade, but differently from what you have: by writing your rules generally for one screen size, and only including a media query for the other screen size as shown in dwreck08's answer.

Otherwise, if you want exactly one rule to be applied at a time without relying on the cascade to override your styles, use either min-width or max-width only, and negate it in the other rule with the not keyword. As an example, you can have either this:

@media screen and (max-width: 34em) {}     /* Smaller screen sizes */
@media not screen and (max-width: 34em) {} /* Larger screen sizes */

Or this:

@media not screen and (min-width: 34em) {} /* Smaller screen sizes */
@media screen and (min-width: 34em) {}     /* Larger screen sizes */

The ordering does not matter because not makes these rules mutually exclusive — at least, in the browsers that understand the keyword, which as far as I know is all of them that support media queries anyway.

My answer to this question, which is a follow-up to the one linked above, offers another explanation:

How can I avoid media query overlap?

Content overlapping on 480px media query

figured it out, since all i wanted to do was set a specific, unchanging height for the description cards, what I did was instead of adding a <div class="featureLocker"> inside the col-**-* bootstrap divs, I added that class TO the col-**-* bootstrap div, because, by only setting the height it wouldn't affect the horizontal responsiveness of those divs. This SEEMS TO BE the solution for this particular problem if someone is facing a similar issue. Thank you all for your help!

@media queries - one rule overrides another?

I'm not sure I entirely follow, but your @media rules suggest this is the behaviour you want. If the screen is 1400px and lower the width of #wrap will be 72%, this includes all other sizes mentioned in other media queries.

If you wanted it to only apply between 1024px and 1400px you need to change it to...

@media screen and (max-width: 1400px) and (min-width: 1024px)
{
    #wrap {
    width: 72%;
    }
}

EDIT You also have to remember that ordering matters in CSS...

@media screen and (max-width: 1400px)
{
    #wrap {
    width: 72%;
    }
}
@media screen and (max-width: 1024px)
{
    #wrap {
    width: 100%;
    }
}

For screens above 1024px the width of #wrap will be 72% as they will only match the first media query. If the screen is below 1024px the width of #wrap will be 100%, although it will be matched by both media queries. The CSS that will be rendered for a screen under 1024px will look like...

#wrap {
width: 72%;
}
#wrap {
width: 100%;
}

Rules defined later in the stylesheet overrides earlier rules http://www.w3.org/TR/CSS21/cascade.html#cascading-order 6.4.1 point 4. Therefore, if you swapped the order of the rules.

@media screen and (max-width: 1024px)
{
    #wrap {
    width: 100%;
    }
}
@media screen and (max-width: 1400px)
{
    #wrap {
    width: 72%;
    }
}

The width of #wrap will be 72% for ALL screen sizes up to 1400px because a screen under 1024px will see both rules as if they were...

#wrap {
width: 100%;
}
#wrap {
width: 72%;
}

A screen over 1024px will see...

#wrap {
width: 72%;
}

Both have the same result.

Weird CSS media queries logic

Both 'min' and 'max' prefixes are inclusive. Quoting the spec:

Most media features accept optional ‘min-’ or ‘max-’ prefixes to
express "greater or equal to" and "smaller or equal to" constraints.

The problem is a bit different: while you expect pixel dimensions to be integer, it's not always like that. This article describes the problem in quite a bit of detail:

You might think "Half a pixel? That's not possible", and for the most
part it's not. But if you use Ctrl+ or Ctrl- to change your browser
zoom then you'll often end up with non-integer viewport sizes, and
that non-integer viewport size can be used by the browser when working
out which media queries to apply to the page [...]

On Windows 7 and higher, there is a zoom level used by the operating
system for things like text and icons, and on larger screens (1920px
wide for example) this will automatically be set to a 125% zoom. But IE, Edge and Firefox all inherit this 125% value in their own way and end up applying it as browser zoom, creating the conditions for this bug to appear by default on most Windows machines with decent resolution screens in the past five or
six years.

Check the discussion opened on the similar issue in Bootstrap. A telling quote:

Chrome does not report decimal viewport widths even when zoomed, I
assume it rounds the values when applying media queries.

Quite convenient, I suppose.

In short, I'd drop either max-width or min-width here and go with overlapping rules, letting the latter rule to be a decider.

Is it okay to partially override a rule via a @media query?

It will retain those and only override the font-size value. In other words, when the media query is fulfilled, it behaves the same as:

.myClass {
    font-family:Helvetica;
    color:#333333;
    font-size:20px;
}

.myClass {
    font-size:30px;
}

And when it doesn't, the second rule disappears leaving just the first.

This is expected behavior; @media rules do not affect the cascade in any way other than to apply the enclosed rules only under specific conditions.

If you need to apply only either one rule or the other (i.e. the rules need to be mutually exclusive), you have two options:

Reset the font-family and color declarations in your second rule:

.myClass {
    font-family:Helvetica;
    color:#333333;
    font-size:20px;
}

@media screen and (min-width: 1000px) {
    .myClass {
        font-family:inherit;
        color:inherit;
        font-size:30px;
    }
}

Enclose the first rule in a negated version of your media query:

@media not screen and (min-width: 1000px) {
    .myClass {
        font-family:Helvetica;
        color:#333333;
        font-size:20px;
    }
}

@media screen and (min-width: 1000px) {
    .myClass {
        font-size:30px;
    }
}

See my answer to these similar questions for a much more detailed write-up:

What are the rules for CSS media query overlap?
How can I avoid media query overlap?

What Are the Rules For CSS Media Query Overlap