Media Queries (BYOSP Part 5)

Occasionally it's useful to print a slide deck onto paper, or export a slide deck to PDF using a print driver. Unfortunately, printing the slide show in it's current form will only display the single, current slide. We can fix this by adding a CSS media query at the bottom of the stylesheet.

@media print{
   
   @page {
       size: landscape;
   }
   
   section {
       opacity: 1;
       height: auto;
       overflow: auto;
       page-break-after: always;
   }      
    
}

Media queries are logical expressions that return true or false and are well supported in modern browsers. When the expression returns true, the browser will apply the styles inside the expression to the current document. Inside the media query shown above, we'll turn on the display of all <section> elements while printing. 

CSS media queries are powerful and becoming important these days. "Screen" and "print" are two media types you can use in a query to target styles for a specific output, but today you can also use media queries to target different screen resolutions, aspect ratios, color capabilities, and device orientations. As more and more mobile devices come online with powerful web browsers, media queries are an important tool in making HTML look good on different screen sizes.

When a web site goes to the trouble of recognizing and responding to a user's screen size and orientation it's called responsive design. For a great article on this topic, see Smashing Magazine's Responsive Web Design: What It Is and How To Use It.

And now ...

The slide presenter behaves well until we refresh the browser in the middle of a presentation. A refresh will restart the the slide show from the beginning. We'll fix this problem and add new features in the next post.

For all the code, see github.