Media-Specific Styles

Size: px

Start display at page:

Download "Media-Specific Styles"

Kristopher Greer
6 years ago
Views:

1 Media-Specific Styles Same HTML, Different CSS R. Scott Granneman r Jans Carton R. Scott Granneman Last updated You are free to use this work, with certain restrictions. For full licensing information, please see the last slide/page.

2 Notes & URLs for this presentation can be found» underneath the link to this slide show on granneman.com» at files.granneman.com/presentations/webdev/css- Media-Specific-Styles.txt

3 Overview

4 A media query allows you to change how content is presented in 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)

5 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

6 2 ways to specify media queries» <link> element» Within a stylesheet

7 Link element <link rel="stylesheet" media="screen" href="screen.css"> <link rel="stylesheet" media="(max-width: 800px)" href="screen.css">

8 Within a stylesheet (max-width: 600px) { aside { display: none; } } </style>

9 Which is best?

10 Media-specific rule sets in the same screen { body { font-size: 1em; background: black; } print { body { font-size: 10pt; background: white; } } OK, but why go to the trouble of specifying screen?

11 Linking to 2 style sheets: 1 for screen & 1 for print <head> <link rel="stylesheet" href="screen.css" media="screen"> <link rel="stylesheet" href="print.css" media="print"> </head> Bad because» Overly-specific» Extra, probably unnecessary, server call

12 Linking to 2 style sheets: 1 for all & 1 for print (which inherits from all) <head> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="print.css" media="print"> </head> Bad because extra, probably unnecessary, server call

13 Do this: create a single style sheet & link to it in <head> <head> <link rel="stylesheet" href="main.css"> </head> Put your styles for everything at the top, with specific media styles at the end [styles for all print { } [styles for print]

14 html { } font-size: 16px; background: black; aside { } width: print { body { font-size: 12pt; background: white; } aside { display: none; } }

15 Media Types

16 You ve been using this code HTML 4.01 <link rel="stylesheet" type="text/css" href="main.css"> HTML5 <link rel="stylesheet" href="main.css">

17 Actually, <link rel="stylesheet" href="main.css"> is the same as <link rel="stylesheet" href="main.css" media="all">

18 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

19 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

20 Media Styles in Action

24 #content-branding <h1>

25 h1 { <h1> float: left; width: 40%; margin-left: 20px; padding-left: 75px; background: # url(/files/theme/h1.png) #content-branding no-repeat 0 0; font-size: 200%; } #content-branding { border-bottom: 1px solid #fff; padding: 1.5em 0; background-color: #000; }

27 h1 { font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 180%; } #content-branding { } display: none;

28 /* screen */ /* print */ h1 { float: left; width: 40%; margin-left: 20px; padding-left: 75px; background: # url(/files/theme/ h1 { font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 180%; } h1.png) no-repeat 0 0; font-size: 200%; }

29 /* screen */ /* print */ #content-branding { border-bottom: 1px solid #fff; #content-branding { } display: none; padding: 1.5em 0; background-color: #000; }

32 A hint: to test your print styles, use Print Preview instead of actually printing

33 Common Print Styles

34 body { color: black; background-color: white; font-size: 12pt; }

35 a:link, a:visited { color: black; text-decoration: underline; }

36 a:link::after, a:visited::after { color: black; text-decoration: underline; content: " (" attr(href) ") "; }

37 h1, h2, h3 { color: black; padding-bottom: 1px; border-bottom: 1px solid black; }

38 aside, nav,.adbanner { display: none; }

39 Print CSS

40 Properties

41 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

42 page-break-after page-break-before page-break-inside widows orphans

43 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

44 /* Move to a new page after footnotes */.footnotes { } page-break-after: always;

45 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

46 /* avoid page break before notes */.note { } page-break-before: avoid;

47 page-break-inside Adjusts page breaks inside the current block element Values» auto: automatic page breaks (default)» avoid: avoid page breaks before the element

48 /* avoid page breaks inside the lead & summary paragraphs */ article > p:first-child,.summary { } page-break-inside: avoid;

49 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!)

50 page-break-after *?? page-break-before *?? page-break-inside ?? * avoid, left, & right is not supported

52 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

53 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

54 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

55 widows 8 25 orphans

56 Pseudo-Classes & at-rule

57 :first :left

58 :first Selects the 1st page when printing a document

59 :left Selects any left page when printing a document

60 :right Selects any right page when printing a document

61 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

62 { Outer Margin Top Margin Gutter Outer Margin Left (Verso) Page Right (Recto) Page Inner Margins Bottom Margin

63 @page Modifies some CSS properties when printing a document:» margin: absolute <length> units only» orphans» widows» page-break-after, page-break-before, & pagebreak-inside Can modify only the page box, not the document content!

64 @page :first { } margin: 2in 3in;

65 :first 8???? :left 8???? :right ??

66 Media Features

67 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

68 @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 minwidth of 769px, then the style rules are applied to it

69 @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

70 @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

71 Media features are either viewport-centric (which we care about for responsive web design) or device-centric (for special cases)

72 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

73 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

74 @media Media Features

75 Thank you! websanity.com

76 Media-Specific Styles Same HTML, Different CSS R. Scott Granneman r Jans Carton R. Scott Granneman Last updated You are free to use this work, with certain restrictions. For full licensing information, please see the last slide/page.

77 Changelog : Minor wording changes : Updated compatibility chart in Media Features

78 Changelog : 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 : Improved recommendation at end of Overview : Added more details on media features; corrected list of media types; more details on :right &:left : Fixed minor errors

79 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 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 scott@granneman.com 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? scott@granneman.com

Media Types & Media Features

Media Types & Media Features Same HTML, Different CSS R. Scott Granneman r Jans Carton 1.6 2008 R. Scott Granneman Last updated 2018-08-21 You are free to use this work, with certain restrictions. For