CSS @media rules

purpose¶

The media rule is used in media queries to apply different styles for different media types/devices

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
printing, ...

example - width¶

let threshold = '500px'

let media_width_html = `<body>Click above to open
in a separate window, turn on
devel tools to see the window size, and resize
the window so the width becomes smaller
or larger than ${threshold}
<br><b>NOTE:</b> make sure your zoom factor is 100%
</body>`

let media_width_css = `body {
    background-color: #fae3d9; /* light pink */
}

/* applies if the browser window width
   is less than 500px */

@media only screen and (max-width: 500px) {
  /* here we use a rule MORE SPECIFIC than above */
  html>body {
    background-color: #bbded6; /* light green */
  }
}`

await tools.sample_from_strings({html: media_width_html, css: media_width_css}, {start_with: 'css'})

common pitfall¶

in this first example, note that
- either the default body rule must come first
- or the second rule must be more specific
the reason is that when the @media rule applies
- the browser sees TWO RULES for body
- and if they have the same specificity, then the last one wins
so it is a good practice to use more specific rules in a media clause
hence our html>body (for instance)

example - print¶

let media_print_html = `<body class="media">
It is often very useful to tweak the print
layout, in terms of margins and the like.
<hr>
Click above to open in a separate window,
and pretend to print so you get a preview;
</body>`

let media_print_css = `/* our body tag has a media class
 * with this trick the order now won't matter */
body {
    font-family: Trebuchet MS;
}

@media print {
  body.media {
    font-family: Papyrus;
    font-size: 50px;
    margin-left: 3cm;
  }
}`

await tools.sample_from_strings({html: media_print_html, css: media_print_css}, {start_with: 'css'})

`<link media=...>`¶

another way to use media rules is to conditionnally apply a CSS <link> tag from the <head> node

<link rel="stylesheet"
    <!-- NOTE the new media attribute here -->
    media="screen and (min-width: 900px)"
    href="widescreen.css">

devel tools and multi-device¶

the devel tools - on chrome at least allow to simulate other devices - like popular phones and tablets

practice - responsive grid¶

open the example below in a separate window
and observe behaviour on narrow, mid-size, and large viewport
write an HTML document and related CSS that mimicks it
at least for viewports smaller and larger than 512px

await tools.sample_from_stem("../samples/22-exo-grid", {sources_show: false})

purpose¶

example - width¶

common pitfall¶

example - print¶

<link media=...>¶

devel tools and multi-device¶

see also¶

practice - responsive grid¶

`<link media=...>`¶