0

In my Rails 4 app, I am trying to implement a conditional to load different stylesheets for Internet Explorer VS. other browsers.

I have an app/views/layout/_header.html.erb partial with:

<head>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  <!--[if !IE]><!-->
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= stylesheet_link_tag 'ie', media: 'all', 'data-turbolinks-track' => true %>
  <!--<![endif]-->
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>

And I have the following stylesheets in app/assets/stylesheets:

custom / # with all my model-specific stylesheets here, such as posts.scss
application.scss
custom.scss
ie.scss

In application.scss I have:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap/theme";
@import "bootstrap-datetimepicker";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "simple_calendar";
@import "custom.scss";
@import "custom/**/*";

Note: the IE-specific rules in ie.scss are very light, less than 20 lines of code.

However, when I launch the app in Internet Explorer, the CSS rules from ie.scss are not taken into account.

How can I make the ie.scss file load when the user launches the app in Internet Explorer?

Thibaud Clement
  • 6,607
  • 10
  • 50
  • 103
  • 1
    The IE condition which you have written is **Everything except IE**, change it to, ``````. Do not include application stylesheet twice. – Sahil Nov 21 '15 at 03:02
  • 1
    Follow this [blog](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/) for conditional stylesheets syntax. – Sahil Nov 21 '15 at 03:04
  • Awesome, thank you very much. This fixed the problem. I also had to add `Rails.application.config.assets.precompile += %w( ie.css )` to `config/initializers/assets.rb` and now everything is working fine. Feel free to suggest this solution as an answer, I will be more than happy to accept it. – Thibaud Clement Nov 21 '15 at 03:16

1 Answers1

1

For all IE versions:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<!-- Calling application stylesheet file only once -->
<!--[if IE]> 
  <%= stylesheet_link_tag 'ie', media: 'all', 'data-turbolinks-track' => true %> 
<![endif]-->

And instead of specifying ie.css, you can change it to:

Rails.application.config.assets.precompile += %w( *.css )

So that you don't have to add each and every file separately. What I generally use in my projects:

Rails.application.config.assets.precompile += %w( *.js *.css *.png *.jpg *.jpeg )
Sahil
  • 3,338
  • 1
  • 21
  • 43