What is the exact "NOT" of the following CSS media query ?
#media only screen and (device-width:768px)
Just to add, it would mean..All EXCEPT iPAD...OR.....NOT iPAD..
and BTW...I have already tried
#media not only screen and (device-width:768px)
which does not work..
#media not screen and (device-width:768px)
not and only are mutually exclusive in media queries; only is needed only to work around some downrev UAs who implement the HTML4 algorithm for media strings, so when the query starts with not the only is pointless.
Related
I have media query here:
#media screen and (min-inline-size: 900px) {
...
}
but it's not working however with min-width it works well. Although when using min-inline-size as a property in body of selector (not as query in media rule) it works. Isn't it supported in query types yet?
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.
So yet again I find myself pulling my hair over responsive images. The CMS gives me its srcset, I build a simples sizes attribute, I check the currentSrc by hover-fumbling over the attribute in Dev Tools– wrong Src! Go to 10, change a media condition maybe, save, reload, hover, repeat until it kinda works. Hope it will never fail for other images.
There must be a better way to do this? Considering that Firefox is still better than Chrom* at debugging Webfonts and that only today I have found Add device pixel ratio in Chrome's Dev Tools, I wonder if I'm overlooking something. I know of & have used placeholder images, but they can be a pain to set up and they can't tell me
is the sizes attribute syntactically correct?
how many device pixels does the browser consider the image to be in the current viewport? How many "srcset w-pixels" is that?
and most importantly: which media condition matches the current viewport? Why?
EDIT: came up with this example, hope it helps:
<img
src="foo.jpg"
sizes="(max-width: 599px) 100vw, ((min-width: 600px) and (max-width: 1000px)) 33vw, 300px"
srcset="foo_a.jpg 300w, foo_b.jpg 768w" />
Viewport at 650px, device-pixel-ratio 1.
DevTools tells me:
currentSrc == "foo_b.jpg"
Why? Which condition is this? What does 33vw end up as? 650px*33/100? How does it relate to 300w? How is this closer to 768w?
Please note that I'm not really asking about these specific values, but a general workflow.
EDIT2: I am probably asking for a Dev Tools feature (or extension) that would tell me, in this case:
Viewport 650px
matches ((min-width: 600px) and (max-width: 1000px))
650px # DPR 1.0 = 650w
=> 33vw = 650w*33/100 = 214.5w
closest src = foo_a.jpg 300w
BUT, I have foo_b.jpg in cache
pick foo_b.jpg
is the sizes attribute syntactically correct?
In your case no. Outer parens on ((min-width: 600px) and (max-width: 1000px)) appear to be extra.
how many device pixels does the browser consider the image to be in the current viewport? How many "srcset w-pixels" is that?
If you know your device pixel ration (DPR), you can use that value to divide real image width (w value in srcset) to get pixel width that will image occupy on screen.
Browsers know this from srcset and sizes attributes you provided and take it into account when deciding which image to use.
and most importantly: which media condition matches the current viewport? Why?
Media queries in sizes attribute work exactly same as CSS media queries. So first valid media query, reading from left to right will be applied. Funny thing browser does (Chrome at least), if one query between set of commas is invalid it won't invalidate whole sizes attribute, just that query.
You can test this by applying those same set of media queries in CSS, like so (note I'm using Sass):
body {
#media (max-width: 599px) {
&:before { content: "max-width: 599px"; }
}
#media (min-width: 600px) and (max-width: 1000px) {
&:before { content: "(min-width: 600px) and (max-width: 1000px)"; }
}
In case of your second query, my linter reported invalid format until I removed outer parens. That's how I knew about your first point.
My test example: https://codepen.io/teodragovic/pen/eXjPoz
Good reference article: https://ericportis.com/posts/2014/srcset-sizes/