Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing Rails 3.1 assets pipeline to conditionally use certain css
    primarykey
    data
    text
    <p>I’m in the process of building my first solo Rails app using Rails 3.1.rc5. My problem is that I want to have my site render the various CSS files conditionally. I’m using Blueprint CSS and I’m trying to have sprockets/rails render <code>screen.css</code> most of the time, <code>print.css</code> only when printing, and <code>ie.css</code> only when the site is accessed from Internet Explorer.</p> <p>Unfortunately, the default <code>*= require_tree</code> command in the <code>application.css</code> manifest includes everything in the <code>assets/stylesheets</code> directory and results in an unpleasant CSS jumble. My current workaround is a sort of brute-force method where I specify everything individually:</p> <p>In application.css:</p> <pre><code>*= require_self *= require home.css ... *= require blueprint/screen.css </code></pre> <p>In my stylesheets partial (haml):</p> <pre><code>&lt;!--[if lt IE 9] &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt; ![endif]--&gt; = stylesheet_link_tag "application" = stylesheet_link_tag 'blueprint/print', media: 'print' &lt;!--[if lt IE8]] = stylesheet_link_tag 'blueprint/ie' ![endif]--&gt; = javascript_include_tag "application" </code></pre> <p>This works but it’s not especially pretty. I’ve done a few hours of searching to even get this far but I’m hoping that there’s some easier way to do it that I’ve just missed. If I could even selectively render certain directories (without including subdirectories) it would make the whole process a lot less rigid.</p> <p>Thanks!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload