I want to have a stylesheet that is appropriate for print and screens of decent width.
I hope my intent is obvious when I type:
#media print or (screen and (min-width: 801px)) {
Rules here
}
Sadly, this won’t work.
What is the correct syntax?
Try this (a comma seperates several independent condtions/queries):
#media print, screen and (min-width: 801px) {
Rules here
}
Try this:
#media print, (min-width: 801px) {
Rules here
}
That would be for OR.
Just FYI, an AND structure would look like this:
#media print and (min-width: 801px) {
Rules here
}
#media print, screen and (min-width: 801px) {
.intro_text{
border: solid 1px blue;
}
}
works on a Mac (Safari, Chrome and Firefox.) Note the comma and fewer parentheses per:
2.1 Combining Media Queries
"Several media queries can be combined into a comma-separated media query list."
I would think, given:
2.4. Media Features
Media features are always wrapped in parentheses and combined with the and or or keywords, like (color) and (min-width: 600px), rather than being separated with semicolons.
2.5. Combining Media Features
"Media conditions can be grouped by wrapping them in parentheses () which can then be nested within a condition the same as a single media query."
It is invalid to mix and and or and not at the same “level” of a media query. For example, (color) and (pointer) or (hover) is illegal, as it’s unclear what was meant. Instead, parentheses can be used to group things using a particular joining keyword, yielding either (color) and ((pointer) or (hover)) or ((color) and (pointer)) or (hover). These two have very different meanings: if only (hover) is true, the first one evaluates to false but the second evaluates to true.
that some set of parentheses would work, but I can't find one. This must be due to the difference between "Media Queries" and "Media Features." The spec language seems a little unclear at places to me, e.g. the reference to "semicolons" above.
Related
I'm working on a webpage where I often need to use media queries like the following:
#media (min-width: 769px) and (max-width: 1280px) {
...
}
(Or with variables since I'm actually using Sass: (min-width: $vertical-view-max + 1) and (max-width: $medium-view-max))
Now, I am in the case where I would like the media query to trigger when the width is not in this interval.
I found that the following rule works fine:
#media (max-width: 768px), (min-width: 1281px) {
...
}
But I can't make it work with not operator:
#media (not ((min-width: 769px) and (max-width: 1280px))) {
...
}
I tried different parenthesizations (this one even seems to be invalid syntax). How should I write the rule? Is this not possible at all with the not operator?
That looks like a valid level 4 media query, but no browser has been updated to support the new grammar yet despite some of them beginning to support some of the new media features. In the meantime, to conform to level 3 with the not keyword your media query needs to look like this (with a media type added and all but the innermost pairs of parentheses removed):
#media not all and (min-width: 769px) and (max-width: 1280px) {
...
}
Despite what the apparent shortage of parentheses might suggest, the not actually serves to negate the entire media query starting from all and.
I'd like to apply a series of styles to browsers that meet two criteria:
Are not Internet Explorer.
Are a minimum of 1400px.
Individually I can handle each:
#supports(not (-ms-high-contrast:active))
#media(min-width: 1400px)
I'd like to do something like this though:
#media(min-width: 1400px) and #supports(not(-ms-high-contrast:active))
Does CSS allow for this in some way?
I've noticed that this can be done by nesting directives, but I'm hoping to find a cleaner and more readable solution.
At-rules such as #media, #supports and #keyframes are separate rules that cannot be grouped together by their at-keywords. That is, it's not possible to write a single rule with a single pair of curly braces that combines two different at-keywords as you are trying to do. So, unfortunately, nesting is your only option here.
The best you can do is write both statements — and their opening/closing braces — on the same lines:
#supports not (-ms-high-contrast: active) { #media (min-width: 1400px) {
}}
This is basically nesting them as shown in the linked question, minus the excess line breaks and indentation.
When writing a CSS media query, is there any way you can specify multiple conditions with "OR" logic?
I'm attempting to do something like this:
/* This doesn't work */
#media screen and (max-width: 995px OR max-height: 700px) {
...
}
Use a comma to specify two (or more) different rules:
#media screen and (max-width: 995px),
screen and (max-height: 700px) {
...
}
From https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.
CSS Media Queries & Logical Operators: A Brief Overview ;)
The quick answer.
Separate rules with commas:
#media handheld, (min-width: 650px), (orientation: landscape) { ... }
The long answer.
There's a lot here, but I've tried to make it information dense, not just fluffy writing. It's been a good chance to learn myself! Take the time to systematically read though and I hope it will be helpful.
Media Queries
Media queries essentially are used in web design to create device- or situation-specific browsing experiences; this is done using the #media declaration within a page's CSS. This can be used to display a webpage differently under a large number of circumstances: whether you are on a tablet or TV with different aspect ratios, whether your device has a color or black-and-white screen, or, perhaps most frequently, when a user changes the size of their browser or switches between browsing devices with varying screen sizes (very generally speaking, designing like this is referred to as Responsive Web Design)
Logical Operators
In designing for these situations, there appear to be four Logical Operators that can be used to require more complex combinations of requirements when targeting a variety of devices or viewport sizes.
(Note: If you don't understand the the differences between media rules, media queries, and feature queries, browse the bottom section of this answer first to get a bit better acquainted with the terminology associated with media query syntax
1. AND (and keyword)
Requires that all conditions specified must be met before the styling rules will take effect.
#media screen and (min-width: 700px) and (orientation: landscape) { ... }
The specified styling rules won't go into place unless all of the following evaluate as true:
The media type is 'screen' and
The viewport is at least 700px wide and
Screen orientation is currently landscape.
Note: I believe that used together, these three feature queries make up a single media query.
2. OR (Comma-separated lists)
Rather than an or keyword, comma-separated lists are used in chaining multiple media queries together to form a more complex media rule
#media handheld, (min-width: 650px), (orientation: landscape) { ... }
The specified styling rules will go into effect once any one media query evaluates as true:
The media type is 'handheld' or
The viewport is at least 650px wide or
Screen orientation is currently landscape.
3. NOT (not keyword)
The not keyword can be used to negate a single media query (and NOT a full media rule--meaning that it only negates entries between a set of commas and not the full media rule following the #media declaration).
Similarly, note that the not keyword negates media queries, it cannot be used to negate an individual feature query within a media query.*
#media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
The styling specified here will go into effect if
The media type AND min-resolution don't both meet their requirements ('screen' and '300dpi' respectively) or
The viewport is at least 800 pixels wide.
In other words, if the media type is 'screen' and the min-resolution is 300 dpi, the rule will not go into effect unless the min-width of the viewport is at least 800 pixels.
(The not keyword can be a little funky to state. Let me know if I can do better. ;)
4. ONLY (only keyword)
As I understand it, the only keyword is used to prevent older browsers from misinterpreting newer media queries as the earlier-used, narrower media type. When used correctly, older/non-compliant browsers should just ignore the styling altogether.
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
An older / non-compliant browser would just ignore this line of code altogether, I believe as it would read the only keyword and consider it an incorrect media type. (See here and here for more info from smarter people)
FOR MORE INFO
For more info (including more features that can be queried), see: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators
Understanding Media Query Terminology
Note: I needed to learn the following terminology for everything here to make sense, particularly concerning the not keyword. Here it is as I understand it:
A media rule (MDN also seems to call these media statements) includes the term #media with all of its ensuing media queries
#media all and (min-width: 800px)
#media only screen and (max-resolution:800dpi), not print
#media screen and (min-width: 700px), (orientation: landscape)
#media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)
A media query is a set of feature queries. They can be as simple as one feature query or they can use the and keyword to form a more complex query. Media queries can be comma-separated to form more complex media rules (see the or keyword above).
screen (Note: Only one feature query in use here.)
only screen
only screen and (max-resolution:800dpi)
only tv and (device-aspect-ratio: 16/9) and (color)
NOT handheld, (min-width: 650px). (Note the comma: there are two media queries here.)
A feature query is the most basic portion of a media rule and simply concerns a given feature and its status in a given browsing situation.
screen
(min-width: 650px)
(orientation: landscape)
(device-aspect-ratio: 16/9)
Code snippets and information derived from:
CSS media queries by Mozilla Contributors (licensed under CC-BY-SA 2.5). Some code samples were used with minor alterations to (hopefully) increase clarity of explanation.
There are two ways for writing a proper media queries in css. If you are writing media queries for larger device first, then the correct way of writing will be:
#media only screen
and (min-width : 415px){
/* Styles */
}
#media only screen
and (min-width : 769px){
/* Styles */
}
#media only screen
and (min-width : 992px){
/* Styles */
}
But if you are writing media queries for smaller device first, then it would be something like:
#media only screen
and (max-width : 991px){
/* Styles */
}
#media only screen
and (max-width : 768px){
/* Styles */
}
#media only screen
and (max-width : 414px){
/* Styles */
}
yes, using and, like:
#media screen and (max-width: 800px),
screen and (max-height: 600px) {
...
}
Yes, but not by using OR, you need to use and. Like,
#media screen and (max-width: 995px) and (max-height: 700px) {
...
}
And also, we can do it this way. The comma implies OR relationship,
#media screen and (max-width: 995px),
screen and (max-height: 700px) {
...
}
More information - Click here
I am trying to hide a media query from being printed, so I came up with #media not print and (min-width:732px). But for whatever reason, this (and many variations I have tried) does not display as I would expect in browsers.
The only option I can think of is to use #media screen and (max-width:732px), but I would like to avoid this as it excludes all the other media types besides screen.
Media queries grammar is pretty limited to say the least.
But with CSS3 (not CSS2.1) it seems that you can nest #media rules.
#media not print {
#media (min-width:732px) {
...
}
}
This basically executes as (not print) and (min-width:732px).
See https://stackoverflow.com/a/11747166/3291457 for more info.
How about something like this?
body { min-width:732px; }
#media print {
body { min-width:initial; }
}
The min-width will be set to 732 for everything, except print, which will get some other value that you specify. Depending on your situation, you can set a different width, or try something like "thiswontwork" (which sometimes causes the value to be set to the initial value) or "inherit" or something like that.
If I'm correct in my assumptions about the behavior you expected, the issue is that the precedence of not is lower than and.
#media not print and (min-width:732px) means "any media except for printers with at least 732px-wide viewports" (so it will apply to any non-printer and skinny printers) not "any media except printers, as long as that media has at least a 732px-wide viewport" (which is what I assume you expected).
Since parentheses aren't valid around media types and #media rules cannot be nested, working around it is kind of annoying. For simple cases, brentonstrine's answer is a good solution, but for queries which enclose many styles it can be burdensome to make sure they're all overridden properly.
I put together some example media queries when I was trying to figure this out myself earlier today.
As you can't put something like this
#media screen,handheld,projection,tv,tty and (max-width:732px) { ... }
you should write pairs for each media like following:
#media screen and (max-width:732px), handheld and (max-width:732px), projection and (max-width:732px), tv and (max-width:732px), tty and (max-width:732px) { ... }
You could try something like:
#media screen,handheld,projection,tv,tty { ... }
The above nested query didn't work for me, but after a little reading on Media Queries Media Types at MDN, you can exclude you're media query from print styles by specifying the screen type
So if you have a media query like this which doesn't specify a type, it will have an implied type of all, (which will affect print styles)
#media (min-width:400px) {
...
}
To exclude the style from print styles, you'd need to change it to this:
#media screen and (min-width:700px) {
...
}
I want to display the same set of CSS styles to people printing the page (media=print) and people browsing on a mobile phone. Is there a way I can combine CSS media queries?
Something like
#media only print or #media only screen and (max-device-width: 480px) {
#container {
width: 480px;
}
}
Separate them with a comma:
#media only print, only screen and (max-device-width: 480px)
See the spec, in particular, example VI (emphasis added):
Several media queries can be combined in a media query list. A
comma-separated list of media queries. If one or more of the media
queries in the comma-separated list are true, the whole list is true,
and otherwise false. In the media queries syntax, the comma expresses
a logical OR, while the ‘and’ keyword expresses a logical AND.
I doubt that the second only is needed, so you can probably do:
#media only print, screen and (max-device-width: 480px)
From https://developer.mozilla.org/en/CSS/Media_queries
You can combine multiple media queries in a comma-separated list; if
any of the media queries in the list is true, the associated style
sheet is applied. This is the equivalent of a logical "or" operation.
You just have to remove the second #media and add some brackets.