I was researching about CSS media queries best practices and found the Foundation's definition.
As you can see, the first media query has no min/max-size definition:
#media only screen { } /* Define mobile styles */
Why do they use this media query as it defines no break-point? Is this a best practice or should be avoided?
Thanks!
That particular media query applies to all screens (of any size, orientation, aspect ratio or pixel density).
screen is a media type. Whatever you put inside that media query will only apply to screen and will not apply to content of other media_types.
Here is the list of currently recognized values for media_type. Most of them have been deprecated. The ones you should use (as they are probably here to stay) are:
all (implicit if none specified)
screen
print
speech
The guys at Foundation probably should change the comment after that query to a more explicit one. Instead of /* Define mobile styles */ they should have probably used /* General styles, including mobile */.
Look at the structure of their media queries and you will notice it is a mobile-first CSS framework. As in: you define the general styles (including mobile) first and than apply exceptions for ever increasingly wider screens.
Media queries are not only for breakpoints. You can specify the output medium like screen. In this case, only display screens are targeted. You can also target only print media, or media with specific orientation or resolution.
See more information about media queries and media types on MDN or w3schools.
Related
I have one stylesheet, which has both mobile-layout definitions and desktop-layout definitions. I would prefer to still have just one stylesheet.
The stylesheet splits definitions into #media screen and (max-width: 1049px) and #media screen and (min-width: 1050px) to separate mobile and desktop layouts. Sometimes they share the same layout for certain elements, hence why I don't use two stylesheets.
I would like a footer button that lets the user manually switch between these, so even if their screen is under 1049px they can still opt to use the desktop layout. I'd like to store this choice in the localStorage.
The issue is, how can I tell the different media queries in the CSS to also check the localStorage variable, preferably without having two stylesheets? What are my options?
I've been doing some research on this topic and can't find an answer.
When defining your media queries you typically write the following one of two ways:
#media screen and (min-width: 320px) {}
and
#media (min-width: 320px) {}
What I'm interested to learn is what's the reason one would define "screen"? Is this a must have when defining media queries?
Also - what is best / common practice regarding using min-width or max-width?
Google advises to NOT use the min-device-widthproperty:
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
The "screen" aspect of the media rule is referred to as "media type" and filters contexts in which the styles within the query may be applied.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.
The specification does state that the type can be omitted-
if the media type is not explicitly given it is ‘all’.
Therefore, in a strictly technical and "as per the spec" sense, "screen" can be omitted from your media query.
I was once taught that some browsers that do not understand the media query specification have difficulty unless the media type is specified and render all styles regardless. This was about two years ago I am struggling to find any citations and references to it, contemporary or otherwise, so this may not be a worthwhile consideration for you now.
Version 4 of the media queries specification deprecates all specific media queries apart from screen, print and speech (largely as the lines between handheld, tv, screen etc are now extremely blurred at best) and states-
Note: It is expected that all of the media types will also be
deprecated in time, as appropriate media features are defined which
capture their important differences.
As such, unless your testing uncovers problems with legacy browsers and media queries that do not specify a media type - you should be able to safely omit the type in your stylesheets.
It is worth noting though that your examples are not exactly equal. The example-
#media (min-width: 320px) {}
Is exactly equivalent to-
#media all and (min-width: 320px) {}
And not the cited-
#media screen and (min-width: 320px) {}
As 'all' obviously includes 'screen', the rendered effect is the same in your tests, but it is probably useful to understand that these are not equal expressions.
Most notably omitting the type will mean that your styles are applied in print where the remainder of the expression also evaluates to true.
With regard to the advice from Google not to use min-device-width (or indeed I would suggest device-width at all - unless you quite specifically understand what you are doing), this is almost certainly as the width of the device (most often screen) is not always the same as the viewport/window in which your page is being rendered.
This will most often be the case, and can most easily be explained, in the context of a laptop or desktop environment where a user has multiple windows open at the same time for the purposes of multi-tasking or copying data between windows. The non-maximized browser window does not fill the full space of the desktop and thus the window width is not the same size as the width of the device itself as reported by the browser.
Some tablets and televisions are capable of multi-tasking or multiple side-by-side or window-in-window windows, in particular with tablets running Windows 8, so this is not exclusively a problem in "desktop" environments.
If your media query used the 'device-width' as opposed to simply 'width' then no matter how much the user resizes their window or squishes it about - your design will not change and adapt. The size and resolution of the monitor remains constant and as such there will be no change in evaluation of your media query expressions. The only option available to your user in order to change the design would be to maximize the window, change the display resolution on their device (if possible) or to change to another device altogether.
This may well be sub-optimal for the user if viewing a design carefully intended for their full screen width in a window that is substantially smaller - requiring frequent scrolling and/or hiding important content off screen.
The 'width' feature instead targets the actual "display surface", meaning the window size or viewport. As stated in the specification-
The ‘width’ media feature describes the width of the targeted display
area of the output device. For continuous media, this is the width of
the viewport
This would mean that a user with a non-maximised window of (say) 40% of the device width would get the design you have chosen for that width and not the full 100% width of the device.
tl;dr: Does it make sense to scope "mobile" CSS under a .touch class (added by Modernizr) rather than with media queries based on viewport size?
I am creating mobile styles for a site designed to be desktop-only (i.e. the page is fixed at ~900px wide, many targets are too small for touch, etc). The site has lots of forms, some tables, and no images/video/charts. I cannot control the HTML structure (except with JS, which I'd like to avoid), and I cannot make meaningful changes to the existing desktop styles.
I've written a new style sheet that overrides those styles where necessary to make it work well on a phone and on a tablet in portrait mode using max-width media queries.
The problem is that when you turn the tablet to landscape mode the screen becomes 1024px wide which is where desktop styles ought to take over. However, a tablet is still a touch device and I feel the "mobile" style is better suited to tablets (larger tap targets, nicer layout of the form fields and labels, off-canvas menu, etc). It seems quite clunky and disorienting for a site to suddenly change just because you rotated the device.
Should I scope the mobile styles under the .touch class added by Modernizr instead of the viewport width? On the surface it doesn't sound like a bad idea, but then again I know that viewport-based media queries are the proper way to write styles so I can't help but feel I will run into trouble down the line.
You could use Modernizr to pick between two stylesheets to load.
In a file called small-enough.css or something, import your mobile styles based on a media query for tablet portrait size and down. Documentation found here. Just have this one line in it.
#import path/your-mobile-styles.css #media (max-width: [tablet portrait width]);
Then with modernizr if it's a touch device just load the mobile styles. If it is not touch load the file that uses the media query to decide to load the mobile styles.
Modernizr.load({
test: Modernizr.touch,
yep : 'your-mobile-styles.css',
nope: 'small-enough.css'
});
You could probably target those devices using a media query along the lines of
#media only screen and and (min-device-width:~whatever~) and (max-device-width:1024px) and (orientation:landscape) {
styles
}
We should also remember that not all mobile devices are touch enabled, such as some Blackberry phones, so enabling some features/styling based on the .touch class that modernizr adds can also help.
The unsemantic css framwork snaps web layouts to mobile and desktop modes depending on the viewport size. You can also heavily modify what appears on the desktop vs mobile using 'show-on-desktop' and 'show-on-mobile' classes, which do exactly what they say.
Does this mean I can say goodbye to media queries?
http://unsemantic.com/
In short, yes.
In actuality, Unsemantic abstracts away the use of #media queries in one of two ways:
Providing responsive CSS versions (unsemantic-grid-responsive.css or unsemantic-grid-responsive-tablet.css) that create these #media queries for you according to predefined breakpoints.
Loading an individual CSS file without #media queries, after determining the viewport size on load using Adapt.js; then, optionally loading additional CSS files if necessary according to customizable breakpoints upon resizing the viewport.
Source: http://unsemantic.com/css-documentation
I am aware of the CSS 3 units vw, vh and vm, which seem to be useful for making elements that have their box sizes and text sizes relative to the browser's viewport size. However, sadly, these are not well-supported with the current major browsers; only Internet Explorer 9+ does.
What other methods can I use to do things like CSS font-size properties that scale with the viewport? I would like to avoid JavaScript and/or jQuery solutions if possible.
Doing a 100% scalable website is possible. As Rev said, you can do this by using percentage values, but it is tricky.
The better option is to utilize #media queries. These allow you to apply CSS rules to a page only under certain conditions. By using media queries to detect the device width and/or the page width, you can apply fine tune control over how your site looks AT different viewport sizes. For instance:
#media screen and (max-device-width: 960px) {
font-size:14px;
}
#media screen and (max-device-width: 480px) {
font-size:13px;
}
Now, the above example is rather trivial and contrived. For a deeper understanding of what you can accomplish with media queries, I recommend you view the W3C spec page. Some of the most powerful are the width, min-device-width, max-device-width, portrait|landscape, and print queries.
As a side note, make sure to include these styles at the bottom of your CSS, so that they dont get overwritten by default styles.