Media-Specific Styles
Same HTML, Different CSS
R. Scott Granneman
Jans Carton
© 2008 R. Scott Granneman
Last updated 2015-01-16
You are free to use this work, with certain restrictions.
1.4 For full licensing information, please see the last slide/page.
Notes & URLs for this presentation can be found…
» underneath the link to this slide on [Link]
» at fi[Link]/presentations/webdev/CSS-
Media-Specifi[Link]
Overview
A media query allows you to change how content is
presented on different media without having to change
the content itself
A media query consists of…
» a media type (a device; e.g., print or screen)
» zero or more media features (a test for a single, specific
feature of the device or browser; e.g., min-width or
orientation)
A media query is either true (apply it!) or false (ignore
it!)
Media queries are applied first, & then the rendering
engine applies the CSS cascade
2 ways to specify media queries
» <link> element
» Within a stylesheet
Link element
<link rel="stylesheet" media="screen"
href="[Link]">
<link rel="stylesheet" media="(max-width:
800px)" href="[Link]">
Within a stylesheet
<style>
@media (max-width: 600px) {
aside {
display: none;
}
}
</style>
Which is best?
Media-specific rule sets in the same stylesheet
@media screen {
body {
font-size: 1em; background: black;
}
}
@media print {
body {
font-size: 10pt; background: white;
}
}
OK, but why go to the trouble of specifying screen?
Linking to 2 style sheets: 1 for screen & 1 for print
<head>
<link rel="stylesheet" href="[Link]"
media="screen">
<link rel="stylesheet" href="[Link]"
media="print">
</head>
Bad because…
» Overly-specific
» Extra, probably unnecessary, server call
Linking to 2 style sheets: 1 for all & 1 for print (which
inherits from all)
<head>
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet" href="[Link]"
media="print">
</head>
Bad because extra, probably unnecessary, server call
Do this: create a single style sheet & link to it in <head>
<head>
<link rel="stylesheet" href="[Link]">
</head>
Put your styles for everything at the top, with specific
media styles at the end
[styles for all media]
@media print {
[styles for print]
}
html {
font-size: 16px; background: black;
}
aside {
width: 12rem;
}
@media print {
body {
font-size: 12pt; background: white;
}
aside {
display: none;
}
}
Media Types
You’ve been using this code
HTML 4.01
<link rel="stylesheet" type="text/css"
href="[Link]">
HTML5
<link rel="stylesheet" href="[Link]">
Actually,
<link rel="stylesheet" href="[Link]">
is the same as
<link rel="stylesheet" href="[Link]"
media="all">
Media Queries Level 4* defines 4 media types
» all: all media type devices (default)
» print: printers & Print Preview
» speech: screenreaders (was aural)
» screen: “all devices that aren’t matched by print or
speech”
* Working Draft as of June 3, 2014
Deprecated media types:
» braille: Braille tactile feedback devices
» embossed: paged Braille printers
» handheld: small or handheld devices
» projection: projected presentations
» tty: fixed-pitch character grid (teletypes & terminals)
» tv: television-type devices
Media Styles
in Action
<h1>
#content-branding
h1 {
<h1> float: left;
width: 40%;
margin-left: 20px;
padding-left: 75px;
background: #191919
url(/files/theme/[Link])
no-repeat 0 0;
#content-branding font-size: 200%;
}
#content-branding {
border-bottom: 1px solid #fff;
padding: 1.5em 0;
background-color: #000;
}
h1 {
font-family: Helvetica, Arial,
sans-serif;
font-weight: bold;
font-size: 180%;
}
#content-branding {
display: none;
}
/* screen */ /* print */
h1 { h1 {
float: left; font-family:
width: 40%; Helvetica, Arial,
margin-left: 20px; sans-serif;
padding-left: 75px; font-weight: bold;
background: #191919 font-size: 180%;
url(/files/theme/ }
[Link]) no-repeat
0 0;
font-size: 200%;
}
/* screen */ /* print */
#content-branding { #content-branding {
border-bottom: 1px display: none;
solid #fff; }
padding: 1.5em 0;
background-color:
#000;
}
A hint: to test your print styles, use Print Preview
instead of actually printing
Common
Print Styles
body {
color: black;
background-color: white;
font-size: 12pt;
}
a:link,
a:visited {
color: black;
text-decoration: underline;
}
a:link::after,
a:visited::after {
color: black;
text-decoration: underline;
content: " (" attr(href) ") ";
}
h1, h2, h3 {
color: black;
padding-bottom: 1px;
border-bottom: 1px solid black;
}
aside,
nav,
.adbanner {
display: none;
}
Print CSS
Properties
Terms
First page is easy
Left page or right page?
If the first page’s writing direction is…
» left-to-right: it’s a :right page
» right-to-left: it’s a :left page
page-break-after
page-break-before
page-break-inside
widows
orphans
page-break-after
Adjusts page breaks after the current block element
Values
» auto: automatic page breaks (default)
» always: always force page breaks
» avoid: avoid page breaks
» left: force page breaks so the next page is formatted as a
left page
» right: force page breaks so the next page is formatted as a
right page
/* Move to a new page after footnotes */
.footnotes {
page-break-after: always;
}
page-break-before
Adjusts page breaks before the current block element
Values
» auto: automatic page breaks (default)
» always: always force page breaks before the element
» avoid: avoid page breaks before the element
» left: force page breaks before the element so the next
page is formatted as a left page
» right: force page breaks before the element so the next
page is formatted as a right page
/* avoid page break before notes */
.note {
page-break-before: avoid;
}
page-break-inside
Adjusts page breaks inside the current block element
Values
» auto: automatic page breaks (default)
» avoid: avoid page breaks before the element
/* avoid page breaks inside the lead & summary
paragraphs */
article > p:first-child, .summary {
page-break-inside: avoid;
}
A note about page-break-after & page-break-before
from the Mozilla Developer Network: “…this property is
in progress of being replaced by the more generic
break-after” (which no one supports!)
page-break-after 4 1.2 1 1* ? ?
page-break-before 4 1.2 1 1* ? ?
page-break-inside 8 1.3 1 19 ? ?
* avoid, left, & right is not supported
Widows & orphans?
Widow: last line of a paragraph that falls at the
beginning of the following page
Orphan: first line of a paragraph that appears by itself
at the bottom of a page
A mnemonic: “An orphan is alone from the beginning; a
widow is alone at the end”
widows
Defines minimum lines in a block container that must
be left on top of a new page
Must be a positive <integer>
Defaults to 2
orphans
Set minimum number of lines in a block container that
must be left at the bottom of a page
Must be a positive <integer>
Defaults to 2
widows 8 — 25 — — —
orphans 8 — 25 — 25 —
Pseudo-Classes
& at-rule
:first
:left
:right
@page
:first
Selects the 1st page when printing a document
:left
Selects any left page when printing a document
:right
Selects any right page when printing a document
Why :left & :right?
Because the W3C is helping you create a printed book,
& you want to change the right margin on the left page,
& the left margin on the right page
Outer Margin Top Margin Gutter Outer Margin
{
Left (Verso) Page Right (Recto) Page
Inner Margins Bottom Margin
@page
Modifies some CSS properties when printing a
document:
» margin: absolute <length> units only
» orphans
» widows
» page-break-after, page-break-before, & page-
break-inside
Can modify only the page box, not the document
content!
@page :first {
margin: 2in 3in;
}
:first 8 ? ? — ? ?
:left 8 ? ? — ? ?
:right 8 ? ? — ? ?
@page 8 5 2 19 ? ?
Media
Features
You limit the style sheet’s scope based on media
features, such as width, height, & color
Almost all media features can be prefixed with…
» min-: greater than or equal to
» max-: less than or equal to
@media (min-width: 769px) {
.hamburger-nav {
display: none;
}
}
min-width is a media feature
(min-width: 769px) is an expression
If the media (in this case, the viewport) has a min-
width of 769px, then the style rules are applied to it
@media (orientation: portrait) {
.sidebar {
float: none;
}
}
orientation is a media feature
(orientation: portrait) is an expression
If the media (in this case, the viewport) has an
orientation of portrait, then the style rules are
applied to it
@media (min-width: 700px) and (orientation: landscape) {
…
}
min-width & orientation are media features
(min-width: 700px) & (orientation: landscape) are
expressions
and is a logical operator (others are not & only)
(min-width: 700px) and (orientation: landscape) is a
complex media query
If the media has a min-width of 700px AND an orientation of
landscape, then the style rules are applied to it
Media features are either viewport-centric (which we
care about for responsive web design) or device-centric
(for special cases)
Viewport-centric
» width: width of viewport
» height: height of viewport
» aspect-ratio: <ratio> of horizontal pixels to vertical
pixels of viewport
» orientation: landscape or portrait
Device-centric
» color: bit depth of a standard display
» color-index: number of colors in an indexed color
display
» monochrome: bit depth of monochrome display
» device-width: width of screen in pixels
» device-height: height of screen in pixels
» device-aspect-ratio: <ratio> of horizontal pixels to
vertical pixels of screen
» resolution: pixel density of the output device
» grid: grid device or a bitmap device
» scan: scanning process of television
@media 9 1.3 1 1 1 3.1
Media
9 4 21 3.5 2.1 3.2
Features
Thank you!
scott@[Link]
[Link]
[Link]
@scottgranneman
jans@[Link]
[Link]
Media-Specific Styles
Same HTML, Different CSS
R. Scott Granneman
Jans Carton
© 2008 R. Scott Granneman
Last updated 2015-01-16
You are free to use this work, with certain restrictions.
1.4 For full licensing information, please see the last slide/page.
Changelog
2015-01-16 1.4: Updated compatibility chart in Media
Features
Changelog
2015-01-11 1.3: Renamed Media Queries to Media
Features; moved much of Overview to Media Types;
added new content to Overview; made it clearer which
method of specifying media queries is best; minor fixes
2014-12-01 1.2: Improved recommendation at end of
Overview
2014-08-01 1.1.2: Added more details on media
features; corrected list of media types; more details
on :right & :left
2014-05-15 1.1.1: Fixed minor errors
Licensing of this work
This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
To view a copy of this license, visit [Link]
You are free to:
» Share — copy and redistribute the material in any medium or format
» Adapt — remix, transform, and build upon the material for any purpose, even commercially
Under the following terms:
Attribution. You must give appropriate credit, provide a link to the license, and indicate if changes were
made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you
or your use. Give credit to:
Scott Granneman • [Link] • scott@[Link]
Share Alike. If you remix, transform, or build upon the material, you must distribute your contributions
under the same license as the original.
No additional restrictions. You may not apply legal terms or technological measures that legally restrict
others from doing anything the license permits.
Questions? Email scott@[Link]
