0

which media condition will win in the given code below?

.img {
   background-image: url(small.jpg);
}
@media (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) {
    .img {
      background-image: url(medium.jpg);
    }
}
@media (min-width: 800px) {
    .img {
      background-image: url(large.jpg);
    }
}

There arises two possibilities.
Suppose the screen is greater than 800px and also has device-pixel-ratio equals to 2, then both the media queries resolves to true.

  1. which image will be retrieved?
  2. and is there any chance that both will get requested at the runtime (though only one will shown up overriding the anther) impacting(degrading) the performance by causing loading-time overhead?

Well, going by the rules of cascading it should be the last one. but I'm not sure if media queries have any kind of specificity like how an ID trumps a class.

This was marked duplicate of What are the rules for CSS media query overlap? but there is another aspect of this question(mentioned in point-2) which is not addressed in that marked-duplicate.

Jake
  • 244
  • 2
  • 16
  • 2
    Possible duplicate of [What are the rules for CSS media query overlap?](https://stackoverflow.com/questions/13241531/what-are-the-rules-for-css-media-query-overlap) – Alexander O'Mara Nov 11 '17 at 20:18
  • ^ Media queries have no specificity. – Alexander O'Mara Nov 11 '17 at 20:19
  • @AlexanderO'Mara But i have another context too relating to this question. will both the image get requested at runtime? like both getting requested and latter one override the another? – Jake Nov 11 '17 at 20:31
  • Browsers should not request both. – Alexander O'Mara Nov 11 '17 at 20:35
  • @AlexanderO'Mara so what exactly happens at runtime. what will happen when the sequential-parsing/execution process will reach to the preceding media-query blocks which will also resolve to true, would not those image get address? hope i am making sense, i am clouded with confusions – Jake Nov 11 '17 at 20:39
  • 1
    Style sheets get parsed, then their computed values get applied to the elements in the document, which may result in other things being loaded like a background image for an element. – Alexander O'Mara Nov 11 '17 at 20:51
  • @AlexanderO'Mara Oops now this make sense. well is there any other thing i shall be concern of which i may not be able to see? if anything strikes in your mind as important from performance perspective then do let me know – Jake Nov 11 '17 at 21:20

0 Answers0