This is how i code my desktop CSS like this.
#media (max-width: 1367px)
This is my iPad CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
and (min-resolution: 132dpi)
Unfortunately, the CSS codes that i used to code the desktop CSS clashes and overwrite the CSS of the iPad. Why is this so? Each target different devices but why do they clash with each other despite iPad's media query being more specific.
The 2 media queries are not mutually exclusive, and as such are both processed in order when both apply - media queries have no specificity, just applicability. It then becomes a matter of specificity at the CSS level: more specific rules in CSS get precedence, and in case of identical specificity the last definition is used.
Example:
#media (max-width:1300px) {
p { color:green; }
}
#media (min-width:1000px) {
p { color:red; }
}
For a browser between 1000 and 1300 pixels both rulesets apply, and since both contained rules are equally specific the latter 'wins' - paragraphs will be red.
More on how CSS cascades can be found here in the specs, specifically section 6.4.3 is a must-read for every webdeveloper.
Related
I am relatively new to web development I already have built some websites and currently I am tackling a large project. I am creating a website for my MC-Server.
For that, I am working with media queries to ensure that the website looks good on all sorts of devices.
BUT: I figured out, that there are two major kinds of media-query.
Examples for what I mean:
#media screen and (min-width: 1921px) {...}
#media (-webkit-min-device-pixel-ratio: 1.25) {...}
(I know that this isn't a standard yet)
I am having trouble using these. On 1080p monitors with 1.75, I need e.g. another positioning than on 1440p 1.75 monitors, etc.
Question #1: can I combine two media queries? E.g. the display must be 1080p AND 1.75 scale to use this query.
Question #2: what is the order in which the queries are processed? Resolution or scale first?
You can combine media queries with a comma, like so:
#media only screen and (orientation : landscape) , only screen and (min-device-width : 481px) and (orientation : portrait) {
...
}
In terms of precedence, styles that are declared later will be used, unless the styles inside the media query have different specificity levels, or a !important marker is used
You can use the following operators for media queries:
, is interpreted as the delimiter in a list of single media queries which are ORed. So each media query between the commas is first evaluated, then they are ORed together. This gives the comma / OR the lowest precedence.
not always applies to a whole media query, without extending over a comma. This gives NOT the second lowest precendence after the
comma / OR.
not and only are mutually exclusive and have the same precedence.
and has the highest precedence
() parentheses are only used around media features and their values, i.e. (color) or (min-width: 320px). They may NOT be used to change precedence by grouping expressions.
Source1
Source2
You're already using a boolean in your first example.
#media and (condition) and (condition) not (!condition) { ... }
The comma others have mentioned relates to an OR. It works the same way as stacking a bunch of classes:
.myclass1, myclass2, div, p {
color: red;
}
This means that ANY of the above would match and the text inside them would be red.
If you want to override or force precedence you simply put another declaration later:
#media only screen and (max-width: 1000px) {
p{
color: red;
}
}
#media only screen and (max-width: 500px) {
p{
color: blue;
}
}
In that instance, Paragraph tags would be blue until the rendered width is larger than 500px and then turn red up to 1000px wide. The reason that the <p> isn't always red is that the second rule overrides the previous one based on the order it was written.
For 99% of the responsive cases, you won't need to worry about any rules other than width and possibly ppi. However, I should note that a Media query is the exact same structure as #supports and can be used to target browsers like IE that are misbehaving. In those cases, you would test against some very specific attributes.
Example: This would target IE 10 +
#media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {...}
With respect to the following link:
What is the difference between "screen" and "only screen" in media queries?
"only" is used in media-query so that old browsers, which do not support media query should read only (and as hyphenated or alphabets are not present, but a space - they will stop further reading) and the rest of the code will not be applied (as 'only' is not a device type).
In conclusion, we should always write "only" as good practice and our code will be like this:
#media only screen and (min-width: 300px) and (max-width: 800px) { ... }
But, with that logic and applying only to prevent old browsers from messing up code whhile they don't support media query and otherwise screen keyword after being read - the following CSS will be applied globally (see the link above).
Now, what if I want to write certain media query for all platforms, viz. https://www.w3.org/TR/CSS2/media.html
What should my correct code be now:
#media only all and (min-width: 300px) and (max-width: 500px) { ... }
OR
#media all and (min-width: 300px) and (max-width: 500px) { ... }
Remember, all is a device-type keyword, so with the same logic, older-browsers will (if only keyword is not used), whatever CSS code is present will be applied globally.
On the other hand I have never seen a code such as only all so what I expect is to be syntactically-wrong and CSS will not run.
Now, can someone provide me solution with reason, which of the 2 options is correct?
Since all browsers right now support media query you can just use #media and it will work without any problem. Also bootstrap uses #meida which is something that works on all browsers right now.
#media (min-width: 300px) and (max-width: 500px) { ... }
Therefore you just need to use #media and you will get the same result as if you used
#media only screen and (min-width: 300px) and (max-width: 500px) { ... }
Please refer to this link am sure it will be helpful MDN #media
Also, this link is extremely useful MDN media query
I'm creating a small react app, and have run into an issue with the css.
My css is laid out in this general format
<-->
Shared classes/properties{}
<--->
<--->
#media only screen and (max-width: 991px){}
#media only screen and (max-width: 480px){}
<--->
The issue is: When looking at a phone (e.g. iPhone X), it is using the classes from max-width:991px instead of max-width:480px.
The expected behaviour is:
max-width:480 should cover 0px-480px
max-width:991 should cover 481px-991px
However currently, 0px-991px is only uses classes from max-width:991.
I've tried (min-width: 0px) and (max-width: 480px) and its counterpart, but it's still not behaving as expected.
I'm sure there's a gap in my understanding - can someone point out what I'm doing wrong?
You didn't post much code, but from what you posted, I would say you need to add the word "and" between "only screen" and "(max-width: ...)" in both lines:
#media only screen and (max-width: 991px){
...
}
#media only screen and (max-width: 480px){
...
}
From MDN:
The and operator is used for combining multiple media features
together into a single media query, requiring each chained feature to
return true in order for the query to be true. It is also used for
joining media features with media types.
--> You are combining screen and a max-width here. Using "and" combines both.
I'm using scss and I just want to disable hover features on mobile for a very specific section of code. It's a nested div using the & prefix. So, basically:
.superclass{
.subclass{
#media not all and (pointer: coarse) {
&hover{
hover style
}
}
}}
Would this work? Right now I'm dealing with build issues keeping me from deploying my application locally and verifying that way.
Why don't you use a traditional size approach for mobile?
#media only screen and (max-width : 320px) {
/* Styles */
}
I am working on a legacy site for someone where a media query does not seem to be having an effect on 1 out of 3 classes. The classes affected are .free-ship, .wholesale, .chronicles
The css for these on standard screen sizes is:
/* Shipping section - Home page */
.free-ship, .wholesale, .chronicles {
text-align:center;
height:180px;
width:30%;
}
.chronicles {
margin-right:10px;
}
.chronicles a, .wholesale a {
color:#fff;
}
Now I have in place the following css as media queries:
/* Media Queries */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.free-ship, .wholesale, .chronicles {
width:100%!important;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.free-ship, .wholesale, .chronicles {
height:230px;
}
}
The problem is, the media query does not seem to apply to the .wholesale class and I can't figure out why? Again, this is not my site, I am just trying to help out. The site is here (removed for privacy). The code refers to the black/grey boxes near the middle of the page.
Any suggestions would be most welcome. I've checked the custom.css file with css lint and this hasn't shown any errors so i'm looking for where I should look next?
Thank you in advance.
D
On the live site, it looks like the query isn't targeting ".wholesale," but instead it's targeting an older class called ".world-ship".
You may have changed the class name and it didn't get changed in the media query, or else it hasn't been pushed to live.
Media Query with ".world-ship" class
Ok...The issue was a complete oversight on my part, I forgot the site was cached through a CDN, so even though i've updated the css file and cleared the site cache many times, the changes were not taking affect. I've purged the cache on the CDN and its updated.
Clearly a wood for the tree's problem. Thanks for the answers and comments.