How to use print styles in css with Rails 4?

Question

I have the following in my application.css.scss file:

@media print {
  form, img {
    display: none;
  }
}

But when I try to print a page from my site, the forms and images on the page still appear on the printout.

In development, the top of the application.css file looks like this:

/*
 * This is a manifest file ...
 */
@media print {
  form, img {
    display: none; } }

What am I doing wrong here?

Answer 1

If you do not specify the media type, rails will default to "screen" and hence, you're trying to use a print query on a screen type stylesheet, which doesn't work. To go avoid this problem, one thing you can do is specifying the media type when calling the stylesheet from your view. Eg :

= stylesheet_link_tag "application", media: "all"
= stylesheet_link_tag "application", media: "screen, projection"
= stylesheet_link_tag "application", media: "print"

I usually keep a simple call to the css application (including the manifest that requires the tree) and add a stylesheet link tag calling for a css I usually name 'print.scss' specifying the media type, but I also have to remember to add on the application manifest :

*= stub print

so this file is not called twice under two different media types.