Question

What is the correct/rails/best practice way to call media specific (i.e. print, screen, etc) css if using Rails 3.1 asset pipeline? I know this has been asked before, but all of the solutions I’ve seen seem very hacky and not the elegant Rails solution I’ve come to expect.

As far as I can tell, the suggested approach is to set up the stylesheets folder as follows:

assets
-stylesheets
--application.css
--application-print.css
--print
---custom-print.css
--screen
---custom-screen.css

the contents of application.css being

/*
*= require_self
*= require_tree ./screen
*/

the contents of application-print.css being

/*
*= require_self
*= require_tree ./print
*/

then to include the following in the layout

<%= stylesheet_link_tag 'application', media = 'screen, projection' %>
<%= stylesheet_link_tag 'application-print', media = 'print' %>

OK, so far so good.

BUT, in my case custom-print.css is being applied onscreen, and no css is being applied to printed output.

Also, this approach seem to affect images called from css. i.e. instead of looking for images in assets/images it is now looking for images in assets/stylesheets/screen. There may be something else going on here, as it seems to be only javascript css that is affected. I will do some more checking and report back.

So my question is, how are you dealing with media specific css in the Rails asset pipeline?What is regarded as best practice? And what am I doing wrong?

Thanks for your time!

Answer 1

The problem is the syntax for the method call.

stylesheet_link_tag 'application', :media => 'screen, projection'
stylesheet_link_tag 'application-print', :media => 'print'

In your code you were assigning to a local variable called media