What is the difference between these two instructions?
#media screen and (max-device-width: 480px) {}
and
#media only screen and (max-device-width: 480px) {}
The keyword ‘only’ can also be used to hide style sheets from older
user agents. User agents must process media queries starting with
‘only’ as if the ‘only’ keyword was not present.
From http://www.w3.org/TR/css3-mediaqueries/
In real use scenarios, the only screen query is used to target specific mobile browsers that support modern CSS.
From http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
Even more clearly
Prefixing a media queries with the "only" keyword will cause non
CSS3-compliant browsers to ignore the rule.
From http://www.html5rocks.com/en/mobile/mobifying.html
Related
I keep seeing tons of examples of media queries that look like this:
#media screen and (min-width: 700px) and (orientation: landscape)
or
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
Now, I understand HOW keywords like "screen" and "print" and "speech" are used, but I don't get the point. Maybe using "print" for some changes to save ink (though I imagine that's an edge case since backgrounds don't print by default), but why would you ever need to specify "speech"? Why do examples of media queries so often specify "screen"?
This specification from W3C suggest that media queries could also be used for HTML, XHTML, XML. Perhaps, queries with speech media type were mainly used for importing text to speech software into varieties of document types.
This is the only source that I could find describing the speech media type But it does not really provide a great example of how it is used.
As for why the examples often used screen media type, simply because it is the most often used. Previous versions of media queries had many media types, but are now removed as they have few uses or serve the same purpose with the current media types.
In the future, they may alter their specification, removing those not very useful media types or adding more of it to suit future technologies.
Update: I found a GitHub thread discussing about speech media type. It basically says that speech is mainly for user agent that deals with speech. E.g. Siri or Alexa.
CSS Syntax
#media not|only mediatype and (media feature and|or|not mediafeature) {
CSS-Code;
}
meaning of the not, only and and keywords:
not: The not keyword reverts the meaning of an entire media query.
only: The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. It has no effect on modern browsers.
and: The and keyword combines a media feature with a media type or other media features.
They are all optional. However, if you use not or only, you must also specify a media type.
Media Types
all Default. Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
I want to exclude iPads from using my CSS styling for desktop views on my website. I built my site mobile-first, so the desktop styles are in a media query.
While messing around with my code I tried this:
/*mobile and default styles (the styles I want the iPads to use)*/
#media (min-width: 750px;),
#media (device-width: 768px) and (device-height: 1024px) /*iPad resolution*/ {
/*desktop styles (the styles I don't want the iPad to use)*/
/*in this code, these styles are currently being ignored by iPads*/
}
I don't think this is valid code but it works correctly in every browser and device I have tested.
It has to do with having two #media lines on one media query. The second set of parameters are somehow excluded from the query, but I don't understand why. Without the second #media then it works like an or operator and the desktop styling will show up on an iPad.
I have tried nesting media queries, which doesn't seem to work, and I have tried using not, but the first line will still be true and thus it work work either.
I haven't found any information about using #media twice in a statement and having it somehow exclude the second media query, could someone explain the correct way to do this, or at least explain why this works?
Brilliant - yet incorrect syntax according to VS12.
Can be seen working here http://www.stilborg.com on iPad.
I have my site optimized for OS and iOS, but testing it for Android through browserstack.com has left me puzzled about targeting Android devices in my media queries.
Here is my query that works for iOS devices:
#using em based query after reading this article: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
#media only screen and (device-width: 20em)
I have tried a variety of different queries (including px based queries), but just want one that will work for all / most handheld android devices. Have you had any luck with this? Thanks for your ideas.
Media queries can't be used to find device type, you should use user agent sniffing for this.
There is a good resource for media queries on CSS-Tricks though.
Please have look into the demo at http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
It seems like device-width: 20em would cause some problems. So have look here.
Assuming your 1em = 16px I would use the below media query
#media only screen and (min-device-width: 20em) and (max-device-width: 30em)
That would look for any screen device whose width is between 320px and 480px, which is a fairly good standard for mobile devices.
if you want to target Android using media queries, I think you can fake it by querying dpi.
#media screen and (min-resolution: 192dpi) { … }
I am working on a responsive site and my client wants certain styles to apply to the desktop at 768px but NOT to tablets at that size. I've tried multiple media queries but I can only get Firefox to cooperate. Chrome, Safari and IE all ignore the media query. Here is what I tried.
#media only screen and (min-width: 768px), not (min-device-width: 768px) and (max-device-width: 1024px) {
/* styles for desktop only here */
}
I think it has to do with the "not" operator but I don't see that I'm doing anything wrong. It's also worth mentioning that the ipad (in my simulator) ignores the media query which is exactly what I want. I just can't get the Chrome, Safari and IE on my desktop to read the dang thing.
Each and every Media Query string separated by commas should be fully formed (I'm not aware that in the spec anything carries over from one to the next ...although some browsers may support "shortcuts" here, it's prudent to stick to the lowest common denominator: the spec). (Among other things this makes testing easier since simple text mods allow you to test one Media Query at a time.) And of course "only" and "not" are mutually exclusive options. So I think the syntax should be
#media only screen and (min-width: 768px), not screen and (min-device-width: 768px) and (max-device-width: 1024px) {
(xxx-device-width: and xxx-width: [with inclusion or exclusion of "-device"] refer to the screen width and the viewport/layout width respectively [which are typically the same for "desktop" devices, and for most handhelds if <meta name="viewport" content="width=device-width"> was specified, but may not be the same for smartphones without the "viewport" specification in the HTML source of the page). I don't typically see a mixture of the two in a single Media Query statement, and so [even though I haven't yet tried to understand this example in detail] I suspect something is a bit awry.)
You can't tell appart tablets and computers with resolution media queries : too much different resolutions on different hardware and no real common rule (have a look here, and that's only Androïd !)
You should detect touch support with Javascript, add a class to your HTML tag and build your CSS on this basis, bearing in mind it's not a 100% catch (there are touch computers.)
Try http://www.modernizr.com/ !
Other answers have suggested alternative approaches. I'll try and explain why what you were trying didn't work (as expected). I think this would be useful for people trying to get not working in media queries.
Negation of media expressions (individual parts like (min-device-width: 768px), as opposed to media queries, which are the full items in the comma-separated list, like only screen and (min-width: 768px)) requires CSS Level 4 which (AFAIK) is currently only supported in Firefox.
CSS Level 3 does support negation of full media queries (only), but if you use the not operator, you must also specify a media type.
So a Level 3 media query for 'not a tablet-sized device' would be not all and (min-device-width: 768px) and (max-device-width: 1024px) (or not screen and ... as suggested in #Chuck Kollars' answer).
not (min-device-width: 768px) and (max-device-width: 1024px) is not a valid Level 3 query but is a valid Level 4 query. However, not has greater precedence than and so it actually means (not (min-device-width: 768px)) and (max-device-width: 1024px) which is not what you intended.
The inner CSS rules are applied whenever any of the media queries in the list match. In other words, the comma (,) acts like an or operator. So what you were trying actually means 'at least 768px wide, or not a tablet', which will match almost everything (or would do with the media type added to the second query so it can be parsed by Level 3 browsers).
The only way I can think of to achieve what you were intending with CSS Level 3 would be something like
#media screen and (min-width: 768px) and (min-device-width: 1025px),
screen and (min-width: 768px) and (max-device-width: 767px) {
}
(Though the second media query now looks probably superfluous and unlikely to match.)
But as stated in #mddw's answer, this won't exclude all tablets and may even exclude some other devices.
Per Apple's developer instructions, I am using the following CSS to affect only iPads and iPhones. However, the CSS seems to be affecting older browsers as well (e.g., Firefox 3.5). Any suggestions on how to target only the iPad/iPhone or only target Firefox 3.5, but not both?
#media screen and (max-device-width: 1024px) {
{...}
}
The Media Queries are based on screen size (among other things). To target the iphone you need to change your query to something like:
#media screen and (max-device-width: 480px) {
{...}
}
This will only target devices with a max display resolution of 480px
You can read more here: http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
And I would definitely check out the new Responsive design book from A Book Apart - really really good